<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style type="text/css"> *{ margin:0; padding:0} .title{ width:200px; height:50px; color:#F90307; font-size:30px; margin:0 auto; padding-top:10px} .btns{ width:150px; height:50px; margin:0 auto} .btns span{width:40px; height:25px; line-height:25px; background:blue; border:1px #04052E solid; border-radius:5px; color:#fff; text-align:center; font-size:14px; display:block; float:left; cursor:pointer;margin-right:10px} </style> <script type="text/javascript"> var data = ['谢谢参与','苹果笔记本','佳能相机','惠普打印机','智能手机','50元充值卡','1000元购物券','再抽一次']; var timer = null; var flag = 0; window.onload = function(){ var play = document.getElementById('play'); var stop = document.getElementById('stop'); play.onclick = playFun; //开始抽奖 stop.onclick = stopFun; //停止抽奖 document.onkeyup = function(event){ //键盘事件 var event = event || window.event; if(event.keyCode == 13){ playFun(); flag = 1; }else{ stopFun(); flag = 0; } } } function playFun(){ var that = this; //函数从哪调用的,this就是谁 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]; },50); play.style.background = '#999'; } function stopFun(){ clearInterval(timer); var play = document.getElementById('play'); play.style.background = 'blue'; } </script> </head> <body> <div id="title" class="title">开始抽奖了!</div> <div class="btns"> <span id="play">开始</span> <span id="stop">停止</span> </div> </body> </html>
相关分类