【js實戰篇】點名抽獎系統-有解無憂

實作原理：

1.和紅綠燈的原理是一樣的，我沒有使用定位來寫，而是給每個div一個指向

2.用到了定時器

點擊開始按鈕開始抽獎，div依次變紅！下面是js代碼，需要的自取

<!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>
        * {
            padding: 0;
            margin: 0;
        }
        
        .table {
            display: flex;
            flex-wrap: wrap;
            width: 608px;
            margin: 100px auto;
            border: 1px solid red;
        }
        
        div {
            width: 200px;
            height: 200px;
            border: 1px solid #333;
            text-align: center;
            line-height: 200px;
            font-size: 24px;
        }
        
        #btn {
            background-color: #aaa;
            cursor: pointer;
            color: #fff;
        }
        
        .first {
            background-color: pink;
        }
    </style>
</head>

<body>
    <nav class="table">
        <div class="first">獎品一</div>
        <div>獎品二</div>
        <div>獎品三</div>
        <div>獎品八</div>
        <div id="btn"> 開始抽獎</div>
        <div>獎品四</div>
        <div>獎品七</div>
        <div>獎品六</div>
        <div>獎品五</div>

    </nav>

</body>
<script>
   
    var obj = {
        1: {
            obj: document.getElementsByTagName("div")[0],
            next: 2

        },
        2: {
            obj: document.getElementsByTagName("div")[1],
            next: 3
        },
        3: {
            obj: document.getElementsByTagName("div")[2],
            next: 4
        },
        4: {
            obj: document.getElementsByTagName("div")[5],
            next: 5
        },
        5: {
            obj: document.getElementsByTagName("div")[8],
            next: 6
        },
        6: {
            obj: document.getElementsByTagName("div")[7],
            next: 7
        },
        7: {
            obj: document.getElementsByTagName("div")[6],
            next: 8
        },
        8: {
            obj: document.getElementsByTagName("div")[3],
            next: 1
        },


    }
    var btn = document.getElementById("btn")
    console.log(btn);
    var time = null;
    var box = obj[1];
    var index = 2;
    var istoggle = true
    btn.onclick = function() {
        if (istoggle) {
         
            time = setInterval(prize, 90);


            function prize() {
                for (i in obj) {
                    obj[i]["obj"].style.backgroundColor = "#fff";
                    console.log(obj[i]["obj"])
                }
                obj[index]["obj"].style.backgroundColor = "pink";
                index = index > obj.length ? 0 : obj[index]["next"];
                console.log(obj[index]["next"]);

            }
            btn.style.backgroundColor = "red"
            istoggle = false;
        } else {
            clearInterval(time);
            btn.style.backgroundColor = "#aaa"
            istoggle = true;
        }


    }
</script>

</html>

圖一為默認頁面

圖二：點擊開始

也希望大佬們多多交流，多多留言，指出我的不足的之處啦！

有需要的小伙伴可以研究研究啦！！

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/413917.html

標籤：其他

上一篇：秒懂Js原型

下一篇：前端入門（水球特效）