JavaScript怎么實現(xiàn)簡單抽獎系統(tǒng)

這篇文章主要講解了“JavaScript怎么實現(xiàn)簡單抽獎系統(tǒng)”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“JavaScript怎么實現(xiàn)簡單抽獎系統(tǒng)”吧！

模擬實現(xiàn)抽獎系統(tǒng)

前端使用JavaScript代碼實現(xiàn)抽獎系統(tǒng)，代碼如下：

樣式代碼：

<style>
        body{
            background: url("bg.jpg") no-repeat;
            background-size: 100%;
        }
        #box{
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -250px 0 0 -250px;
            text-align: center;
            line-height: 100px;
            font-size: 40px;
            width: 500px;
            height: 300px;
            background: rgba(255,255,255,0.5);
            border-radius: 10px;
            box-shadow: 8px 8px 15px rgba(0,0,0,0.5);
        }

        #start{
            margin: 0;
            height: 50px;
            width: 120px;
            font-size: 30px;
            color: darkred;
            opacity: 0.6;
            box-shadow: 3px 3px 3px #f00;
        }
        #winner{
            border-radius: 5px;
            background: pink;
            margin-left: 100px;
            margin-right: 100px;
            opacity: 0.5;
        }
</style>

主體代碼

<div id="box">
        <p id="winner">&nbsp;</p>
        <button type="button" id="start">抽獎</button>
    </div>
    <script>
        var names = ["杰克馬","麻花藤","giao哥","藥醬","鍋子","鵪鶉","大司馬"];

        function extrust(){
            var index = parseInt(Math.random()*names.length);
                names.splice(index,1);//從參與人中刪除中獎人
                document.getElementById('winner').innerText = names[index];
        }

        let start = false;
        var flag;//定時任務(wù)標(biāo)記
        document.getElementById("start").addEventListener('click',function () {
            if(names.length == 0){
                document.getElementById('winner').innerText ="抽獎結(jié)束";
                return;
            }
            if(start) {
                //清除指定標(biāo)記的定時任務(wù)
                clearInterval(flag);
                extrust();
            }else{
                flag =setInterval(function () {
                    document.getElementById('winner').innerText = names[parseInt(Math.random()*names.length)];
                },20)
            }
            //狀態(tài)取反
            start = !start;
        })


</script>
</body>

頁面顯示：

感謝各位的閱讀，以上就是“JavaScript怎么實現(xiàn)簡單抽獎系統(tǒng)”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對JavaScript怎么實現(xiàn)簡單抽獎系統(tǒng)這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！