摘要:学习js基础逻辑，简单实现一下，在最后作弊一下，不管几号都是谢谢参与。想做的完善一些，可以利用数组把数字换为人名，做一些修饰美化一下。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>抽奖小程序</title> 6 <style type="text/css"> 7 h1{ 8 color: red; 9 text-align: center; 10 } 11 div{ 12 width: 510px; 13 height: 208px; 14 15 border: 1px solid orange; 16 17 margin-left: auto; 18 margin-right: auto; 19 20 font-size: 0px; 21 } 22 span{ 23 /*转换为行级块元素 sapn是行级元素*/ 24 display: inline-block; 25 width: 100px; 26 height: 50px; 27 /*dashed 虚线*/ 28 border: 1px dashed orange; 29 30 font-size: 16px; 31 text-align: center; 32 line-height: 50px; 33 } 34 35 button{ 36 /*button是行级块元素 转换为块级元素*/ 37 display: block; 38 width: 100px; 39 height: 40px; 40 41 margin-top: 60px; 42 margin-left: auto; 43 margin-right: auto; 44 background-color: green; 45 } 46 </style> 47 </head> 48 <body> 49 <h1>抽奖行动正在进行！</h1> 50 51 <div id=all> 52 </div> 53 <!-- 设置一个点击函数 startOrStop() --> 54 <button onclick="startOrStop()" id=btn>开始</button> 55 56 <script type="text/javascript"> 57 <!-- 通过ID获取 div标签和button标签 --> 58 var all = document.getElementById("all"); 59 var btn = document.getElementById("btn"); 60 61 for(var i=1;i<21;i++){ 62 <!-- 生成<span></span> --> 63 var span = document.createElement("span"); 64 <!-- 生成<span></span>的输出值 --> 65 span.innerHTML = i; 66 <!-- 将span添加到div块中 --> 67 all.appendChild(span); 68 } 69 <!-- 记录执行函数 --> 70 var myInterval; 71 <!-- 记录是否开始 --> 72 var isStart = false; 73 <!-- 记录生成的随机数 --> 74 var randomNum = 0; 75 function startOrStop(){ 76 <!-- 执行一次,生成一个随机数,并且修改对应span的背景颜色 --> 77 function start(){ 78 <!-- 获取div中的所有标签数 --> 79 var num = all.children.length; 80 <!-- 每次执行函数时,先还原div中元素的背景颜色 --> 81 for(var i=0;i<num;i++){ 82 <!-- transparent 透明 --> 83 all.children[i].style.backgroundColor = "transparent"; 84 } 85 <!-- Math.floor(num)对num向下取整,Math.random()生成0~1的随机小数 --> 86 randomNum = Math.floor(Math.random() * num); 87 <!-- alert(randomNum); --> 88 <!-- 对随机数对应的span修改背景颜色 --> 89 all.children[randomNum].style.backgroundColor = "red"; 90 } 91 if(isStart == false){ 92 <!-- 每100毫秒执行一次start()函数,保存给myInterval --> 93 myInterval = setInterval(start,100); 94 btn.style.backgroundColor = "red"; 95 <!-- 修改按钮展示值 --> 96 btn.innerHTML = "停止"; 97 <!-- 修改状态为开始 --> 98 isStart = true; 99 <!-- 记录最后一次的随机数对应的展示值,转换为字符串 --> 100 var flag = randomNum + 1; 101 all.children[randomNum].innerHTML = "" + flag; 102 }else{ 103 all.children[randomNum].innerHTML = "谢谢参与"; 104 <!-- 清空执行函数 --> 105 clearInterval(myInterval); 106 <!-- 还原背景颜色,按钮值,开始状态 --> 107 btn.style.backgroundColor = "green"; 108 btn.innerHTML = "开始"; 109 isStart = false; 110 } 111 } 112 </script> 113 </body> 114 </html>