1 <html lang="en"> 2 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>点名册---或者</title> 8 <style> 9 body { 10 text-align: center; 11 } 12 13 #name { 14 font-size: 20px; 15 margin-top: 20px; 16 } 17 </style> 18 </head> 19 20 <body> 21 <button id="begin">开始点名</button> 22 <button id="end">结束点名</button> 23 <div id="name"></div> 24 <script> 25 window.onload = function() { 26 //1.获取标签 27 var begin = document.getElementById("begin"); 28 var end = document.getElementById("end"); 29 var name = document.getElementById("name") 30 //2. 定义变量 31 var nameArray = ['小李', '小花', '小度', '小明', '熊二', '熊大', '吉吉'] 32 name.innerText = nameArray[0] 33 //3.点击监听 34 //3.1 定时器 35 var time = null; 36 begin.onclick = function() { 37 //清楚定时器 38 clearInterval(time) 39 time = setInterval(function() { 40 //3.3 随机数 41 var s_index = parseInt(Math.random() * nameArray.length) 42 var s_name = nameArray[s_index] 43 name.innerText = s_name 44 }, 30) 45 }; 46 end.onclick = function() { 47 clearInterval(time) 48 } 49 50 } 51 </script> 52 </body> 53 54 </html>
