标签:
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 width:200px; 17 margin: 0 auto; 18 } 19 button{ 20 width: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 var info = document.getElementById(‘info‘), 50 start= document.getElementById(‘start‘), 51 stop = document.getElementById(‘stop‘), 52 arr = [‘笔记本‘,‘佳能相机‘,‘3000元现金‘,‘惠普笔记本‘,‘3000元‘,‘ipone5‘], 53 time = null; 54 function move(){ 55 var l = arr.length; 56 var random = Math.floor(Math.random()*l); 57 info.innerHTML = arr[random]; 58 } 59 start.onclick = function(){ 60 clearInterval(time); 61 //不能定义var。 62 time = setInterval(move,200); 63 start.classList.add(‘Over‘); 64 } 65 stop.onclick = function(){ 66 clearInterval(time); 67 start.classList.remove(‘Over‘); 68 alert(info.innerHTML); 69 } 70 </script> 71 </body> 72 </html>
标签:
原文地址:http://www.cnblogs.com/qianduanjingying/p/5080602.html