样式：
（1）body
1 body{ 2 background-color: aliceblue; 3 } 4 .box{ 5 1000px; 6 height: 240px; 7 margin: 0 auto; 8 margin-top: 100px; 9 clear: both; 10 }
（2）按钮
1 #btn{ 2 display: inline-block; 3 padding: 8px 5px; 4 font-size: 24px; 5 cursor: pointer; 6 text-align: center; 7 text-decoration: none; 8 outline: none; 9 color: #fff; 10 background-color: #4CAF50; 11 border: none; 12 border-radius: 15px; 13 box-shadow: 0 9px #999; 14 margin-left: 45%; 15 margin-top:10px; 16 } 17 .btn:hover {background-color: #3e8e41} 18 19 .btn:active { 20 background-color: #3e8e41; 21 box-shadow: 0 50px #666; 22 transform: translateY(4px); 23 }
（3）姓名背景框
1 .name{ 2 150px; 3 height: 30px; 4 float: left; 5 background-color: antiquewhite; 6 margin-left: 10px; 7 margin-top: 10px; 8 text-align: center; 9 line-height: 30px; 10 border-radius: 15px; 11 }
主要函数：
1 function my$(id){ 2 return document.getElementById(id) 3 }; 4 // 模拟后台数据 5 var arr = ["001张三","002安可","01秋葵","02涡皮","03于莉","04沃伦","05周亮","06梁画","07王志","08唐甜","09陈飞","10乔黯" ]; 6 // 动态创建层 7 for(var i =0;i<arr.length;i++){ 8 var div = document.createElement("div"); 9 div.innerText=arr[i]; 10 div.className="name"; 11 my$("box").appendChild(div); 12 }; 13 // 点名 14 my$("btn").onclick=function(){ 15 //element=document.getElementById('myimage') 16 var peoples= arr.length; 17 // 监视按钮的状态 18 if(this.value==="点名"){ 19 // 定时针 20 timeId=setInterval(function () { 21 // 清空所有层的颜色 22 for(var i =0;i<arr.length;i++){ 23 my$("box").children[i].style.background="" 24 }; 25 // 留下当前层的颜色 26 var random = parseInt(Math.random()*peoples); 27 my$("box").children[random].style.background="green"; 28 },0.1); 29 30 this.value="停止"; 31 //element.src="Name/点名.png; 32 }else{ 33 // 清除计时器 34 clearInterval(timeId); 35 this.value="点名"; 36 //element.src="Name/停止.png; 37 }; 38 };
全部代码：
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 body{ 8 background-color: aliceblue; 9 } 10 .box{ 11 1000px; 12 height: 240px; 13 margin: 0 auto; 14 margin-top: 100px; 15 clear: both; 16 } 17 #btn{ 18 display: inline-block; 19 padding: 8px 5px; 20 font-size: 24px; 21 cursor: pointer; 22 text-align: center; 23 text-decoration: none; 24 outline: none; 25 color: #fff; 26 background-color: #4CAF50; 27 border: none; 28 border-radius: 15px; 29 box-shadow: 0 9px #999; 30 margin-left: 45%; 31 margin-top:10px; 32 } 33 .btn:hover {background-color: #3e8e41} 34 35 .btn:active { 36 background-color: #3e8e41; 37 box-shadow: 0 50px #666; 38 transform: translateY(4px); 39 } 40 .name{ 41 150px; 42 height: 30px; 43 float: left; 44 background-color: antiquewhite; 45 margin-left: 10px; 46 margin-top: 10px; 47 text-align: center; 48 line-height: 30px; 49 border-radius: 15px; 50 } 51 #span{ 52 float: right; 53 position: relative; 54 top: 1055px; 55 right: 185px; 56 } 57 h1{ 58 text-align: center; 59 } 60 #footer{text-align:center; padding:20px 0;} 61 </style> 62 </head> 63 <body> 64 <div id="wrap"> 65 <h1>课堂回答随机点名</h1> 66 67 <span id="span"></span> 68 <div class="box" id="box"></div> 69 <input type="button" id="btn" value="点名"/> 70 <script> 71 // 获取id函数 72 function my$(id){ 73 return document.getElementById(id) 74 }; 75 // 模拟后台数据 76 var arr = ["001张三","002安可","01秋葵","02涡皮","03于莉","04沃伦","05周亮","06梁画","07王志","08唐甜","09陈飞","10乔黯" ]; 77 // 动态创建层 78 for(var i =0;i<arr.length;i++){ 79 var div = document.createElement("div"); 80 div.innerText=arr[i]; 81 div.className="name"; 82 my$("box").appendChild(div); 83 }; 84 // 点名 85 my$("btn").onclick=function(){ 86 //element=document.getElementById('myimage') 87 var peoples= arr.length; 88 // 监视按钮的状态 89 if(this.value==="点名"){ 90 // 定时针 91 timeId=setInterval(function () { 92 // 清空所有层的颜色 93 for(var i =0;i<arr.length;i++){ 94 my$("box").children[i].style.background="" 95 }; 96 // 留下当前层的颜色 97 var random = parseInt(Math.random()*peoples); 98 my$("box").children[random].style.background="green"; 99 },0.1); 100 101 this.value="停止"; 102 //element.src="Name/点名.png; 103 }else{ 104 // 清除计时器 105 clearInterval(timeId); 106 this.value="点名"; 107 //element.src="Name/停止.png; 108 }; 109 }; 110 </script> 111 <div id="footer"> ©2017-04-08博客园DJ_Mathison</div> 112 113 </body> 114 </html>
效果：
