js实现抽奖

抽奖.html:

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<div id="title" class="title">开始抽奖啦</div>

</div>

</body>

</html>

index.js代码如下：

var data=['iPhone5','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;

console.log(event.keyCode);

if(event.keyCode==13)

{

if(flag==0){

playFun();

flag=1;

}

else {

stopFun();

flag = 0;

}

function playFun(){

//var that = this;

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

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

clearInterval(timer);

timer = setInterval(function(){

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

console.log(random);

title.innerHTML = data[random];

},50);

play.style.background ='#999';

}

function stopFun(){

clearInterval(timer);

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

play.style.background ='#036';

}

index.css代码如下：

{

margin:0;

padding:0;

}

.title {

width:400px;

height:70px;

margin:0 auto;

padding-top:30px;

text-align:center;

font-size:24px;

font-weight:bold;

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实现抽奖

最新文章

热门文章