js實現可鍵盤控制的簡單抽獎程序
編輯：關於JavaScript
本文實例為大家分享了js抽獎程序的編寫代碼，以及編寫注意事項，感興趣的小伙伴們可以參考一下
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>簡單抽獎（可用鍵盤）</title>
<style>
*{margin:0;padding:0;}
.box{width: 400px;height: 300px;margin:50px auto;background: red}
.title{color: #fff;font-size: 30px;font-weight:700px;padding: 50px 0;text-align: center;height:40px;}
.btm{text-align: center;padding:20px 0;}
.btm a{display: inline-block;width: 120px;height:60px;line-height: 60px;background: #FEF097;margin:0 10px;text-decoration: none;}
</style>
<script>
var data=['Iphone','Ipad','筆記本','相機','謝謝參與','充值卡','購物券'],
timer=null,//定時器
flag=0;//阻止多次回車
window.onload=function(){
var play=document.getElementById('play'),
stop=document.getElementById('stop');
// 開始抽獎
play.onclick=playFun;
stop.onclick=stopFun;
// 鍵盤事件
document.onkeyup=function(event){
event = event || window.event;
// 回車鍵的code值：13
if(event.keyCode==13){
if(flag==0){
playFun();
flag=1;
}else{
stopFun();
flag=0;
}
}
}
function playFun(){
var title=document.getElementById('title');
var play=document.getElementById('play');
clearInterval(timer);
timer=setInterval(function(){
var random=Math.floor(Math.random()*data.length);
title.innerHTML=data[random];
},60);
play.style.background='#999';
}
function stopFun(){
clearInterval(timer);
var play=document.getElementById('play');
play.style.background='#FEF097';
}
}
</script>
</head>
<body>
<div class="box">
<div class="title" id="title">淘家趣抽獎</div>
<div class="btm">
<a href="javascript:;" id="play">開始</a>
<a href="javascript:;" id="stop">停止</a>
</div>
</div>
</body>
</html>
注意點：
1.隨機數，取數組的其中一個；取0-n之間：Math.random()*(n+1)
2.定時器，開始抽獎時要停止前面的一次抽獎，不然會定時器重疊
3.按鍵操作，要判斷是抽獎進行中，還是未開始，所有設置了變量 flag
想要學習更多關於javascript抽獎功能，請參考此專題：javascript實現抽獎功能
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。
小編推薦
熱門推薦