H5 随机身份证号码、社会统一信用代码、手机号、名字、银行卡号码

news2024/9/29 14:17:40

平时注册可能会用到这些，原本用自己服务器搭了个，感觉纯前端的还能引入到项目中挺好的，之后再追加一些常用的随机数据，这样写表单应该就会好测试了(●’◡’●)。

在线链接
https://linyisonger.github.io/H5.Examples/?name=./076.%E9%9A%8F%E6%9C%BA%E6%95%B0%E6%8D%AE.html
效果
在这里插入图片描述
主要逻辑在下面这个仓库中，这里只做了npm引用、展示、复制功能。
https://github.com/linyisonger/3r.Tool

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./assets/global.css" />

    <style>
      .fakery-box {
        padding: 20px;
      }
      .fakery-subtitle {
        font-size: 13px;
        color: #c45e5e;
        margin-bottom: 10px;
      }
      .fakery-title {
        font-size: 18px;
        color: #333;
      }
      .fakery-item {
        display: flex;
        padding: 5px 0;
        cursor: pointer;
      }
      .fakery-label {
        width: 120px;
        font-size: 14px;
        color: #333;
      }
      .fakery-btn {
        margin-top: 10px;
        padding: 10px 20px;
        display: inline-flex;
        color: #fff;
        background-color: #fd9651;
        cursor: pointer;
        user-select: none;
      }
      .ps {
        color: #333;
        font-size: 12px;
      }
      .fakery-value.active {
        color: #c45e5e;
      }
      .fakery-value.active::after {
        margin-left: 20px;
        content: "复制成功~";
        font-size: 12px;
      }
    </style>
  </head>

  <body>
    <div class="fakery-box">
      <div class="fakery-header">
        <div class="fakery-title">随机数据</div>
      </div>
      <div class="fakery-subtitle">点击下面想要的数据即可复制到剪贴板上面</div>
      <div class="fakery-item">
        <div class="fakery-label"></div>
        <div class="fakery-value"></div>
      </div>
      <div class="fakery-item">
        <div class="fakery-label"></div>
        <div class="fakery-value"></div>
      </div>
      <div class="fakery-item">
        <div class="fakery-label"></div>
        <div class="fakery-value"></div>
      </div>
      <div class="fakery-item">
        <div class="fakery-label"></div>
        <div class="fakery-value"></div>
      </div>
      <div class="fakery-item">
        <div class="fakery-label"></div>
        <div class="fakery-value"></div>
      </div>

      <div class="fakery-btn again">再来一组</div>
      <div class="ps">ps: 如果要在代码开发测试也可以使用@3r/tool这个包😏</div>
    </div>

    <script type="module">
      // import "https://gcore.jsdelivr.net/npm/@3r/tool@1.5.0/lib/randoms.js";
      import { Fakery } from "https://gcore.jsdelivr.net/npm/@3r/tool@1.5.1/lib/fakery.js";

      // 创建假数据组
      function createFakeryGroup() {
        return {
          name: Fakery.fullName(),
          phone: Fakery.phoneNumber(),
          idCard: Fakery.citizenIdentificationNumber(),
          backCard: Fakery.bankCardNumber(),
          usci: Fakery.usci(),
        };
      }
      // 更新卡片
      function updateCard(fakery) {
        let box = document.querySelector(".fakery-box");
        let fakeryList = box.querySelectorAll(".fakery-item");
        let fakeryKeys = Object.keys(fakery);
        let zh = {
          name: "姓名",
          phone: "手机号码",
          idCard: "身份证号码",
          backCard: "社会统一信用代码",
          usci: "工商银行卡号码",
        };
        for (let i = 0; i < fakeryList.length; i++) {
          const fakeryItem = fakeryList.item(i);
          const fakeryKey = fakeryKeys[i];
          const fakeryLabel = fakeryItem.querySelector(".fakery-label");
          const fakeryValue = fakeryItem.querySelector(".fakery-value");
          fakeryValue.onclick = copyToClipboard;
          fakeryLabel.textContent = zh[fakeryKey];
          fakeryValue.textContent = fakery[fakeryKey];
        }
      }

      /**
       * 复制到剪贴板
       */
      function copyToClipboard(e) {
        let input =
          document.querySelector(".copy-input") ||
          document.createElement("input");
        input.className = "copy-input";
        input.value = e.target.textContent;
        input.style = `position: fixed;top: -100%;`;
        document.body.append(input);
        input.select();
        document.execCommand("copy");
        e.target.classList.add("active");
        setTimeout(() => {
          e.target.classList.remove("active");
        }, 1000);
      }

      const againBtn = document.querySelector(".again");
      againBtn.onclick = () => {
        updateCard(createFakeryGroup());
      };
      againBtn.click();
    </script>
  </body>
</html>