91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

JS如何實現簡單的九宮格抽獎

發布時間:2022-06-29 09:40:42 來源:億速云 閱讀:157 作者:iii 欄目:開發技術

本篇內容介紹了“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如何實現簡單的九宮格抽獎

“JS如何實現簡單的九宮格抽獎”的內容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站,小編將為大家輸出更多高質量的實用文章!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

js
AI

宁津县| 申扎县| 临漳县| 通山县| 信宜市| 固原市| 武汉市| 淳安县| 长汀县| 沽源县| 海原县| 获嘉县| 温州市| 太保市| 五指山市| 红河县| 京山县| 天长市| 博野县| 黄石市| 基隆市| 临安市| 若尔盖县| 涿州市| 紫云| 平陆县| 五常市| 洪江市| 江永县| 凤山县| 昌邑市| 阳朔县| 柘荣县| 柳林县| 和顺县| 鲁甸县| 奉节县| 浦东新区| 宿迁市| 衡水市| 南川市|