首页 > 网络编程 > JavaScript > javascript技巧 > 前端随机点名网页

利用前端写一个随机点名网页完整代码

2025-11-25 09:34:19 作者：Gee Explorer

在前端开发中,经常需要处理各种随机操作,其中之一是随机点名,这篇文章主要介绍了利用前端写一个随机点名网页的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下

一、CSS的样式

用于实现网页的样式。

    <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>

二、JS的代码

用于实现交互功能。

  <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>

三、完整代码

<!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

五、其它说明

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

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

到此这篇关于利用前端写一个随机点名网页的文章就介绍到这了,更多相关前端随机点名网页内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！