利用前端寫(xiě)一個(gè)隨機(jī)點(diǎn)名網(wǎng)頁(yè)完整代碼

更新時(shí)間：2025年11月25日 09:35:55 作者：Gee?Explorer

在前端開(kāi)發(fā)中,經(jīng)常需要處理各種隨機(jī)操作,其中之一是隨機(jī)點(diǎn)名,這篇文章主要介紹了利用前端寫(xiě)一個(gè)隨機(jī)點(diǎn)名網(wǎng)頁(yè)的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下

一、CSS的樣式

用于實(shí)現(xiàn)網(wǎng)頁(yè)的樣式。

    <style>
    /* 全局樣式重置 */
    *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    /* 頁(yè)面背景 */
    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);  /* 添加陰影效果 */
    }
    
    /* 標(biāo)題區(qū)域 */
    .h {
      margin-top: 20px;
    }
    h1 {
      font-family: 'Times New Roman', Times, serif;
    }
    
    /* 顯示名字的區(qū)域 */
    .name  {
      margin: 50px 0;
      text-align: center;
    }
    .name .draw {
      font-family: 'Times New Roman', Times, serif;
      font-size: 40px;
      color: red;  /* 強(qiáng)調(diào)顯示的名字 */
    }
    
    /* 按鈕區(qū)域 */
    .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;
    }
    
    /* 開(kāi)始按鈕樣式 */
    .btns .start {
      background-color: #90e2ae;  /* 綠色系 */
    }
    .btns .start:hover {
      background-color: #63e492;
      cursor: pointer;
    }
    
    /* 結(jié)束按鈕樣式 */
    .btns .end {
      background-color: #f7a1a1;  /* 紅色系 */
    }
    .btns .end:hover {
      background-color: #f07777;
      cursor: pointer;
    }
    
    /* 重置按鈕樣式 */
    .btns .reset {
      background-color: #9dc0fa;  /* 藍(lán)色系 */
    }
    .btns .reset:hover {
      background-color: #70a2f1;
      cursor: pointer;
    }
  </style>

二、JS的代碼

用于實(shí)現(xiàn)交互功能。

  <script>
    // 數(shù)據(jù)：存儲(chǔ)待抽取的名單數(shù)組 
    let arr = ['張飛', '趙云', '狂鐵', '關(guān)羽', '曹操']
    
    // 獲取DOM元素 
    const draw = document.querySelector('.draw')       // 顯示名字的元素 
    const start = document.querySelector('.start')     // 開(kāi)始按鈕 
    const end = document.querySelector('.end')         // 結(jié)束按鈕 
    const reset = document.querySelector('.reset')     // 重置按鈕 
    
    // 全局變量 
    let timeId = 0    // 用于存儲(chǔ)計(jì)時(shí)器ID，便于清除 
    let random = 0     // 存儲(chǔ)隨機(jī)生成的數(shù)組索引 
    
    // 初始化按鈕狀態(tài) 
    start.disabled  = false  // 開(kāi)始按鈕可用 
    end.disabled  = true     // 結(jié)束按鈕不可用 
    reset.disabled  = true   // 重置按鈕不可用 
    
    // 開(kāi)始抽取按鈕事件監(jiān)聽(tīng) 
    start.addEventListener('click',  ()=>{
      // 設(shè)置定時(shí)器，每80毫秒更新一次顯示的名字 
      timeId = setInterval(() => {
        random = parseInt(Math.random()  * arr.length)   // 生成0到數(shù)組長(zhǎng)度-1的隨機(jī)整數(shù) 
        draw.innerHTML  = arr[random]                   // 顯示隨機(jī)名字 
      }, 80)
      
      // 更新按鈕狀態(tài) 
      start.disabled  = true 
      end.disabled  = false 
      reset.disabled  = true 
      
      // 檢查是否只剩最后一個(gè)名字 
      if (arr.length  === 1){
        end.disabled  = true 
        reset.disabled  = false 
        alert('名單已抽取完！')
      }
    })
    
    // 停止抽取按鈕事件監(jiān)聽(tīng) 
    end.addEventListener('click',  ()=>{
      clearInterval(timeId)      // 清除定時(shí)器 
      end.disabled  = true        // 禁用結(jié)束按鈕 
      start.disabled  = false    // 啟用開(kāi)始按鈕 
      arr.splice(random,  1)     // 從數(shù)組中移除已被抽中的名字 
      console.log(arr);          // 調(diào)試用：打印剩余名單 
    })
    
    // 重置按鈕事件監(jiān)聽(tīng) 
    reset.addEventListener('click',  ()=>{
      arr = ['張飛', '趙云', '狂鐵', '關(guān)羽', '曹操']  // 重置名單數(shù)組 
      clearInterval(timeId)                           // 清除可能存在的定時(shí)器 
      draw.innerHTML  = "Here will show your name!"    // 恢復(fù)默認(rèn)顯示文本 
      start.disabled  = false                          // 啟用開(kāi)始按鈕 
      end.disabled  = true                             // 禁用結(jié)束按鈕 
      reset.disabled  = true                           // 禁用重置按鈕 
    })
  </script>

三、完整代碼

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- 基礎(chǔ)元信息 -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>隨機(jī)點(diǎn)名案例</title>
  <style>
    /* 全局樣式重置 */
    *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    /* 頁(yè)面背景 */
    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);  /* 添加陰影效果 */
    }
    
    /* 標(biāo)題區(qū)域 */
    .h {
      margin-top: 20px;
    }
    h1 {
      font-family: 'Times New Roman', Times, serif;
    }
    
    /* 顯示名字的區(qū)域 */
    .name  {
      margin: 50px 0;
      text-align: center;
    }
    .name .draw {
      font-family: 'Times New Roman', Times, serif;
      font-size: 40px;
      color: red;  /* 強(qiáng)調(diào)顯示的名字 */
    }
    
    /* 按鈕區(qū)域 */
    .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;
    }
    
    /* 開(kāi)始按鈕樣式 */
    .btns .start {
      background-color: #90e2ae;  /* 綠色系 */
    }
    .btns .start:hover {
      background-color: #63e492;
      cursor: pointer;
    }
    
    /* 結(jié)束按鈕樣式 */
    .btns .end {
      background-color: #f7a1a1;  /* 紅色系 */
    }
    .btns .end:hover {
      background-color: #f07777;
      cursor: pointer;
    }
    
    /* 重置按鈕樣式 */
    .btns .reset {
      background-color: #9dc0fa;  /* 藍(lán)色系 */
    }
    .btns .reset:hover {
      background-color: #70a2f1;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <!-- 主容器 -->
  <div class="container">
    <!-- 標(biāo)題區(qū)域 -->
    <div class="h">
      <h1>Draw names by random:</h1>
    </div>
    
    <!-- 顯示隨機(jī)名字的區(qū)域 -->
    <div class="name">
      <span class="draw">Here will show your name!</span>
    </div>
    
    <!-- 操作按鈕區(qū)域 -->
    <div class="btns">
      <button class="start">Start</button>
      <button class="end">End</button>
      <button class="reset">Reset</button>
    </div>
  </div>
 
  <script>
    // 數(shù)據(jù)：存儲(chǔ)待抽取的名單數(shù)組 
    let arr = ['張飛', '趙云', '狂鐵', '關(guān)羽', '曹操']
    
    // 獲取DOM元素 
    const draw = document.querySelector('.draw')       // 顯示名字的元素 
    const start = document.querySelector('.start')     // 開(kāi)始按鈕 
    const end = document.querySelector('.end')         // 結(jié)束按鈕 
    const reset = document.querySelector('.reset')     // 重置按鈕 
    
    // 全局變量 
    let timeId = 0    // 用于存儲(chǔ)計(jì)時(shí)器ID，便于清除 
    let random = 0     // 存儲(chǔ)隨機(jī)生成的數(shù)組索引 
    
    // 初始化按鈕狀態(tài) 
    start.disabled  = false  // 開(kāi)始按鈕可用 
    end.disabled  = true     // 結(jié)束按鈕不可用 
    reset.disabled  = true   // 重置按鈕不可用 
    
    // 開(kāi)始抽取按鈕事件監(jiān)聽(tīng) 
    start.addEventListener('click',  ()=>{
      // 設(shè)置定時(shí)器，每80毫秒更新一次顯示的名字 
      timeId = setInterval(() => {
        random = parseInt(Math.random()  * arr.length)   // 生成0到數(shù)組長(zhǎng)度-1的隨機(jī)整數(shù) 
        draw.innerHTML  = arr[random]                   // 顯示隨機(jī)名字 
      }, 80)
      
      // 更新按鈕狀態(tài) 
      start.disabled  = true 
      end.disabled  = false 
      reset.disabled  = true 
      
      // 檢查是否只剩最后一個(gè)名字 
      if (arr.length  === 1){
        end.disabled  = true 
        reset.disabled  = false 
        alert('名單已抽取完！')
      }
    })
    
    // 停止抽取按鈕事件監(jiān)聽(tīng) 
    end.addEventListener('click',  ()=>{
      clearInterval(timeId)      // 清除定時(shí)器 
      end.disabled  = true        // 禁用結(jié)束按鈕 
      start.disabled  = false    // 啟用開(kāi)始按鈕 
      arr.splice(random,  1)     // 從數(shù)組中移除已被抽中的名字 
      console.log(arr);          // 調(diào)試用：打印剩余名單 
    })
    
    // 重置按鈕事件監(jiān)聽(tīng) 
    reset.addEventListener('click',  ()=>{
      arr = ['張飛', '趙云', '狂鐵', '關(guān)羽', '曹操']  // 重置名單數(shù)組 
      clearInterval(timeId)                           // 清除可能存在的定時(shí)器 
      draw.innerHTML  = "Here will show your name!"    // 恢復(fù)默認(rèn)顯示文本 
      start.disabled  = false                          // 啟用開(kāi)始按鈕 
      end.disabled  = true                             // 禁用結(jié)束按鈕 
      reset.disabled  = true                           // 禁用重置按鈕 
    })
  </script>
</body>
</html>

四、運(yùn)行的結(jié)果

desktop 2025-10-24 17-11-53

五、其它說(shuō)明

如果你想要換成你的名單，請(qǐng)更改下面代碼中的數(shù)組。

let arr = ['張飛', '趙云', '狂鐵', '關(guān)羽', '曹操']

到此這篇關(guān)于利用前端寫(xiě)一個(gè)隨機(jī)點(diǎn)名網(wǎng)頁(yè)的文章就介紹到這了,更多相關(guān)前端隨機(jī)點(diǎn)名網(wǎng)頁(yè)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: