一款原生js数字滚动抽奖代码,可以分别点击抽奖内容,然后点击开始在点击停止,即可显示抽奖成功的4位数字,重置按钮可恢复数据,喜欢的童鞋请收下吧。
页面的head部分,需要先设置好页面元素的样式,代码如下:
*{
width:1000px;
margin:30px auto 0;
}
#div1{
width:800px;
height:300px;
/*
background:green;
*/
float:left;
}
#div2{
width:100px;
height:600px;
/*
background:red;
*/
float:left;
}
#div2 ul{
list-style:none;
width:200px;
height:300px;
float:left;
/*
background:green;
*/
margin:100px 0 0 0;
}
#div2 ul li{
width:200px;
height:30px;
font-size:20px;
color:#FFF;
/*margin-left:-40px;
background:green;
*/
}
#div2 ul li input{
width:15px;
height:15px;
}
img{
width:100px;
height:100px;
margin:130px 0 0 70px;
}
#div3 input{
width:100px;
height:30px;
margin:0 0 0 105px;
}
然后设置好四个数字的抽奖规则,代码如下:
<script type="text/javascript">
//一等奖内定抽奖系统
window.onload=function(){
var oDiv=document.getElementById('div1');
var aImag=oDiv.getElementsByTagName('img');
var oInput=document.getElementsByTagName('input');
var timer1=null;
var timer2=null;
var timer3=null;
var timer4=null;
var num=0;
// 图片随随机数变化
function haha1(){
aImag[0].src='images/'+parseInt((Math.random()*10)%6)+'.png';
}
function haha2(){
aImag[1].src='images/'+parseInt((Math.random()*10))+'.png';
}
function haha3(){
aImag[2].src='images/'+parseInt((Math.random()*10))+'.png';
}
function haha4(){
aImag[3].src='images/'+parseInt((Math.random()*10))+'.png';
}
oInput[3].onclick=function(){
clearInterval(timer1);
clearInterval(timer2);
clearInterval(timer3);
clearInterval(timer4);
timer1=setInterval(haha1,50);
timer2=setInterval(haha2,50);
timer3=setInterval(haha3,50);
timer4=setInterval(haha4,50);
//return false;
}
oInput[4].onclick=function(){
num++;
if(num%4==1){
if(timer1!=null){
clearInterval(timer1);
if(oInput[0].checked){
aImag[0].src='images/1.png';//内定的第一位数
timer1=null;
}else{
timer1=null;
}
}else{
num=0;
}
}else if(num%4==2){
if(timer2!=null){
clearInterval(timer2);
if(oInput[0].checked){
aImag[1].src='images/3.png';//内定的第二位
timer2=null;
}else{
timer2=null;
}
}else{
num=0;
}
}else if(num%4==3){
if(timer3!=null){
clearInterval(timer3);
if(oInput[0].checked){
aImag[2].src='images/1.png';//内定的第三位
timer3=null;
}else{
timer3=null;
}
}else{
num=0;
}
}else{
if(timer4!=null){
clearInterval(timer4);
if(oInput[0].checked){
aImag[3].src='images/4.png';//内定的第四位
timer4=null;
}else{
timer4=null;
}
}else{
num=0;
}
num=0;
}
}
oInput[5].onclick=function(){
clearInterval(timer1);
clearInterval(timer2);
clearInterval(timer3);
clearInterval(timer4);
for(var i=0; i<aImag.length; i++){
aImag[i].src='images/0.png';
}
}
}
</script>
页面的body部分,几个奖项、控制开关等分别放入不同的容器里,代码如下:
<div id="div2">
<ul>
<li><input type="radio" name="v"> 一等奖</li>
<li><input type="radio" name="v"> 二等奖</li>
<li><input type="radio" name="v"> 三等奖</li>
</ul>
</div>
<div id="div1">
<img src="images/0.png"/>
<img src="images/0.png"/>
<img src="images/0.png"/>
<img src="images/0.png"/>
</div>
<div id="div3">
<input type="button" value="开始"/> <input type="button" value="停止"/> <input type="button" value="重置"/>
</div>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791