今天再分享一个小型的起名系统完整代码,很干净无数据库的连样式都没用。

查看 29|回复 2
作者:逗号广告联盟   
先创建一个html页面,如:index.html  放上代码如下:[ol]
  •   
  •   
  •   
  •   逗号姓氏名字生成器
  •   
  •    
  •     生成名字
  •    
  •   
  •   
  • [/ol]复制代码
    在同目录在创建一个CSS文件,如:styles.css  里面代码如下:
    [ol]
  • .container {
  •   width: 1200px;
  •   margin: 0 auto;
  •   text-align: center;
  •   padding: 20px;
  •   background-color: #f4f4f4;
  •   border-radius: 5px;
  •   box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  • }
  • input {
  •   width: 200px;
  •   padding: 10px;
  •   margin: 10px;
  •   border: 1px solid #ccc;
  •   border-radius: 3px;
  • }
  • button {
  •   padding: 10px 20px;
  •   background-color: #007BFF;
  •   color: white;
  •   border: none;
  •   border-radius: 3px;
  •   cursor: pointer;
  • }
  • #namesList {
  •   margin-top: 20px;
  •   display: flex;
  •   flex-wrap: wrap;
  •   justify-content: center;
  • }
  • #namesList p {
  •   width: 180px;
  •   margin: 5px;
  •   padding: 5px;
  •   border: 1px solid #ccc;
  •   border-radius: 3px;
  • }[/ol]复制代码
    最后再创建一个JS文件,如:script.js  放上代码如下(里面的名字可以自行增加或者修改):
    [ol]
  • function generateNames() {
  •   const surname = document.getElementById('surnameInput').value;
  •   const namesListDiv = document.getElementById('namesList');
  •   namesListDiv.innerHTML = '';
  •   const commonChineseNames = [
  •     '建国', '国庆', '建华', '志强', '志刚', '红梅', '秀兰', '桂英', '玉珍', '丽娟',
  •     '艳红', '明华', '永强', '永辉', '海峰', '海涛', '晓东', '晓峰', '晓燕', '晓敏',
  •     '瑞芳', '瑞雪', '德明', '德强', '文强', '文静', '文华', '伟强', '伟华', '春芳',
  •     '春华', '春燕', '宝强', '宝华', '新国', '新华', '新民', '翠兰', '俊峰', '俊华',
  •     '爱华', '爱国', '爱玲', '爱萍', '振国', '振华', '振强', '雪梅', '雪峰', '雪琴',
  •     '向明', '向阳', '向华', '雨薇', '雨涵', '雨晨', '宇轩', '宇飞', '宇鹏', '思涵',
  •     '思琪', '思远', '嘉豪', '嘉欣', '嘉俊', '嘉琦', '天琪', '天悦', '天俊', '天龙',
  •     '慧芳', '慧敏', '慧娟', '兴邦', '兴强', '兴发', '秀华', '秀珍', '秀云', '亚男',
  •     '亚芳', '亚丽', '世强', '世华', '世英', '晨曦', '晨阳', '晨辉', '光远', '光明',
  •     '光宇', '美华', '美兰', '美琪', '俊楠', '俊熙', '俊豪', '语嫣', '宇晴', '宇婷',
  •     '博宇', '博超', '博睿', '雅琴', '雅丽', '雅楠', '子轩', '子豪', '子涵', '子琪',
  •     '梓豪', '梓轩', '梓涵', '梓琪', '雨轩', '雨豪', '雨琪', '诗涵', '诗琪', '诗雅',
  •     '启铭', '启轩', '启豪', '若萱', '若冰', '若曦', '心怡', '心雨', '心悦', '昕怡',
  •     '昕雨', '昕悦', '明轩', '明豪', '明琪', '婉婷', '婉如', '婉君', '梦琪', '梦涵',
  •     '梦婷', '浩宇', '浩轩', '浩博', '语嫣', '语彤', '语熙', '清妍', '清怡', '清华'
  •   ];
  •   let rowDiv;
  •   for (let i = 0; i 复制代码
    以上就是分享的代码,演示地址:https://qiming.douhao.com/code/mzscq/  
    大家如果觉得好,麻烦支持一下我们的SSL(https)证书,长效395天只要25元哈,网址:ssl.douhao.com

    代码, 名字

  • 我思故我在   
    不错不错

    逗号广告联盟
    OP
      
    我思故我在 发表于 2024-11-12 15:39
    不错不错

    谢谢夸奖,大家觉得好以后我再分享一些特效代码。
    您需要登录后才可以回帖 登录 | 立即注册

    返回顶部