代碼如下:(兼容Firefox和ie)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.wrapper{width:600px;margin:0 auto;text-align: center;}
.start {padding: 30px; font:36px '微軟雅黑';color:#f00;}
.btns span{display: inline-block;width: 220px;height: 30px;line-height: 30px;background-color: #e6e6e6;cursor: pointer;margin:0 10px;}
</style>
</head>
<body>
<div class="wrapper">
<!-- 開始抽獎 -->
<div class="start" id="name">禮品隨機挑選!</div>
<!-- 開始結束按鈕 -->
<div class="btns">
<span id="start">開始</span>
<span id="end">結束</span>
</div>
</div>
<script type="text/javascript">
var giftlist=['iphone7','mackbook','馬爾代夫三日遊','美迪拉克','bmw','自行車'],
timer=null,
flag=0;
var name=document.getElementById('name'),
startplay=document.getElementById('start'),
endplay=document.getElementById('end');
window.οnlοad=function(){
// 開始事件
startplay.οnclick=playfun;
// 停止結束事件
endplay.οnclick=stopfun;
// 鍵盤事件
document.οnkeyup=function(event){
event=event||window.event;
if(event.keyCode==13){
if(flag==0){
playfun();
flag=1;
}
else{
stopfun();
flag=0;
}
}
}
}
function playfun(){
var name=document.getElementById('name'),
startplay=document.getElementById('start');
clearInterval(timer);
timer=setInterval(function(){
var ran=Math.floor(Math.random()*giftlist.length);
// console.log(giftlist[ran]);
name.innerHTML=giftlist[ran];
},50)
startplay.style.backgroundColor='#f00';
}
function stopfun(){
clearInterval(timer);
startplay.style.backgroundColor='#e6e6e6';
}
</script>
</body>
</html>
簡單抽獎活動js代碼
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.