JavaScript實現九宮格抽獎功能的示例代碼

Posted on by

效果圖

話不多說，直接上效果：

實現流程

主要流程為：

1. 根據效果圖，構建靜態頁面

2. 獲取元素(自帶的屬性)

3. 綁定事件

4. 事件觸發之後

4.1 所有的li元素 在指定的時間間隔下 顏色隨機變化

4.2 延時器 2秒後 清除定時器

4.3 在清除定時器之後,所有的li背景色復位,隨機選一個

主要代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>抽獎</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #box {
            width: 240px;
            margin: 30px auto;
            border: 1px solid #ccc;
        }

        ul li {
            width: 60px;
            height: 60px;
            line-height: 30px;
            text-align: center;
            margin: 10px;
            float: left;
            background-color: orange;
            color: white;
        }
        /* 清浮動 */
        ul:after {
            content: "";
            display: block;
            clear: both;
        }

        p {
            margin: 20px auto;
            text-align: center;
        }

        .btn {
            width: 100px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            border: none;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div id="box">
        <ul>
            <li>禮品1</li>
            <li>禮品2</li>
            <li>禮品3</li>
            <li>禮品4</li>
            <li>禮品5</li>
            <li>禮品6</li>
            <li>禮品7</li>
            <li>禮品8</li>
            <li>禮品9</li>
        </ul>
        <p><button onclick="alert(123)" title="按鈕">開始抽獎</button></p>

    </div>

</body>
<script>
    var btn = document.getElementsByTagName("button")[0];
    btn.className = "btn";
    // 通過標簽名 獲取元素
    var lis = document.getElementsByTagName("li"); 
    // 為元素綁定單擊事件
    btn.onclick = function () {
        // 禁用按鈕
        btn.disabled = true;
        var timer = setInterval(function () {
            for (var i = 0; i < lis.length; i++) {
                lis[i].style.backgroundColor = getColor();
            }
        }, 100);
        // 使用延時器 清除定時器
        setTimeout(function (){
            clearInterval(timer)
            for (var i = 0; i < lis.length; i++) {
                lis[i].style.backgroundColor = "orange"
            }
            var index = Math.floor( Math.random() * lis.length )
            lis[index].style.backgroundColor = "red";
            // 啟用按鈕
            btn.disabled = false;
            
        }, 2000)
    }
    // 隨機顏色的函數
    function getColor() {
        return "#" + Math.random().toString(16).substr(2, 6);
    }

</script>
</html>

以上就是JavaScript實現九宮格抽獎功能的示例代碼的詳細內容，更多關於JavaScript九宮格抽獎的資料請關註WalkonNet其它相關文章！

推薦閱讀：