js實(shí)現(xiàn)可鍵盤控制的簡(jiǎn)單抽獎(jiǎng)程序
本文實(shí)例為大家分享了js抽獎(jiǎng)程序的編寫代碼,以及編寫注意事項(xiàng),感興趣的小伙伴們可以參考一下
代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>簡(jiǎn)單抽獎(jiǎng)(可用鍵盤)</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','筆記本','相機(jī)','謝謝參與','充值卡','購(gòu)物券'],
timer=null,//定時(shí)器
flag=0;//阻止多次回車
window.onload=function(){
var play=document.getElementById('play'),
stop=document.getElementById('stop');
// 開始抽獎(jiǎng)
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">淘家趣抽獎(jiǎng)</div>
<div class="btm">
<a href="javascript:;" id="play">開始</a>
<a href="javascript:;" id="stop">停止</a>
</div>
</div>
</body>
</html>
注意點(diǎn):
1.隨機(jī)數(shù),取數(shù)組的其中一個(gè);取0-n之間:Math.random()*(n+1)
2.定時(shí)器,開始抽獎(jiǎng)時(shí)要停止前面的一次抽獎(jiǎng),不然會(huì)定時(shí)器重疊
3.按鍵操作,要判斷是抽獎(jiǎng)進(jìn)行中,還是未開始,所有設(shè)置了變量 flag
想要學(xué)習(xí)更多關(guān)于javascript抽獎(jiǎng)功能,請(qǐng)參考此專題:javascript實(shí)現(xiàn)抽獎(jiǎng)功能
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- js組件SlotMachine實(shí)現(xiàn)圖片切換效果制作抽獎(jiǎng)系統(tǒng)
- javascript HTML5 Canvas實(shí)現(xiàn)圓盤抽獎(jiǎng)功能
- 基于javascript實(shí)現(xiàn)簡(jiǎn)單的抽獎(jiǎng)系統(tǒng)
- javascript實(shí)現(xiàn)可鍵盤控制的抽獎(jiǎng)系統(tǒng)
- 基于JavaScript實(shí)現(xiàn)簡(jiǎn)單的隨機(jī)抽獎(jiǎng)小程序
- JS實(shí)現(xiàn)轉(zhuǎn)動(dòng)隨機(jī)數(shù)抽獎(jiǎng)特效代碼
- js實(shí)現(xiàn)簡(jiǎn)易的單數(shù)字隨機(jī)抽獎(jiǎng)(0-9)
- js和html5實(shí)現(xiàn)手機(jī)端刮刮卡抽獎(jiǎng)效果完美兼容android/IOS
- JS模擬抽獎(jiǎng)序效果實(shí)現(xiàn)代碼
- js抽獎(jiǎng)實(shí)現(xiàn)隨機(jī)抽獎(jiǎng)代碼效果
相關(guān)文章
深入淺析JSON.parse()、JSON.stringify()和eval()的作用詳解
這篇文章主要介紹了深入淺析JSON.parse()、JSON.stringify()和eval()的作用詳解的相關(guān)資料,需要的朋友可以參考下2016-04-04
淺談bootstrap源碼分析之scrollspy(滾動(dòng)偵聽(tīng))
下面小編就為大家?guī)?lái)一篇淺談bootstrap源碼分析之scrollspy(滾動(dòng)偵聽(tīng))。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
使用JS進(jìn)行目錄上傳(相當(dāng)于批量上傳)
腳本使用了WScript.Shell和Scripting.FileSystemObject的組件,所以必須要在IE下面和打開安全選項(xiàng)中運(yùn)行; 另外還用到了Jquery. 代碼只是客戶端代碼, 至于服務(wù)器的接收代碼網(wǎng)上好多了2010-12-12
如何動(dòng)態(tài)加載外部Javascript文件
這篇文章主要介紹了如何動(dòng)態(tài)加載外部Javascript文件,本文舉例講解使用js加載器動(dòng)態(tài)加載外部Javascript文件,感興趣的小伙伴們可以參考一下2015-12-12
JavaScript中rxjs與?Observable?兩大類操作符解析
這篇文章主要介紹了JavaScript中rxjs與?Observable?兩大類操作符解析,運(yùn)算符是對(duì)?Observable?進(jìn)行操作并返回?Observable?的函數(shù),文章圍繞主題展開詳細(xì)內(nèi)容,需要的小伙伴可以參考一下2022-07-07
window.location的重寫及判斷l(xiāng)ocation是否被重寫
這篇文章主要介紹了window.location的重寫及判斷l(xiāng)ocation是否被重寫,需要的朋友可以參考下2014-09-09
javascritp添加url參數(shù)將參數(shù)加入到url中
javascritp添加url參數(shù)方法,將參數(shù)加入到url中,如果原來(lái)url中有則覆蓋,下面是示例代碼,感興趣的朋友可以參考下2014-09-09

