第一篇使用HTML写一个随机点名网页

一、代码如下

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- 基础元信息 -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>随机点名案例</title>
  <style>
    /* 全局样式重置 */
    *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    /* 页面背景 */
    body {
      background-color: #ebf2ff;
    }
    
    /* 主容器样式 */
    .container {
      margin: 250px auto;  /* 垂直居中 */
      width: 500px;
      height: 300px;
      background-color: #fff;
      text-align: center;
      border-radius: 20px;
      box-shadow:5px 5px 5px rgb(180, 178, 178);  /* 添加阴影效果 */
    }
    
    /* 标题区域 */
    .h {
      margin-top: 20px;
    }
    h1 {
      font-family: 'Times New Roman', Times, serif;
    }
    
    /* 显示名字的区域 */
    .name  {
      margin: 50px 0;
      text-align: center;
    }
    .name .draw {
      font-family: 'Times New Roman', Times, serif;
      font-size: 40px;
      color: red;  /* 强调显示的名字 */
    }
    
    /* 按钮区域 */
    .btns {
      display: flex;
      margin: 50px auto;
      width: 400px;
      justify-content: space-around;  /* 按钮均匀分布 */
    }
    .btns button {
      border: none;
      border-radius: 10px;
      width: 80px;
      height: 40px;
      font-family: 'Times New Roman', Times, serif;
      font-size: 20px;
    }
    
    /* 开始按钮样式 */
    .btns .start {
      background-color: #90e2ae;  /* 绿色系 */
    }
    .btns .start:hover {
      background-color: #63e492;
      cursor: pointer;
    }
    
    /* 结束按钮样式 */
    .btns .end {
      background-color: #f7a1a1;  /* 红色系 */
    }
    .btns .end:hover {
      background-color: #f07777;
      cursor: pointer;
    }
    
    /* 重置按钮样式 */
    .btns .reset {
      background-color: #9dc0fa;  /* 蓝色系 */
    }
    .btns .reset:hover {
      background-color: #70a2f1;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <!-- 主容器 -->
  <div class="container">
    <!-- 标题区域 -->
    <div class="h">
      <h1>Draw names by random:</h1>
    </div>
    
    <!-- 显示随机名字的区域 -->
    <div class="name">
      <span class="draw">Here will show your name!</span>
    </div>
    
    <!-- 操作按钮区域 -->
    <div class="btns">
      <button class="start">Start</button>
      <button class="end">End</button>
      <button class="reset">Reset</button>
    </div>
  </div>
 
  <script>
    // 数据：存储待抽取的名单数组 
    let arr = ['张飞', '赵云', '狂铁', '关羽', '曹操']
    
    // 获取DOM元素 
    const draw = document.querySelector('.draw')       // 显示名字的元素 
    const start = document.querySelector('.start')     // 开始按钮 
    const end = document.querySelector('.end')         // 结束按钮 
    const reset = document.querySelector('.reset')     // 重置按钮 
    
    // 全局变量 
    let timeId = 0    // 用于存储计时器ID，便于清除 
    let random = 0     // 存储随机生成的数组索引 
    
    // 初始化按钮状态 
    start.disabled  = false  // 开始按钮可用 
    end.disabled  = true     // 结束按钮不可用 
    reset.disabled  = true   // 重置按钮不可用 
    
    // 开始抽取按钮事件监听 
    start.addEventListener('click',  ()=>{
      // 设置定时器，每80毫秒更新一次显示的名字 
      timeId = setInterval(() => {
        random = parseInt(Math.random()  * arr.length)   // 生成0到数组长度-1的随机整数 
        draw.innerHTML  = arr[random]                   // 显示随机名字 
      }, 80)
      
      // 更新按钮状态 
      start.disabled  = true 
      end.disabled  = false 
      reset.disabled  = true 
      
      // 检查是否只剩最后一个名字 
      if (arr.length  === 1){
        end.disabled  = true 
        reset.disabled  = false 
        alert('名单已抽取完！')
      }
    })
    
    // 停止抽取按钮事件监听 
    end.addEventListener('click',  ()=>{
      clearInterval(timeId)      // 清除定时器 
      end.disabled  = true        // 禁用结束按钮 
      start.disabled  = false    // 启用开始按钮 
      arr.splice(random,  1)     // 从数组中移除已被抽中的名字 
      console.log(arr);          // 调试用：打印剩余名单 
    })
    
    // 重置按钮事件监听 
    reset.addEventListener('click',  ()=>{
      arr = ['张飞', '赵云', '狂铁', '关羽', '曹操']  // 重置名单数组 
      clearInterval(timeId)                           // 清除可能存在的定时器 
      draw.innerHTML  = "Here will show your name!"    // 恢复默认显示文本 
      start.disabled  = false                          // 启用开始按钮 
      end.disabled  = true                             // 禁用结束按钮 
      reset.disabled  = true                           // 禁用重置按钮 
    })
  </script>
</body>
</html>

二、运行的结果

desktop 2025-10-24 17-11-53

三、说明

如果你想要换成你的名单，请更改下面代码中的数组。

javascript 复制代码

let arr = ['张飞', '赵云', '狂铁', '关羽', '曹操']