<!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>抽獎(jiǎng)</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;
        }
        /* 清浮動(dòng) */
        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="按鈕">開始抽獎(jiǎng)</button></p>

    </div>

</body>
<script>
    var btn = document.getElementsByTagName("button")[0];
    btn.className = "btn";
    // 通過標(biāo)簽名 獲取元素
    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);
        // 使用延時(shí)器 清除定時(shí)器
        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)
    }
    // 隨機(jī)顏色的函數(shù)
    function getColor() {
        return "#" + Math.random().toString(16).substr(2, 6);
    }

</script>
</html>

以上就是JavaScript實(shí)現(xiàn)九宮格抽獎(jiǎng)功能的示例代碼的詳細(xì)內(nèi)容，更多關(guān)于JavaScript九宮格抽獎(jiǎng)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: