JavaScript實現抽獎器效果

Posted on by

本文實例為大傢分享瞭JavaScript實現抽獎器效果的具體代碼，供大傢參考，具體內容如下

這次實現的效果如下圖：

所實現的功能是：當每次點擊中間的抽獎按鈕時，會隨機選擇一個盒子作為抽獎的結果。

那我們要如何實現抽獎的功能呢？

其實很簡單，首先用html和css做出整體的框架，然後用js在中間按鈕的onclick函數中設置定時器+隨機改變某一盒子的背景顏色就可以瞭。 下面我們來討論一下細節的方面：

1、設計整體框架時，我們需要為每個盒子設置邊框，這時會發現邊框會出現重疊問題，導致邊框變厚，解決的方法是：設置margin-right和margin-bottom為負值（值等於邊框值）。

2、.在js中設置抽獎功能時，我們可以通過設置一個定時器A，在其中隨機改變某一盒子的background-color代表選中。為使抽獎可以在某一時刻暫停，我們可以設置定時器B，在某一時刻將定時器A關閉。

3、隨機改變是怎麼做到的呢？ 首先調用document.getElementsByTagName獲取所有盒子，然後利用Math.random()*盒子的數目，獲取某一盒子下標，改變其背景顏色。

很顯然定時器A是setInterval，定時器B是setTimeout。

而且在A中改變某一盒子背景顏色時，要將上一個被改變顏色的盒子還原為原來的顏色，我們需要記錄上次被改變背景顏色的盒子。

具體見下面代碼：

<!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>
        *{
            margin:0;
            padding: 0;
        }
        .container{
            width: 400px;
            height: 400px;
            margin:50px auto;
        }
        span,#main{
            display: block;
            width: 100px;
            height: 100px;
            border:2px pink solid;
            float:left;
            margin-left:-2px;
            margin-bottom:-2px;
            text-align: center;
            line-height: 100px;
            border-radius: 16px;
            box-shadow: 2px 2px 3px rgba(226, 86, 109, 0.459);
        }
        #main{
            background-color: rgba(243, 97, 126, 0.651);
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="container">
        <div>
            <span>可視化</span>
            <span>圖形學</span>
            <span>操作系統</span>
        </div>
        <div>
            <span>樂事</span>
            <div id="main">抽獎</div>
            <span>大白兔</span>
        </div>
        <div>
            <span>檸檬水</span>
            <span>黑咖啡</span>
            <span>芋泥奶茶</span>
        </div>
    </div>
    <script>
        let main=document.getElementById("main");
        let box=document.getElementsByTagName("span");
        var num=null;
        main.onclick=function(){
            let tem=setInterval(() => {
                if(num!==null){
                    box[num].style.backgroundColor="white";
                }
                num=parseInt(Math.random()*8);
                box[num].style.backgroundColor="rgba(243, 97, 126, 0.651)";
                console.log(num);
            }, 120);

            setTimeout(() => {
                clearInterval(tem)
            }, 3000);
        }
    </script>
</body>
</html>

以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。

推薦閱讀：