1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>抽象系统</title> 6 <style type="text/css"> 7 div{ 8 margin:20px auto; 9 font-size: 20px; 10 color:#f00; 11 font-weight: bold; 12 font-family: "微软雅黑"; 13 text-align: center; 14 } 15 .btnwrap{ 16 200px; 17 margin: 0 auto; 18 } 19 button{ 20 80px; 21 height:35px; 22 font-size: 16px; 23 border:1px solid #fff; 24 border-radius:8px; 25 background-color: #3983de; 26 color:#fff; 27 margin:0 10px; 28 float:left; 29 outline: none; 30 } 31 .Over{ 32 background-color: #888; 33 } 34 </style> 35 </head> 36 <body> 37 <div id="info">开始抽奖</div> 38 <div class="btnwrap"> 39 <button id="start">开 始</button> 40 <button id="stop">停 止</button> 41 </div> 42 <script type="text/javascript"> 43 /** 44 * 思路：1、首先定义变量。 45 * 2、定义一个数组，存放抽奖数据 46 * 3、定义一个函数。 47 * @type {[type]} 48 */ 49 (function(d){ 50 var info = d.getElementById('info'), 51 start= d.getElementById('start'), 52 stop = d.getElementById('stop'), 53 arr = ['笔记本','佳能相机','3000元现金','惠普笔记本','3000元','ipone5'], 54 time = null; 55 function move(){ 56 var l = arr.length; 57 var random = Math.floor(Math.random()*l); 58 info.innerHTML = arr[random]; 59 } 60 start.onclick = function(){ 61 clearInterval(time); 62 //不能定义var。 63 time = setInterval(move,100); 64 start.classList.add('Over'); 65 } 66 stop.onclick = function(){ 67 clearInterval(time); 68 start.classList.remove('Over'); 69 alert(info.innerHTML); 70 } 71 })(document) 72 </script> 73 </body> 74 </html>