<html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>抽奖</title>
<style>
*{margin:0padding:0}
#box{width:400pxheight:400pxborder:2px #C6C solidmargin:20px autobackground:#99F}
#box>div{position:absolutewidth:60pxheight:40pxcolor:#F03font-size:20pxborder:2px #F63 solidopacity:0.4line-height:40pxbackground:#F96}
#butt{position:absolutebackground:#F6Ccolor:#36Ffont-size:16pxmargin-top:200pxmargin-left:150px}
#span{width:300pxheight:40pxmargin-left:160pxdisplay:blockborder:2px #F63 solidfloat:leftline-height:40px}
#span i{font-style:normal}
</style>
</head>
<body>
<span id="span">离抽奖结束还有:<i></i><i></i><i></i><i></i></span>
<div id="box" class="box">
<div>一等奖</div>
<div style="margin-left:336px">二等奖</div>
<div style="margin-left:336pxmargin-top:356px">三等奖</div>
<div style="margin-top:356px">安慰奖</div>
<button id="butt" onclick="butt()">点击抽奖</button>
</div>
<script type="text/javascript">
var opa=document.getElementById("box").getElementsByTagName("div")
var ii=document.getElementById("span").getElementsByTagName("i")
for(var i=0i<opa.lengthi++){
opa[i].style.opacity=0.4
}
//var span=document.getElementById("span").style
var i=0,
t,tt,r,
count1=1,//限制一等奖只中一次,当一等奖抽完后顺延到二等奖
count2=3,//限制二等奖只中3次,当二等奖抽完后顺延到三等奖
count3=10,//限制等奖只中10次
prize=1,//抽奖是否结束
time=200,
curr=0//每次抽奖完成才能再次点击
var toDate = new Date(2016,7,29,19,55,0)
var dt,currDate
function obtain(){//倒计时
currDate=new Date()
dt=Math.ceil((toDate.getTime()-currDate.getTime())/1000)<!--转换成s-->
ii[0].innerHTML=parseInt(dt/(24*60*60))+'天'
ii[1].innerHTML=Math.floor(dt%(24*60*60)/(60*60))+'时'
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+'时'ii[2].innerHTML=0+'分'ii[3].innerHTML=0+'秒'
if(prize==0&&s==0){alert("抽奖已结束")clearInterval(tt)}
}
}
tt=setInterval(obtain,1000)
function butt(){
curr++
if(count1==0&&count2==0&&count3==0){
prize=0
}
if(curr==1&&prize==1){
if(i!=0){
opa[i].style.opacity=0.4
}
i=0
clearInterval(t)
r=parseInt(Math.random()*10000)+1//产生1-10000的随机数
//r=1
opa[i].style.opacity=1
t=setInterval(move,time)
}else if(curr!=1&&prize==1){alert("请等待本次抽奖完成再抽奖")alert("请点击确定继续")}
else if(prize==0){alert("抽奖已结束")}
}
/*function move(r){
switch(r){
case 1:
}
}*/
function move(){
opa[i].style.opacity=0.4
if(i<opa.length-1){
i++
}else{i=0}
opa[i].style.opacity=1
time+=50
console.log("r="+r+","+"time="+time)
if(r==1&&count1>0){//中一等奖
clearInterval(t)
t=setInterval(move,time)
if(time==800){
clearInterval(t)
time=200
count1--
curr=0
console.log("中一等奖的次数还有:"+count1+"次")
}
}else if((r%2999==0||r==1&&count1==0)&&count2>0){//中二等奖
clearInterval(t)
t=setInterval(move,time)
if(time==850){
count2--
clearInterval(t)
time=200
curr=0
console.log("中二等奖的次数还有:"+count2+"次")
}
}else if((r%1000==0||r%2999==0&&count2==0||r==1&&count1==0)&&count3>0){//中三等奖
clearInterval(t)
t=setInterval(move,time)
if(time==900){
time=200
count3--
clearInterval(t)
curr=0
console.log("中三等奖的次数还有:"+count3+"次")
}
}else{//安慰奖
clearInterval(t)
t=setInterval(move,time)
if(time==950){
clearInterval(t)
curr=0
time=200
}
}
}
</script>
</body>
</html>
下面代码调试通过，保证正确执行：
<html><head><title>抽奖</title></head><body><script language=javascript>
function do_click(){
var a=[],i,j,x,r=''
for (i=0i<31i++)a[i]=i+1
for (i=0i<6i++){
j=Math.floor(Math.random()*(30-i))
r=r+a[j]+'<br>'
x=a[j]a[j]=a[30]a[30]=x
}
document.getElementById('r').innerHTML=r
}
</script>
<input type=button onclick="javascript:do_click()" value='点击开始抽奖'>
<div id=r></div>
</body></html>
本文实例为大家分享了js抽奖程序的编写代码，以及编写注意事项，感兴趣的小伙伴们可以参考一下
代码：
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta
charset="UTF-8">
<title>简单抽奖（可用键盘）</title>
<style>
*{margin:0padding:0}
.box{width:
400pxheight:
300pxmargin:50px
autobackground:
red}
.title{color:
#ffffont-size:
30pxfont-weight:700pxpadding:
50px
0text-align:
centerheight:40px}
.btm{text-align:
centerpadding:20px
0}
.btm
a{display:
inline-blockwidth:
120pxheight:60pxline-height:
60pxbackground:
#FEF097margin:0
10pxtext-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实现抽奖功能
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）