使用原生Js實現(xiàn)隨機點名
最近學(xué)了一點前端內(nèi)容，老師讓用js設(shè)計一個班里的隨機點名器。就嘗試寫了一個，具體實現(xiàn)效果如圖：
實現(xiàn)代碼：
|
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 ： 事件會在頁面或圖像加載完成后立即發(fā)生。 --><body onload="A()"> <div class="wai" align="center"> <table> <button class="start" onclick="start()">開始</button> <button class="end" onclick="end()">結(jié)束</button> </table> <div id="names"></div> </div> <script type="text/javascript"> var nameArr = [ "空", "張家家", "許雪雪", "王橘橘", "陳韻", "馬本本", "張志志", "唐豪豪", "高洋洋", "朱陽陽", "王山山", "空", "尹方方", "王零零", "李遠(yuǎn)遠(yuǎn)", "吳杰", "李玉玉", "李雯雯", "步一一", "崔明明", "肖金金", "陳晴晴", "趙飛飛", "空", "李英英", "李洋陽", "劉俊郡", "王泊", "廉云云", "王子俊", "康三三", "李浩浩", "張藝藝", "徐葉葉", "李宏宏", "雷康康", "張青青", "王樂樂", "空", "楊童童", "張君君", "孫明", "何龍龍", "鄭軒軒", "任平平", "孫超超", "空", "賀濤濤", "空", "空", "空", "空", "熊秀秀", "薄嘉嘉", "薛萬萬", "尹飛", "張杰", "胡萬萬", "空", "馬文文" ]; var index = 0; var k = 1; // 記錄不為空的座位 // 生成作為表 function A() { for (var i = 0; i < nameArr.length; i++) { if (nameArr[i].length > 1) { // 創(chuàng)建div標(biāo)簽（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++; // 添加一個學(xué)生，k自增1，記錄學(xué)生（不為空的座位）個數(shù) } else { var div = document.createElement("div"); div.setAttribute("class", "name"); // div.setAttribute("id", index++ + ""); // 如果當(dāng)前元素長度小于等于1時，則代表當(dāng)前座位為空，所以不給當(dāng)前div添加id屬性，方便后續(xù)隨機選人時，避開空座位 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標(biāo)志 var index2 = -1; function restore() { // 還原顏色 if (index2 != -1) { document.getElementById(index2 + "").style.cssText = "background: mistyrose"; } // 生成隨機數(shù)，用K生成隨機數(shù)，此時K代表不為空的作為個數(shù) var num = Math.floor(Math.random() * k); document.getElementById(num + "").style.cssText = "background-color:red"; index2 = num; // 記錄當(dāng)前被選中的id，在下次執(zhí)行該函數(shù)時，將顏色還原 } var time; // 用于接收計時器，方便關(guān)計時器時操作 var n = 1; // 定義狀態(tài)正在執(zhí)行 n=0 , 已經(jīng)結(jié)束 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 + "同學(xué)回答問題"); n = 1; } } </script></body></html> |
在這里對計時器做一下介紹：
|
1
2
3
4
5
|
setInterval(code，millisec)，這兩個參數(shù)都是必須的； 第一個參數(shù)是要調(diào)用的函數(shù)或要執(zhí)行的代碼串。 第二個參數(shù)是毫秒值，表示的是隔多久執(zhí)行一次code(參數(shù)一)。clearInterval(id_of_setinterval)，參數(shù)是必須的； 這個參數(shù)表示setInterval返回的ID值，即在代碼中我設(shè)置的time |
（本人是小白一個，所以寫的有什么問題也請各位指出，可以讓我及時改正，謝謝）
總結(jié)
到此這篇關(guān)于如何使用原生Js實現(xiàn)隨機點名的文章就介紹到這了,更多相關(guān)原生Js實現(xiàn)隨機點名內(nèi)容請搜索服務(wù)器之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持服務(wù)器之家！
原文鏈接：https://blog.csdn.net/Li_Wendi/article/details/112238687
