先创建一个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 代码, 名字
