·设为首页收藏本站📧邮箱修改🎁免费下载专区💎积分✅卡密📒收藏夹👽聊天室
返回列表 发布新帖

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

86 2
发表于 2024-11-12 16:39:43 | 查看全部 阅读模式

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

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

×
先创建一个html页面,如:index.html  放上代码如下:
  1. <!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  里面代码如下:
  1. .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  放上代码如下(里面的名字可以自行增加或者修改):
  1. 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
我要说一句 收起回复
创宇盾启航版免费网站防御网站加速服务

评论2

TyCodingLv.8 发表于 2024-11-12 16:40:22 | 查看全部
不错不错
我要说一句 收起回复
CrystαlLv.8 发表于 2024-11-12 16:40:59 | 查看全部
谢谢夸奖,大家觉得好以后我再分享一些特效代码。
我要说一句 收起回复

回复

 懒得打字嘛,点击右侧快捷回复【查看最新发布】   【应用商城享更多资源】
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

创宇盾启航版免费网站防御网站加速服务
投诉/建议联系

discuzaddons@vip.qq.com

未经授权禁止转载,复制和建立镜像,
如有违反,按照公告处理!!!
  • 联系QQ客服
  • 添加微信客服

联系DZ插件网微信客服|最近更新|Archiver|手机版|小黑屋|DZ插件网! ( 鄂ICP备20010621号-1 )|网站地图 知道创宇云防御

您的IP:18.97.14.87,GMT+8, 2024-12-13 00:40 , Processed in 0.251483 second(s), 90 queries , Gzip On, Redis On.

Powered by Discuz! X5.0 Licensed

© 2001-2024 Discuz! Team.

关灯 在本版发帖
扫一扫添加微信客服
QQ客服返回顶部
快速回复 返回顶部 返回列表