JavaScript實現簡單抽獎系統
本文實例為大傢分享瞭JavaScript實現簡單抽獎系統的具體代碼，供大傢參考，具體內容如下
模擬實現抽獎系統
前端使用JavaScript代碼實現抽獎系統，代碼如下：
樣式代碼：
<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"> </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;//定時任務標記
document.getElementById("start").addEventListener('click',function () {
if(names.length == 0){
document.getElementById('winner').innerText ="抽獎結束";
return;
}
if(start) {
//清除指定標記的定時任務
clearInterval(flag);
extrust();
}else{
flag =setInterval(function () {
document.getElementById('winner').innerText = names[parseInt(Math.random()*names.length)];
},20)
}
//狀態取反
start = !start;
})
</script>
</body>
頁面顯示：
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。