快捷導(dǎo)航

JS實現(xiàn)簡單的九宮格抽獎

更新時間：2022年06月28日 16:43:18 作者：千北kk

這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)簡單的九宮格抽獎，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JS實現(xiàn)簡單九宮格抽獎的具體代碼，供大家參考，具體內(nèi)容如下

結(jié)構(gòu)

<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;//使鼠標(biāo)移入時出現(xiàn)小手圖標(biāo)
? ? ? ? ? ? background-color: pink;
? ? ? ? }
</style>

JS實現(xiàn)抽獎

邏輯分析：

1.點擊中間的開始抽獎時觸發(fā)一個定時器
2.觸發(fā)定時器后，隨機生成一個數(shù)字，通過這個數(shù)字來獲取當(dāng)前所在元素
3.設(shè)置一個時間來結(jié)束定時器，結(jié)束抽獎

<script>
? ? ??? ?let btn = document.getElementById('start');//獲取到開始抽獎按鈕
? ? ? ? let options = document.getElementsByClassName('option');//獲取到8個獎區(qū)
? ? ? ? let timer =null;//防止定時器多次觸發(fā)，初始值設(shè)為null

?? ??? ?//為btn綁定一個單擊事件
? ? ? ? btn.onclick = function () {
? ? ? ? ? ? //設(shè)置一個初始值 作為時間判斷
? ? ? ? ? ? let num = 0;
? ? ? ? ? ??
? ? ? ? ? ? if (timer == null) {
? ? ? ? ? ? ? ? //觸發(fā)一個定時器
? ? ? ? ? ? ? ?timer = setInterval(function () {

? ? ? ? ? ? ? ? ? ? num++;

??? ??? ??? ??? ??? ?//隨機產(chǎn)生一個0 - 7 的數(shù)字 通過該數(shù)字作為數(shù)組的下標(biāo)來獲取到div
? ? ? ? ? ? ? ? ? ? let ran = Math.round(Math.random() * (7 - 0) + 0);
? ? ? ? ? ? ? ? ? ? //round是因為Math.random() * (7 - 0) + 0)取出的隨機數(shù)是含小數(shù)的一串?dāng)?shù)字，所以需要取整
? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? //改變選中的元素背景顏色之前，將所有元素的背景顏色恢復(fù)
? ? ? ? ? ? ? ? ? ? for (let i = 0; i < options.length; i++) {
? ? ? ? ? ? ? ? ? ? ? ? options[i].style.backgroundColor = '';
? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? ? //給選中的元素設(shè)置一個背景顏色
? ? ? ? ? ? ? ? ? ? options[ran].style.backgroundColor = 'tomato';

? ? ? ? ? ? ? ? ? ? //給定時器一個時間，到時間停止定時器
? ? ? ? ? ? ? ? ? ? if(num == 5){
? ? ? ? ? ? ? ? ? ? ? ? clearInterval(timer)
? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? }, 1000)
? ? ? ? ? ? }

? ? ? ? }
</script>

效果