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

更新時間：2022年03月09日 11:16:02 作者：PengZhen_

這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)簡單抽獎系統(tǒng)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JavaScript實現(xiàn)簡單抽獎系統(tǒng)的具體代碼，供大家參考，具體內(nèi)容如下

模擬實現(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ù)標記
? ? ? ? document.getElementById("start").addEventListener('click',function () {
? ? ? ? ? ? if(names.length == 0){
? ? ? ? ? ? ? ? document.getElementById('winner').innerText ="抽獎結(jié)束";
? ? ? ? ? ? ? ? return;
? ? ? ? ? ? }
? ? ? ? ? ? if(start) {
? ? ? ? ? ? ? ? //清除指定標記的定時任務(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>

頁面顯示：