JS如何實(shí)現(xiàn)簡(jiǎn)單的九宮格抽獎(jiǎng)

發(fā)布時(shí)間：2022-06-29 09:40:42 來(lái)源：億速云閱讀：147 作者：iii 欄目：開(kāi)發(fā)技術(shù)

本篇內(nèi)容介紹了“JS如何實(shí)現(xiàn)簡(jiǎn)單的九宮格抽獎(jiǎng)”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

結(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">開(kāi)始抽獎(jiǎng)</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)移入時(shí)出現(xiàn)小手圖標(biāo)
            background-color: pink;
        }
</style>

JS實(shí)現(xiàn)抽獎(jiǎng)

邏輯分析：

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

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

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

                    num++;

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

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

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

                }, 1000)
            }

        }
</script>

效果

JS如何實(shí)現(xiàn)簡(jiǎn)單的九宮格抽獎(jiǎng)

“JS如何實(shí)現(xiàn)簡(jiǎn)單的九宮格抽獎(jiǎng)”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

向AI問(wèn)一下細(xì)節(jié)

JS如何實(shí)現(xiàn)簡(jiǎn)單的九宮格抽獎(jiǎng)

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽