今天再分享一个小型的起名系统完整代码，很干净无数据库的连样式都没用。
先创建一个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; 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 不错不错 谢谢夸奖，大家觉得好以后我再分享一些特效代码。
页:
[1]
