本文實(shí)例為大家分享了js抽獎(jiǎng)程序的編寫代碼，以及編寫注意事項(xiàng)，感興趣的小伙伴們可以參考一下
“專業(yè)、務(wù)實(shí)、高效、創(chuàng)新、把客戶的事當(dāng)成自己的事”是我們每一個(gè)人一直以來堅(jiān)持追求的企業(yè)文化。 成都創(chuàng)新互聯(lián)是您可以信賴的網(wǎng)站建設(shè)服務(wù)商、專業(yè)的互聯(lián)網(wǎng)服務(wù)提供商! 專注于成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)、軟件開發(fā)、設(shè)計(jì)服務(wù)業(yè)務(wù)。我們始終堅(jiān)持以客戶需求為導(dǎo)向，結(jié)合用戶體驗(yàn)與視覺傳達(dá)，提供有針對(duì)性的項(xiàng)目解決方案，提供專業(yè)性的建議，創(chuàng)新互聯(lián)建站將不斷地超越自我，追逐市場，引領(lǐng)市場！
代碼：
!DOCTYPE
html
html
lang="en"
head
meta
charset="UTF-8"
title簡單抽獎(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ī)','謝謝參與','充值卡','購物券'],
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)功能
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
參考下面寫的小程序，是一個(gè)跑馬燈效果。
html
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
title抽獎(jiǎng)/title
style
*{margin:0;padding:0;}
#box{width:400px;height:400px;border:2px #C6C solid;margin:20px auto;background:#99F;}
#boxdiv{position:absolute;width:60px;height:40px;color:#F03;font-size:20px;border:2px #F63 solid;opacity:0.4;line-height:40px;background:#F96;}
#butt{position:absolute;background:#F6C;color:#36F;font-size:16px;margin-top:200px;margin-left:150px;}
#span{width:300px;height:40px;margin-left:160px;display:block;border:2px #F63 solid;float:left;line-height:40px;}
#span i{font-style:normal;}
/style
/head
body
span id="span"離抽獎(jiǎng)結(jié)束還有:i/ii/ii/ii/i/span
div id="box" class="box"
div一等獎(jiǎng)/div
div style="margin-left:336px"二等獎(jiǎng)/div
div style="margin-left:336px;margin-top:356px;"三等獎(jiǎng)/div
div style="margin-top:356px;"安慰獎(jiǎng)/div
button id="butt" onclick="butt()"點(diǎn)擊抽獎(jiǎng)/button
/div
script type="text/javascript"
var opa=document.getElementById("box").getElementsByTagName("div");
var ii=document.getElementById("span").getElementsByTagName("i");
for(var i=0;iopa.length;i++){
opa[i].style.opacity=0.4;
}
//var span=document.getElementById("span").style;
var i=0,
t,tt,r,
count1=1,//限制一等獎(jiǎng)只中一次,當(dāng)一等獎(jiǎng)抽完后順延到二等獎(jiǎng)
count2=3,//限制二等獎(jiǎng)只中3次,當(dāng)二等獎(jiǎng)抽完后順延到三等獎(jiǎng)
count3=10,//限制等獎(jiǎng)只中10次
prize=1,//抽獎(jiǎng)是否結(jié)束
time=200,
curr=0;//每次抽獎(jiǎng)完成才能再次點(diǎn)擊
var toDate = new Date(2016,7,29,19,55,0);
var dt,currDate;
function obtain(){//倒計(jì)時(shí)
currDate=new Date();
dt=Math.ceil((toDate.getTime()-currDate.getTime())/1000);!--轉(zhuǎn)換成s--
ii[0].innerHTML=parseInt(dt/(24*60*60))+'天';
ii[1].innerHTML=Math.floor(dt%(24*60*60)/(60*60))+'時(shí)';
ii[2].innerHTML=Math.floor(dt%(24*60*60)%(60*60)/60)+'分';
ii[3].innerHTML=Math.floor(dt%60)+'秒';
if(dt=0){
prize=0;
ii[0].innerHTML=0+'天';ii[1].innerHTML=0+'時(shí)';ii[2].innerHTML=0+'分';ii[3].innerHTML=0+'秒';
if(prize==0s==0){alert("抽獎(jiǎng)已結(jié)束");clearInterval(tt);}
}
}
tt=setInterval(obtain,1000);
function butt(){
curr++;
if(count1==0count2==0count3==0){
prize=0;
}
if(curr==1prize==1){
if(i!=0){
opa[i].style.opacity=0.4;
}
i=0;
clearInterval(t);
r=parseInt(Math.random()*10000)+1;//產(chǎn)生1-10000的隨機(jī)數(shù)
//r=1;
opa[i].style.opacity=1;
t=setInterval(move,time);
}else if(curr!=1prize==1){alert("請(qǐng)等待本次抽獎(jiǎng)完成再抽獎(jiǎng)");alert("請(qǐng)點(diǎn)擊確定繼續(xù)");}
else if(prize==0){alert("抽獎(jiǎng)已結(jié)束");}
}
/*function move(r){
switch(r){
case 1:
}
}*/
function move(){
opa[i].style.opacity=0.4;
if(iopa.length-1){
i++;
}else{i=0;}
opa[i].style.opacity=1;
time+=50;
console.log("r="+r+","+"time="+time);
if(r==1count10){//中一等獎(jiǎng)
clearInterval(t);
t=setInterval(move,time);
if(time==800){
clearInterval(t);
time=200;
count1--;
curr=0;
console.log("中一等獎(jiǎng)的次數(shù)還有:"+count1+"次");
}
}else if((r%2999==0||r==1count1==0)count20){//中二等獎(jiǎng)
clearInterval(t);
t=setInterval(move,time);
if(time==850){
count2--;
clearInterval(t);
time=200;
curr=0;
console.log("中二等獎(jiǎng)的次數(shù)還有:"+count2+"次");
}
}else if((r%1000==0||r%2999==0count2==0||r==1count1==0)count30){//中三等獎(jiǎng)
clearInterval(t);
t=setInterval(move,time);
if(time==900){
time=200;
count3--;
clearInterval(t);
curr=0;
console.log("中三等獎(jiǎng)的次數(shù)還有:"+count3+"次");
}
}else{//安慰獎(jiǎng)
clearInterval(t);
t=setInterval(move,time);
if(time==950){
clearInterval(t);
curr=0;
time=200;
}
}
}
/script
/body
/html
第一個(gè)問題: beginRndNum的參數(shù)傳遞的不是按鈕的id
這個(gè)問題其實(shí)是$()的參數(shù)問題,雖然題目中沒有明寫,這里的$應(yīng)該是jQuery對(duì)象, jquery獲取一個(gè)dom對(duì)應(yīng)的元素節(jié)點(diǎn)有很多種方法,最常見的是傳入dom的id,格式是$("#btm"),是一個(gè)字符串,字符串內(nèi)部是一系列特定格式的選擇符表示方法;另一種較常見的方式是直接傳遞dom對(duì)象,格式是var domObj = document.getElementById("btn");var jqueryObj = $(domObj),正好對(duì)應(yīng)到此例中的$(this)
所以$(trigger)就等效成了$(document.getElementById("btn")),同樣可以控制val()
第二個(gè)問題:
三個(gè)函數(shù)的作用:
updateRndNum只負(fù)責(zé)生成隨機(jī)數(shù)并更新頁面上隨機(jī)數(shù)的展示;
beat 負(fù)責(zé)觸發(fā)一次updateRndNum,并每隔一段時(shí)間(1ms)在調(diào)一下自身(這樣子就形成了一直循環(huán)的樣子) 這里其實(shí)有個(gè)誤區(qū),1ms的精度在瀏覽器中還達(dá)不到
beginTimer 只負(fù)責(zé)吧beat第一次調(diào)起來.
beginRndNum 則負(fù)責(zé)用戶的啟動(dòng)和停止兩個(gè)動(dòng)作,啟動(dòng)的時(shí)候觸發(fā)beginTimer,停止的時(shí)候關(guān)掉beat對(duì)應(yīng)的計(jì)時(shí)器中止以后的beat調(diào)用.
!DOCTYPE?html
html
head
titlejs隨機(jī)抽獎(jiǎng)一二三等獎(jiǎng)不重復(fù)的抽獎(jiǎng)邏輯怎么設(shè)置/title
meta?charset="UTF-8"?/
script
//添加一個(gè)隨機(jī)函數(shù)
Math.rand?=?function(min,?max){
function?subRand(min,?max){
min?=?min???min?:?0;
max?=?max???max?:?9;
var?result?=?0;
do{
result?=?Math.random().toString().substr(2,?1);
}while(!(result?=?min??result?=?max));
return?result;
}
function?getBit(maxBit){
maxBit?=?maxBit???maxBit?:?max.toString().length;
var?result?=?[],
count?=?0;
for(var?i?=?0;?i??maxBit;?i++){
result.push(subRand());
if(i?!=?0??result[i]?==?result[i?-?1]){
count++;
}
}
return?maxBit?-?count;
}
min?=?min???min?:?0;
max?=?max???max?:?0;
var?result?=?'',
bit?=?getBit();
do{
result?=?'';
for(var?i?=?0;?i??bit;?i++){
result?=?result?+?subRand();
}
result?=?parseInt(result);
}while(!(result?=?min??result?=?max));
return?result;
}
//console.log(Math.rand(0,?100));
//LuckDraw?抽獎(jiǎng)?lì)?參數(shù)一?獎(jiǎng)池?cái)?shù)組，?參數(shù)二?中獎(jiǎng)數(shù)量?返回?中獎(jiǎng)索引
function?LuckDraw(pool,?numberOfWinners){
var?results?=?[],
//是否已經(jīng)中獎(jiǎng)
isExists?=?function(index){
for(var?i?=?0;?i??results.length;?i++){
if(results[i]?==?index){
return?true;
}
}
return?false;
},
subLuckDraw?=?function(){
do{
result?=?Math.rand(0,?pool.length?-?1);
}while(isExists(result));
return?result;
}
for(var?i?=?0;?i??numberOfWinners;?i++){
results.push(subLuckDraw());
}
return?results;
}
var?pool?=?[
'關(guān)',
'張',
'趙',
'馬',
'黃',
'曹老板'
];
winners?=?LuckDraw(pool,?3);?//返回從獎(jiǎng)池中?中獎(jiǎng)的索引，假設(shè)123等獎(jiǎng)都只有一名的話各取一個(gè)即可
//假設(shè)123等獎(jiǎng)?一等獎(jiǎng)?1名，?二等獎(jiǎng)?2名，?三等獎(jiǎng)?3名，?只需要調(diào)用這個(gè)函數(shù)第二個(gè)參數(shù)設(shè)置為總和?6?即可
//然后從結(jié)果中第一個(gè)索引為一等獎(jiǎng)?23?索引為二等獎(jiǎng)?，?456索引為?三等獎(jiǎng)
console.log(winners);
/script
/head
body
script
for(var?i?=?0;?i??winners.length;?i++){
document.write(pool[winners[i]]?+?'?恭喜你中了'?+?(i?+?1)?+?'等獎(jiǎng)br?/');
}
/script
/body
/html
1~36個(gè)數(shù)取7個(gè)不同的，需要用while循環(huán)+隨機(jī)數(shù)去取出7個(gè)數(shù)。
在while循環(huán)里面，可以判斷取出來的數(shù)(用switch)，是否是28,18,8. 如果有輸出相應(yīng)的獎(jiǎng)項(xiàng)，如果沒有，就輸出其它的。然后將這7個(gè)數(shù)，打印出來就好了。
JavaScript（縮寫為JS）是一種高級(jí)的、多范式、解釋型的編程語言，是一門基于原型、函數(shù)先行的語言，它支持面向?qū)ο缶幊?、命令式編程以及函?shù)式編程。
它提供語法來操控文本、數(shù)組、日期以及正則表達(dá)式，不支持I/O（比如網(wǎng)絡(luò)、存儲(chǔ)和圖形等），但可以由它的宿主環(huán)境提供支持。它已經(jīng)由ECMA（歐洲計(jì)算機(jī)制造商協(xié)會(huì)）通過ECMAScript實(shí)現(xiàn)語言的標(biāo)準(zhǔn)化。它被世界上的絕大多數(shù)網(wǎng)站所使用，也被世界主流瀏覽器支持。
重慶分公司
重慶分公司
