原生JavaScript實現九宮格抽獎

2022-06-28 18:03:37
本文範例為大家分享了JavaScript實現九宮格抽獎的具體程式碼，供大家參考，具體內容如下
思路：通過移動背景顏色實現中獎資訊，每一個方形元素，需要按順序排列，加個延時器，當到最後一個的時候讓它從0開始就可以動起來了，！！
<!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>Document</title>
    <style>
        #box {
            width: 600px;
            height: 600px;
            margin: 0 auto;
            position: relative;
        }

        #box div {
            width: 198px;
            height: 198px;
            border-radius: 10px;
            /* border: 1px solid red; */
            text-align: center;
            line-height: 198px;
            background-color: #ffe8e8;
            position: absolute;
        }

        .btns {
            text-align: center;
        }

        .active {
            background-color: rgb(255, 94, 0) !important;
        }
        #start,#end{
            width: 100px;
            height: 30px;
            background-color: rgb(24, 105, 255);
            color: white;
        }
    </style>
</head>

<body>
    <div id="box"></div>
    <br>
    <div class="btns">
        <button id="start">開始</button>
        <button id="end">停止</button>
    </div>

    <script>
        var box = document.getElementById('box');
        var start = document.getElementById('start');
        var end = document.getElementById('end');
        // 所有獎品
        var allList = ['宇宙戰將', '白起', '太陽系級宇宙戰艦', '小破木船', '地球級宇宙戰將', '月球級蘸醬', '太陽級蘸醬', '大西洋級蘸醬'];
        // 允許抽中的獎品
        var list = ['太陽系級宇宙戰艦','白起']; // 想要中的獎品放進去

        for (let i = 0; i < allList.length; i++) {
            box.innerHTML += `<div>${allList[i]}</div>`;
        }

        box.children[1].style.left = '200px';
        box.children[2].style.left = '400px';
        box.children[3].style.left = '400px';
        box.children[3].style.top  = '200px';
        box.children[4].style.left = '400px';
        box.children[4].style.top  = '400px';
        box.children[5].style.top  = '400px';
        box.children[5].style.left = '200px';
        box.children[6].style.top  = '400px';
        box.children[7].style.top  = '200px';

        var running = false;
        var flag = true;
        var active = 0;
        var time = 200;
        var goods = '';
        box.children[active].className = 'active';

        start.onclick = function () {
            if (!running) {  // 只有當沒有在抽獎中的時候，才讓點選開始
                running = true;  // 重置
                time = 200;  // 重置
                f1();
            }
        }
  
        end.onclick = function () {
            if (running) { // 只有當正在抽獎中的時候才讓點選停止
                flag = false;
                goods = list[Math.floor(Math.random() * list.length)];  // 0, 1, 2隨機的一個值
            }
        }

        // 如果使用定時器，time會鎖死不會改變；通過延時器模擬定時器的方法，是可以改變定時的時間
        function f1() {
            box.children[active].className = '';
            active++;
            if (active > 7){  // 因為是從0開始計算所以寫7
                active = 0;
            }
            box.children[active].className = 'active';
            if (flag) { // 抽獎速度越來越快
                time -= 10;
                if (time < 50) {
                    time = 50;
                }
            } else { // 抽獎速度越來越慢
                time += 10;
                if (time > 300) {
                    time = 300;

                    // 判斷當前捲動到的獎品是否是內定的獎品
                    if (box.children[active].textContent === goods ) {
                        flag = true;
                        running = false;
                         setTimeout(() => {
                             alert(goods); // 彈出抽獎資訊
                         }, 500);
                        return;  // 抽中獎品後，停止抽獎

                    }
               
                }
            }
            setTimeout(f1,time);
        }
    </script>
</body>

</html>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援it145.com。
原生JavaScript實現九宮格抽獎

熱門文章
