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>