使用原生Js實現隨機點名
最近學了一點前端內容，老師讓用js設計一個班里的隨機點名器。就嘗試寫了一個，具體實現效果如圖：
實現代碼：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>點名</title> <link href="../callTheRoll/bootstrap-3.3.7-dist/css/bootstrap.min.css" type="text/css" rel="stylesheet"></head><style> div { float: left; } button { background-color: moccasin; margin: 30px; height: 50px; width: 150px; border: rgb(245, 165, 165) 1px solid; font-size: 18px; } .wai { margin-left: 200px; width: 1300px; } .name { height: 40px; width: 100px; margin: 4px; padding: 10px; font-size: 18px; background-color: mistyrose; }</style><!-- onload ： 事件會在頁面或圖像加載完成后立即發生。 --><body onload="A()"> <div class="wai" align="center"> <table> <button class="start" onclick="start()">開始</button> <button class="end" onclick="end()">結束</button> </table> <div id="names"></div> </div> <script type="text/javascript"> var nameArr = [ "空", "張家家", "許雪雪", "王橘橘", "陳韻", "馬本本", "張志志", "唐豪豪", "高洋洋", "朱陽陽", "王山山", "空", "尹方方", "王零零", "李遠遠", "吳杰", "李玉玉", "李雯雯", "步一一", "崔明明", "肖金金", "陳晴晴", "趙飛飛", "空", "李英英", "李洋陽", "劉俊郡", "王泊", "廉云云", "王子俊", "康三三", "李浩浩", "張藝藝", "徐葉葉", "李宏宏", "雷康康", "張青青", "王樂樂", "空", "楊童童", "張君君", "孫明", "何龍龍", "鄭軒軒", "任平平", "孫超超", "空", "賀濤濤", "空", "空", "空", "空", "熊秀秀", "薄嘉嘉", "薛萬萬", "尹飛", "張杰", "胡萬萬", "空", "馬文文" ]; var index = 0; var k = 1; // 記錄不為空的座位 // 生成作為表 function A() { for (var i = 0; i < nameArr.length; i++) { if (nameArr[i].length > 1) { // 創建div標簽（html元素） var div = document.createElement("div"); div.setAttribute("class", "name"); div.setAttribute("id", index++ + ""); var text = document.createTextNode(nameArr[i]); div.appendChild(text); // 添加元素 document.getElementById("names").appendChild(div); // 每排12人，所以每隔12，添加一個換行符 if ((i + 1) % 12 == 0) { var br = document.createElement("br"); document.getElementById("names").appendChild(br); } k++; // 添加一個學生，k自增1，記錄學生（不為空的座位）個數 } else { var div = document.createElement("div"); div.setAttribute("class", "name"); // div.setAttribute("id", index++ + ""); // 如果當前元素長度小于等于1時，則代表當前座位為空，所以不給當前div添加id屬性，方便后續隨機選人時，避開空座位 var text = document.createTextNode(nameArr[i]); div.appendChild(text); // 添加元素 document.getElementById("names").appendChild(div); if ((i + 1) % 12 == 0) { var br = document.createElement("br"); document.getElementById("names").appendChild(br); } } } } // 定義一個id標志 var index2 = -1; function restore() { // 還原顏色 if (index2 != -1) { document.getElementById(index2 + "").style.cssText = "background: mistyrose"; } // 生成隨機數，用K生成隨機數，此時K代表不為空的作為個數 var num = Math.floor(Math.random() * k); document.getElementById(num + "").style.cssText = "background-color:red"; index2 = num; // 記錄當前被選中的id，在下次執行該函數時，將顏色還原 } var time; // 用于接收計時器，方便關計時器時操作 var n = 1; // 定義狀態正在執行 n=0 , 已經結束 n=1 function start() { if (n == 1) { // DOM setInterval()方法 計時器 time = setInterval("restore()", 80); n = 0; } } function end() { if (n == 0) { clearInterval(time); alert("請" + document.getElementById(index2 + "").innerHTML + "同學回答問題"); n = 1; } } </script></body></html> |
在這里對計時器做一下介紹：
|
1
2
3
4
5
|
setInterval(code，millisec)，這兩個參數都是必須的； 第一個參數是要調用的函數或要執行的代碼串。 第二個參數是毫秒值，表示的是隔多久執行一次code(參數一)。clearInterval(id_of_setinterval)，參數是必須的； 這個參數表示setInterval返回的ID值，即在代碼中我設置的time |
（本人是小白一個，所以寫的有什么問題也請各位指出，可以讓我及時改正，謝謝）
總結
到此這篇關于如何使用原生Js實現隨機點名的文章就介紹到這了,更多相關原生Js實現隨機點名內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://blog.csdn.net/Li_Wendi/article/details/112238687
