我愛擼碼，擼碼使我感到快樂。
大家好，我是Counter。
本章帶大家來簡單的了解下原生JS實現轉盤抽獎。
因為主要涉及到JS，在這里HTML和CSS起到的功能就沒有那么重要，
因此，沒有過多的闡述HTML與CSS，而JS基本每行都有注釋，但這里CSS
也是起到了至關重要的一步，那就是控制背景色，以及結果的顯示與隱藏，效果先給出，如下:
代碼給出:
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>turntable</title> /*<link rel="stylesheet" href="css/index.css">*/ <!-- css --> <style> body, table, tr, td { margin: 0; padding: 0; } .wrapper { position: relative; width: 300px; height: 300px; margin: 100px auto 0; text-align: center; } table { display: inline-block; } td, th { width: 100px; height: 100px; border: 1px solid #ccc; border-radius: 20px; } th { cursor: pointer; user-select: none; } /* 設置標識樣式 */ tr .active { background-color: #ff6700; } /* 設置中獎結果 */ .results { display: none; position: absolute; top: 0; left: 50px; width: 200px; height: 100px; border: 1px solid black; border-radius: 30px; text-align: center; line-height: 100px; background-color: skyblue; } </style> </head> <body> <div class="wrapper"> <table> <tr> <td class="active">今</td> <td>天</td> <td>吃</td> </tr> <tr> <td>什</td> <th id="play">開始</th> <td>么</td> </tr> <tr> <td>來</td> <td>抽</td> <td>下</td> </tr> </table> <div class="results">今天吃火鍋</div> </div> <!-- <script src="js/index.js"></script> --> <!-- js --> <script> // 獲取開始元素 var playBtn = document.getElementById('play'); // 獲取所有td元素，獲取到偽數組 var tdAry = document.getElementsByTagName('td'); // 將偽數組的長度存儲在tdLen變量中 var tdLen = tdAry.length; // 設置計時器變量，剛開始為空 var startTime = null; // 自己構造數組，使橘紅色背景能夠按照自己想要的方向進行循環移動 var tdList = [0, 1, 2, 4, 7, 6, 5, 3]; // 設置橘紅色背景標識 var tdId = 0; // 設置已經奔跑的次數，剛開始為0次 var time = 0; // 固定跑3圈，一圈8次 var fixNum = 24 // 定義最大隨機數 var MaxNum; // 定義隨機數，開始和結束的閾值 var randomNum; // 獲取中獎結果元素 var results = document.getElementsByClassName('results')[0]; // 綁定點擊事件，當鼠標點擊開始按鈕后，觸發playStart函數 playBtn.onclick = playStart; function playStart() { // 如果計時器不為空，那就意味着這個線程已經在跑了，就直接退出。 if (startTime != null) { return; } results.style.display = 'none'; // 奔跑的次數 time = 0; // 最大隨機數，取值[0, 8]，確保每個都能被選到 MaxNum = parseInt(Math.random() * 9) + fixNum; // 隨機閾值，控制剛開始跑幾步加速，以及剩幾步減速，取值范圍[3, 7] randomNum = parseInt(Math.random() * 5 + 3); // 開啟計時器，每200毫秒執行一次move函數 startTime = setInterval(move,200); } function move() { // 每執行一次奔跑次數time就加1 time++; // 每次運行當前的背景色清空 tdAry[tdList[tdId]].className = ""; // 每執行一次背景色標識就加1 tdId++; // 判斷如果標識大於7的話就標識tdId就等於0，否則的話就等於它本身，這個步驟如果沒有進行判斷和賦值的話，tdId就會一直自增下去，那么對應的td元素將沒有，后台就會報錯 tdId = tdId > 7 ? 0 : tdId; // 設置當前的td背景色 tdAry[tdList[tdId]].className = "active"; //如果奔跑的次數等於隨機閾值的話，那么當前的計時器清空，重新開啟一個新的計時器，並且是每20毫秒執行一次，這個步驟是控制加速的 if (time == randomNum) { clearInterval(startTime); startTime = setInterval(move,20); } // 如果奔跑的次數加上隨機的閾值的話，那么就將當前的加速的計時器清空，並且重新開啟一個每200毫秒的計時器，這個步驟是控制減速的 if (time + randomNum >= MaxNum) { clearInterval(startTime); startTime = setInterval(move,200); } // 如果奔跑的次數大於等於最大的奔跑次數，那么清空當前計時器，並且計時器等於null，直接返回出去，一次抽獎結束。這個步驟是控制抽獎結束。 if (time >= MaxNum) { clearInterval(startTime); startTime = null; // switch語句判斷抽獎結果，這部分比較簡單，就不贅述了。 switch(tdList[tdId]) { case 0: results.innerText = '今天吃轉轉樂'; results.style.display = 'block'; break; case 1: results.innerText = '今天吃蜀九香'; results.style.display = 'block'; break; case 2: results.innerText = '今天吃KFC'; results.style.display = 'block'; break; case 4: results.innerText = '今天吃海底撈'; results.style.display = 'block'; break; case 7: results.innerText = '今天吃外賣'; results.style.display = 'block'; break; case 6: results.innerText = '今天吃土'; results.style.display = 'block'; break; case 5: results.innerText = '今天吃牛排'; results.style.display = 'block'; break; case 3: results.innerText = '今天吃草本湯'; results.style.display = 'block'; break; } return; } } </script> </body> </html>