HTML随机点名

时尚的冬瓜

已于 2024-12-23 11:17:19 修改

阅读量314

点赞数 1

CC 4.0 BY-SA版权

文章标签： html 前端 javascript

于 2024-12-23 11:16:14 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_43865714/article/details/144660925

1、编辑人员名单

用记事本打开这个文件
在这里插入图片描述编辑人员名单

在这里插入图片描述 # 2、保存文件，浏览器打开运行即可。

<!DOCTYPE html>
<html>
<head>
    <style>
      body {
        background-image: url('./Boundary.jpeg'); /* 替换为你的背景图片路径 */
        background-size: cover;
        background-position: center;
        font-family: Arial, sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
      }
      .container {
        text-align: center;
        background-color: rgba(255, 255, 255, 0.8); /* 半透明背景 */
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      }
      .box {
        height: 20px;
        margin: 10px 0;
        font-size: 24px;
        font-weight: bold;
      }
      button {
        margin: 5px;
        padding: 10px 20px;
        font-size: 16px;
        cursor: pointer;
        border: none;
        border-radius: 5px;
        transition: background-color 0.3s, opacity 0.3s;
      }
      button:hover {
        background-color: #ddd;
      }
      .disbtn {
        opacity: 0.6;
        pointer-events: none;
      }
    </style>
</head>
<body>
    <div class="container">
        <!-- 选人 -->
        <div class="box">
          <span class="person"></span>
        </div>
        <div>
          <button id="btn">随机选人</button>
          <button id="btn2">暂停</button>
          <button id="btn3">重置</button>
        </div>
    </div>

  <script>
    // 随机选人
    let personElement = document.querySelector(".person");
    let btn = document.getElementById("btn");
    let btn2 = document.getElementById("btn2");
    let btn3 = document.getElementById("btn3");
    let intervalId;
	// 随机选人 候选名单
    let originalPersonArr = [
      "刘",
      "张",
      "王",
      "宋",
      "李",
      "向",
      "曹",
      "吴",
      "郭",
      "唐",
      "田",
      "陈",
    ];
    let personArr = [...originalPersonArr]; // 复制原始数组

    function randomPerson() {
      if (intervalId) return; // 防止重复点击
      btn.className = "disbtn";
      btn2.className = ""; // 启用暂停按钮
      let steps = 0;
       // 函数每 50 毫秒执行一次回调函数。 共执行200次后自动停止
      intervalId = setInterval(() => {
        steps++;
        let randomNo = Math.floor(Math.random() * personArr.length);
        personElement.innerHTML = personArr[randomNo];

        if (steps >= 200) {
          clearInterval(intervalId);
          intervalId = null;
          btn.className = "";
          btn2.className = "disbtn"; // 禁用暂停按钮
        }
      }, 50);
    }

    function pauseRandomPerson() {
      if (!intervalId) return; // 如果没有在滚动，不执行任何操作
      clearInterval(intervalId);
      intervalId = null;
      btn.className = ""; // 启用随机选人按钮
      btn2.className = "disbtn"; // 禁用暂停按钮

      // 从数组中移除当前选中的人
      let selectedPerson = personElement.innerHTML;
      personArr = personArr.filter(person => person !== selectedPerson);
      console.log("选中的人: " + selectedPerson);
    }

    function reset() {
      clearInterval(intervalId);
      intervalId = null;
      personElement.innerHTML = ""; // 清除选中的人名
      personArr = [...originalPersonArr]; // 恢复原始数组
      btn.className = ""; // 启用随机选人按钮
      btn2.className = "disbtn"; // 禁用暂停按钮
    }

    btn.addEventListener('click', randomPerson);
    btn2.addEventListener('click', pauseRandomPerson);
    btn3.addEventListener('click', reset);
  </script>
</body>
</html>