本篇內容介紹了“JS如何實現簡單的九宮格抽獎”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
結構
<body> <div id="fa"> <div class="option">1</div> <div class="option">5</div> <div class="option">3</div> <div class="option">4</div> <div id="start">開始抽獎</div> <div class="option">5</div> <div class="option">6</div> <div class="option">7</div> <div class="option">8</div> </div> </body>
樣式
<style>
#fa {
width: 600px;
height: 600px;
border: 1px solid red;
}
#fa>div {
width: 33%;
height: 33%;
border: 1px solid red;
float: left;
line-height: 200px;
text-align: center;//文本居中
font-size: 40px;
font-weight: 800;//加粗字體
}
#start {
cursor: pointer;//使鼠標移入時出現小手圖標
background-color: pink;
}
</style>JS實現抽獎
邏輯分析：
1.點擊中間的開始抽獎時觸發一個定時器
2.觸發定時器后，隨機生成一個數字，通過這個數字來獲取當前所在元素
3.設置一個時間來結束定時器，結束抽獎
<script>
let btn = document.getElementById('start');//獲取到開始抽獎按鈕
let options = document.getElementsByClassName('option');//獲取到8個獎區
let timer =null;//防止定時器多次觸發，初始值設為null
//為btn綁定一個單擊事件
btn.onclick = function () {
//設置一個初始值 作為時間判斷
let num = 0;
if (timer == null) {
//觸發一個定時器
timer = setInterval(function () {
num++;
//隨機產生一個0 - 7 的數字 通過該數字作為數組的下標來獲取到div
let ran = Math.round(Math.random() * (7 - 0) + 0);
//round是因為Math.random() * (7 - 0) + 0)取出的隨機數是含小數的一串數字，所以需要取整
//改變選中的元素背景顏色之前，將所有元素的背景顏色恢復
for (let i = 0; i < options.length; i++) {
options[i].style.backgroundColor = '';
}
//給選中的元素設置一個背景顏色
options[ran].style.backgroundColor = 'tomato';
//給定時器一個時間，到時間停止定時器
if(num == 5){
clearInterval(timer)
}
}, 1000)
}
}
</script>效果
“JS如何實現簡單的九宮格抽獎”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
