JavaScript实现抖音较火的随机点名系统

前段时间刷抖音，发现一个比较好玩的随机抽查系统，老师可以用它抽查到的名字回答问题，提高课堂活跃度和专注度。今天我用javaScript实现了一个，代码如下！！！可直接粘贴

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>点名/抽奖系统</title>
 9     <style>
10         body {
11             user-select: none;
12         }
13         
14         .showBox {
15             margin: 50px auto;
16             width: 620px;
17             height: auto;
18             overflow: hidden;
19             text-align: center;
20         }
21         
22         .showBox .title {
23             text-align: left;
24             font-size: 26px;
25             line-height: 100px;
26             text-decoration: underline;
27             font-style: oblique;
28             color: #c06;
29         }
30         
31         .showBox .showName {
32             height: 400px;
33             font-size: 40px;
34             line-height: 400px;
35             border-radius: 20px;
36             box-shadow: 2px 2px 5px #333;
37         }
38         
39         .showBox .btn {
40             margin-top: 20px;
41             display: inline-block;
42             padding: 10px 15px;
43             cursor: pointer;
44             color: #fff;
45             background-color: #c06;
46             border-radius: 5px;
47             box-shadow: 1px 1px 1px #333;
48         }
49     </style>
50 </head>
51 
52 <body>
53     <div class="showBox">
54         <div class="title">点名/抽奖系统</div>
55         <div class="showName">ready</div>
56         <div class="btn">开始</div>
57     </div>
58     <script>
59         var oShowName = document.querySelector(".showName"),
60             oBtn = document.querySelector(".btn"),
61             bol = true, //通过判断true/false完成开始/结束的效果
62             timer; //定时器
63 
64         // 封装函数
65         function myFun() {
66             var aName = ["二哈", "忆梓", "松果林", "松果菊", "无为", "万章", "默契", "胖贼", "孟亚兰", "张大胖", "奢望", "西奥"], //此数组放置姓名，用英文分号包裹，英文逗号分隔
67                 ranNum = parseInt(Math.random() * aName.length);
68             oShowName.innerHTML = aName[ranNum];
69         }
70         oBtn.onclick = function() {
71             if (bol) {
72                 bol = false;
73                 oBtn.innerHTML = "结束";
74                 oShowName.style.color = "#099";
75                 timer = setInterval("myFun()", 200); //bol为true时开启定时器
76             } else {
77                 bol = true;
78                 oBtn.innerHTML = "开始";
79                 oShowName.style.color = "#fc3";
80                 clearInterval(timer); //bol为false时结束定时器
81             }
82         }
83     </script>
84 </body>
85 
86 </html>

效果图如下：

当然也可以实现简单的抽奖，，欢迎大佬批评教育