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

逝水年华 · 发表于 2024-11-12 16:39:43

马上注册，免费下载更多dz插件网资源。

您需要登录才可以下载或查看，没有账号？立即注册

×

先创建一个html页面，如：index.html 放上代码如下：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> <title>逗号姓氏名字生成器</title></head><body> <div class="container"> <input type="text" id="surnameInput" placeholder="请输入姓氏"> <button onclick="generateNames()">生成名字</button> <div id="namesList"></div> </div> <script src="script.js"></script></body></html>

复制代码

在同目录在创建一个CSS文件，如：styles.css 里面代码如下：

.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;}

复制代码

最后再创建一个JS文件，如：script.js 放上代码如下（里面的名字可以自行增加或者修改）：

function generateNames() { const surname = document.getElementById('surnameInput').value; const namesListDiv = document.getElementById('namesList'); namesListDiv.innerHTML = ''; const commonChineseNames = [ '建国', '国庆', '建华', '志强', '志刚', '红梅', '秀兰', '桂英', '玉珍', '丽娟', '艳红', '明华', '永强', '永辉', '海峰', '海涛', '晓东', '晓峰', '晓燕', '晓敏', '瑞芳', '瑞雪', '德明', '德强', '文强', '文静', '文华', '伟强', '伟华', '春芳', '春华', '春燕', '宝强', '宝华', '新国', '新华', '新民', '翠兰', '俊峰', '俊华', '爱华', '爱国', '爱玲', '爱萍', '振国', '振华', '振强', '雪梅', '雪峰', '雪琴', '向明', '向阳', '向华', '雨薇', '雨涵', '雨晨', '宇轩', '宇飞', '宇鹏', '思涵', '思琪', '思远', '嘉豪', '嘉欣', '嘉俊', '嘉琦', '天琪', '天悦', '天俊', '天龙', '慧芳', '慧敏', '慧娟', '兴邦', '兴强', '兴发', '秀华', '秀珍', '秀云', '亚男', '亚芳', '亚丽', '世强', '世华', '世英', '晨曦', '晨阳', '晨辉', '光远', '光明', '光宇', '美华', '美兰', '美琪', '俊楠', '俊熙', '俊豪', '语嫣', '宇晴', '宇婷', '博宇', '博超', '博睿', '雅琴', '雅丽', '雅楠', '子轩', '子豪', '子涵', '子琪', '梓豪', '梓轩', '梓涵', '梓琪', '雨轩', '雨豪', '雨琪', '诗涵', '诗琪', '诗雅', '启铭', '启轩', '启豪', '若萱', '若冰', '若曦', '心怡', '心雨', '心悦', '昕怡', '昕雨', '昕悦', '明轩', '明豪', '明琪', '婉婷', '婉如', '婉君', '梦琪', '梦涵', '梦婷', '浩宇', '浩轩', '浩博', '语嫣', '语彤', '语熙', '清妍', '清怡', '清华' ]; let rowDiv; for (let i = 0; i < 100; i++) { if (i % (window.innerWidth <= 768? 4 : 8) === 0) { rowDiv = document.createElement('div'); namesListDiv.appendChild(rowDiv); } const nameIndex = Math.floor(Math.random() * commonChineseNames.length); const name = surname + commonChineseNames[nameIndex]; const nameElement = document.createElement('a'); nameElement.href = 'https://qiming.wengbi.com/mz/' + encodeURIComponent(name) + '.html'; nameElement.textContent = name; const pElement = document.createElement('p'); pElement.appendChild(nameElement); rowDiv.appendChild(pElement); }}

复制代码

以上就是分享的代码，演示地址：https://qiming.douhao.com/code/mzscq/
大家如果觉得好，麻烦支持一下我们的SSL(https)证书，长效395天只要25元哈，网址：ssl.douhao.com

©DZ插件网所发布的一切资源仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
网站部分内容来源于网络，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，得到更好的正版服务。
您在本站任何的赞助购买、下载、查阅、回复等行为等均表示接受并同意签订《DZ插件网免责声明协议》。
如有侵权请邮件与我们联系处理: discuzaddons@vip.qq.com 并出示相关证明以便删除。敬请谅解！