前段时间刷抖音，发现一个比较好玩的随机抽查系统，老师可以用它抽查到的名字回答问题，提高课堂活跃度和专注度。今天我用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>
效果图如下：
当然也可以实现简单的抽奖，，欢迎大佬批评教育
原文地址：https://www.cnblogs.com/zhzq1111/p/11634575.html
时间： 2024-10-29 00:23:38