html抽奖功能,js实现抽奖功能

本文实例为大家分享了js实现抽奖功能的具体代码，供大家参考，具体内容如下

html部分：

开始抽奖啦

开始

结束

css部分：

*{

margin: 0;

padding: 0;

}

.title{

width: 400px;

height:70px ;

/*水平居中*/

margin: 0 auto;

padding-top: 30px;

text-align: center;

font-size: 24px;

color:#F00;

}

.btns{

width: 190px;

height: 30px;

margin: 0 auto;

}

.btns span{

display: block;

float:left;

width:80px;

height:27px;

line-height:27px;

background:#036;

border:1px solid #eee;

border-radius:7px;

margin-right:10px;

color:#FFF;

text-align:center;

font-size:14px;

font-family:"微软雅黑";

cursor:pointer;

}

Js部分：

var data=['Phone5','Ipad','笔记本','相机','打印机','谢谢参与','50元券'];

var timer=null;

window.function(){

var play=document.getElementById('play');

var stop=document.getElementById('stop');

play.playFun;

stop.stopFun;

}

function playFun(){

var play=document.getElementById('play');

var title=document.getElementById('title');

clearInterval(timer);

timer=setInterval(function(){

var random=Math.floor(Math.random()*data.length);

title.innerHTML=data[random];

},50)

play.style.background='#eee';

}

function stopFun(){

var play=document.getElementById('play');

clearInterval(timer);

play.style.background='#036';

}

想要学习更多关于抽奖功能的实现，请参考此专题：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。