随机生成姓名DEMO

一个W牛

已于 2024-02-29 19:06:49 修改

阅读量700

点赞数 16

文章标签：前端 javascript jquery 前端框架

于 2024-02-29 17:39:03 首次发布

本文链接：https://blog.csdn.net/qq_45587547/article/details/136376974

版权

参考文档;字典和百家姓
通过点击按钮可以生成两个字和三个字的姓名，还可以自行设定输出几组姓名。姓氏引用了百家姓的部分姓氏，名字获取的新华字典的json数据。有兴趣的可以引用百家姓的json数据。里边的json数据可以参考文档，
路径：app/src/main/assets/word.json
html部分;

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>随机</title>
  <link rel="stylesheet" href="./index.css">
  <!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script> -->
  <script src="./js/JQuery.3.7.1.min.js"></script>
  <script src="./js/autofit.min.js"></script>
  <script src="./js/index.js"></script>
  <script src="./js/word.json"></script>
  <script>
    autofit.init()//自动进行适配
  </script>
</head>

<body>
  <div class="main">
    <div style="border: 1px solid red;width:400px;margin-left: 20px;">
      <h1>随机生成姓名</h1>
      <button class="gettwoname">获取两个字名字</button>
      <button class="p1_jian">-</button><input type="text" value="1" class="p1_ipt"><button class="p1_jia">+</button>
      <textarea id="twoname" readonly></textarea><br>
      <button class="getthreename">获取三个字名字</button>
      <button class="p2_jian">-</button><input type="text" value="1" class="p2_ipt"><button class="p2_jia">+</button>
      <textarea id="threename" readonly></textarea>
    </div>
  </div>
</body>

</html>

css部分：

* {
  margin: 0;
  padding: 0;
}
ul.ol.li {
  display: none;
}
.main {
  font-size: 16px;
}
h1 {
  font-size: 16px;
  margin: 10px 100px;
}
.gettwoname,
.getthreename {
  font-size: 16px;
  margin-top: 20px;
}
#twoname,
#threename {
  width: 200px;
}
input {
  width: 30px;
  text-align: center;
}

js部分：

$(document).ready(function () {
  var xingArr = [
    "赵",
    "钱",
    "孙",
    "李",
    "周",
    "吴",
    "郑",
    "王",
    "冯",
    "陈",
    "褚",
    "卫",
    "蒋",
    "沈",
    "韩",
    "杨",
    "刘",
    "朱",
    "秦",
    "尤",
    "许",
    "何",
    "吕",
    "施",
    "张",
    "孔",
    "曹",
    "严",
    "华",
    "金",
    "魏",
    "陶",
    "姜",
    "戚",
    "谢",
    "邹",
    "喻",
    "柏",
    "水",
    "窦",
    "章",
    "云",
    "苏",
    "潘",
    "葛",
    "奚",
    "范",
    "彭",
    "郎",
    "鲁",
    "韦",
    "昌",
    "马",
    "苗",
    "凤",
    "花",
    "方",
    "俞",
    "任",
    "袁",
    "柳",
    "酆",
    "鲍",
    "史",
    "唐",
    "费",
    "廉",
    "岑",
    "薛",
    "雷",
    "贺",
    "倪",
    "汤",
    "滕",
    "殷",
    "罗",
    "毕",
    "郝",
    "邬",
    "安",
    "常",
    "乐",
    "于",
    "时",
    "傅",
    "皮",
    "卞",
    "齐",
    "康",
    "伍",
    "余",
    "元",
    "卜",
    "顾",
    "孟",
    "平",
    "黄",
    "和",
    "穆",
    "萧",
    "尹",
    "姚",
    "邵",
    "湛",
    "汪",
    "祁",
    "毛",
    "禹",
    "狄",
    "米",
    "贝",
    "明",
    "臧",
    "计",
    "伏",
    "成",
    "戴",
    "谈",
    "宋",
    "茅",
    "庞",
    "熊",
    "纪",
    "舒",
    "屈",
    "项",
    "祝",
    "董",
    "梁",
    "杜",
    "阮",
    "蓝",
    "闵",
    "席",
    "季",
    "麻",
    "强",
    "贾",
    "路",
    "娄",
    "危",
    "江",
    "童",
    "颜",
    "郭",
    "梅",
    "盛",
    "林",
    "刁",
    "钟",
    "徐",
    "邱",
    "骆",
    "高",
    "夏",
    "蔡",
    "田",
    "樊",
    "胡",
    "凌",
    "霍",
    "虞",
    "万",
    "支",
    "柯",
    "昝",
    "管",
    "卢",
    "莫",
    "经",
    "房",
    "裘",
    "缪",
    "干",
    "解",
    "应",
    "宗",
    "丁",
    "宣",
    "贲",
    "邓",
    "郁",
    "单",
    "杭",
    "洪",
    "包",
    "诸",
    "左",
    "石",
    "崔",
    "吉",
    "钮",
    "龚",
    "程",
    "嵇",
    "邢",
    "滑",
    "裴",
    "陆",
    "荣",
    "翁",
    "荀",
    "羊",
    "於",
    "惠",
    "甄",
    "曲",
    "家",
    "封",
    "芮",
    "羿",
    "储",
    "靳",
    "汲",
    "邴",
    "糜",
    "松",
    "井",
    "段",
    "富",
    "巫",
    "乌",
    "焦",
    "巴",
    "弓",
    "牧",
    "隗",
    "山",
    "谷",
    "晋",
    "楚",
    "闫",
    "法",
    "段",
  ];

  function readLocalJSoNFile(file) {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", file, true);
    xhr.onload = function () {
      if (xhr.status === 200) {
        var responseData = JSON.parse(xhr.responseText); // 将响应文本转换为JSON对象
        var words = [];
        for (var i = 0; i < responseData.wordjson.length; i++) {
          words.push(responseData.wordjson[i].word);
        }
        // console.log(words);
        var mingArr = words;

        $(".gettwoname").click(function () {
          var set = $(".p1_ipt").val(); //生成的组数
          var setArr = [];
          for (var i = 0; i < set; i++) {
            var randomNumber_xing = Math.floor(Math.random() * xingArr.length);
            var randomNumber_ming1 = Math.floor(Math.random() * mingArr.length);
            var getxing = xingArr[randomNumber_xing];
            var getming = mingArr[randomNumber_ming1];
            var result2 = [getxing, getming];
            result2 = result2.join("");
            console.log(result2);
            setArr.push(result2);
          }
          $("#twoname").text(setArr);
        });

        $(".getthreename").click(function () {
          var set = $(".p2_ipt").val(); //生成的组数
          var setArr = [];
          for (var i = 0; i < set; i++) {
            var randomNumber_xing = Math.floor(Math.random() * xingArr.length);
            var randomNumber_ming1 = Math.floor(Math.random() * mingArr.length);
            var randomNumber_ming2 = Math.floor(Math.random() * mingArr.length);
            var getxing = xingArr[randomNumber_xing];
            var getming = mingArr[randomNumber_ming1];
            var getming2 = mingArr[randomNumber_ming2];
            var result3 = [getxing, getming, getming2];
            result3 = result3.join("");
            console.log(result3);
            setArr.push(result3);
          }

          console.log(setArr);
          $("#threename").text(setArr);
        });
      }
    };
    xhr.send();
  }
  readLocalJSoNFile("./js/word.json");

  var value1 = $(".p1_ipt").val();
  var value2 = $(".p2_ipt").val();

  $(".p1_jian").click(function () {
    $(".p1_ipt").val(value1--);
  });
  $(".p1_jia").click(function () {
    $(".p1_ipt").val(value1++);
  });
  $(".p2_jian").click(function () {
    $(".p2_ipt").val(value1--);
  });
  $(".p2_jia").click(function () {
    $(".p2_ipt").val(value1++);
  });
});