想着使用原生Javascript做一个随机点名的小应用,
也可以做抽奖使用。
html简单化,人名单可以通过js生成并处理。
可以非常随意的添加修改人名字。
应用想带点特效,比如老.虎机转动的特效。
思路入下:
借鉴模板引擎的思想,在页面中添加一个指定ID的script标签,我们可以在任意文本中将提前准备好的人名单复制进来并添加注释。
利用正则处理空白字符,把所有人名添加到数组当中,再删除该script节点,在这里我们只讨论名字为两个字或者三个字的。
遍历数组,此时数组的每一项是一个人名,有两个字的和三个字的。
对数组的每一项进行split操作,使得每一个名字变成一个数组。
接下来处理长度只有2(名字是两个字)的数组,把数组【0】个之后添加一个空字符串,使得所有的姓名数组长度都为3。
点击按钮,开始按钮文字更改‘停止,先执行函数randomName随机出一个姓名【‘1’,‘2’,‘3’】放在对应的三个展示框中。
展示框同时开始滚动,展示框的高度为300px。
开启定时器,在定时器内进行检测,当前的top值余300如果等于-290,说明再往上滚动10当前最后一个姓名就展示完了。
此时需要继续在后面借着生成姓名追加到三个展示框内,所以此时应该执行randomName函数。
当点击停止口,停止按钮的文字变成请稍后,此时需要做一个老.虎机结束,滚动减慢最后确定一个姓名的函数。
清楚上一个定时器,重新开始一个定时器。
定义一个变量,确定此时老.虎机慢速度转几个停下。
k = i - 900 - (300 + i % 300);
i%300 计算的是 当前正在滚动出去的这个姓名还差多少px完整滚动出去。
300 + i % 300 计算的是当前正在滚动进来的姓名还差多少px完整显示出来。
900 是一个可更改的值,值为300的倍数,在这里赋值计算的是点击停止后再 滚动900/300个姓名停下。
i - 900 - (300 + i % 300)计算的就是点击停止后,需要再滚动多少px。
再新的慢速定时器中继续执行randomName函数,继续生成姓名并追加。
判断,当top值等于k时,清除定时器,为了保证准确性,需要最后再次赋值top值等于 k 或 i。
因为在定时器中i -= 5,可能会产生微小误差。
下面上源码:
0 | <!DOCTYPE html> |
1 | <html lang="en"> |
2 | |
3 | <head> |
4 | <meta charset="UTF-8"> |
5 | <title>点名系统v1.1</title> |
6 | <style> |
7 | * { |
8 | margin: 0; |
9 | padding: 0; |
10 | } |
11 | |
12 | body { |
13 | background-color: #000; |
14 | overflow: hidden; |
15 | } |
16 | |
17 | ul { |
18 | list-style: none; |
19 | } |
20 | input{ |
21 | outline-style: none; |
22 | } |
23 | .max { |
24 | width: 1000px; |
25 | height: 300px; |
26 | font-size: 30px; |
27 | font-weight: 0; |
28 | cursor: pointer; |
29 | margin: 50px auto 0; |
30 | border-top: 1px solid green; |
31 | border-bottom: 1px solid green; |
32 | box-sizing: border-box; |
33 | position: relative; |
34 | transition: all 0.5s; |
35 | } |
36 | |
37 | .max:hover { |
38 | font-size: 40px; |
39 | font-weight: bold; |
40 | } |
41 | |
42 | #box, |
43 | #box1, |
44 | #box2 { |
45 | width: 300px; |
46 | height: 300px; |
47 | font-family: "微软雅黑"; |
48 | line-height: 300px; |
49 | text-align: center; |
50 | overflow: hidden; |
51 | position: absolute; |
52 | top: -1px; |
53 | } |
54 | |
55 | #box li, |
56 | #box1 li, |
57 | #box2 li { |
58 | width: 300px; |
59 | height: 300px; |
60 | box-sizing: border-box; |
61 | color: #fff; |
62 | font-family: "微软雅黑"; |
63 | line-height: 300px; |
64 | text-align: center; |
65 | overflow: hidden; |
66 | float: left; |
67 | background-color: rgba(0, 0, 0, 0); |
68 | border: 1px solid green; |
69 | box-sizing: border-box; |
70 | margin: 0; |
71 | } |
72 | |
73 | #box { |
74 | left: 0; |
75 | } |
76 | |
77 | #box1 { |
78 | left: 350px; |
79 | } |
80 | |
81 | #box2 { |
82 | right: 0; |
83 | } |
84 | |
85 | #box ul, |
86 | #box1 ul, |
87 | #box2 ul { |
88 | position: absolute; |
89 | left: 0; |
90 | top: 0; |
91 | } |
92 | |
93 | #btn { |
94 | width: 200px; |
95 | height: 60px; |
96 | display: block; |
97 | text-decoration: none; |
98 | border: 1px solid #eee; |
99 | border-radius: 30px; |
100 | line-height: 60px; |
101 | text-align: center; |
102 | color: #eee; |
103 | font-family: "微软雅黑"; |
104 | font-size: 18px; |
105 | margin: 0 auto 100px; |
106 | transition: all 1s; |
107 | } |
108 | |
109 | #btn:hover { |
110 | width: 1000px; |
111 | border-color: green; |
112 | color: green; |
113 | } |
114 | |
115 | p { |
116 | color: green; |
117 | font-size: 12px; |
118 | text-align: center; |
119 | line-height: 16px; |
120 | } |
121 | |
122 | #sp { |
123 | display: block; |
124 | width: 1000px; |
125 | height: 100px; |
126 | font-size: 6px; |
127 | font-family: "微软雅黑"; |
128 | margin: 0 auto; |
129 | line-height: 100px; |
130 | text-align: center; |
131 | color: green; |
132 | animation: myfirst 0.5s paused forwards; |
133 | } |
134 | |
135 | @keyframes myfirst { |
136 | from { |
137 | bfont-size: 16px; |
138 | } |
139 | to { |
140 | font-size: 30px; |
141 | } |
142 | } |
143 | </style> |
144 | </head> |
145 | <body> |
146 | <div class="max"> |
147 | <div id="box"> |
148 | <ul> |
149 | <li>攻城狮,</li> |
150 | </ul> |
151 | </div> |
152 | <div id="box1"> |
153 | <ul> |
154 | <li>ready?</li> |
155 | </ul> |
156 | </div> |
157 | <div id="box2"> |
158 | <ul> |
159 | <li>go!</li> |
160 | </ul> |
161 | </div> |
162 | </div> |
163 | <span id="sp"></span> |
164 | <a href="javascript:void(0)" id="btn">开始</a> |
165 | <p>说明:将任意名单复制粘贴到页面id为names的标签内添加注释,即可开始随机点名!</p> |
166 | <p style="color:#000">作者:陈晨</p> |
167 | </body> |
168 | <script id="names"> |
169 | /* |
170 | 张孝梅 陈惠芳 翟英祥 催渊 涂新昭 罗平益 谢韶光 杨凯 李佳佳 刘轲轲 杨红哲 张荣秋 王小策 费伊蒙 杜程 李杰 周曼 孔德晨 池远哲 李娜 张雪 张钧 杜东阳 刘冲冲 刘硕 袁冬 孙守鑫 殷昊 孙红厚 高全 |
171 | */ |
172 | </script> |
173 | <script> |
174 | var sp = document.getElementById('sp'), |
175 | box = document.getElementById('box'), |
176 | box1 = document.getElementById('box1'), |
177 | box2 = document.getElementById('box2'), |
178 | ul = box.getElementsByTagName('ul')[0], |
179 | ul1 = box1.getElementsByTagName('ul')[0], |
180 | ul2 = box2.getElementsByTagName('ul')[0], |
181 | lis = ul.getElementsByTagName('li'), |
182 | lis1 = ul1.getElementsByTagName('li'), |
183 | lis2 = ul2.getElementsByTagName('li'), |
184 | btn = document.getElementById('btn'), |
185 | names = document.getElementById('names').innerHTML, |
186 | Rnam1 = /^\s{0,}\/\*\s{0,}|\s{0,}\*\/\s{0,}$/g, |
187 | Rnam2 = /\s{1,}/g, |
188 | names = names.replace(Rnam1, ""), |
189 | names = names.replace(Rnam2, ","), |
190 | nameArr = names.split(","), |
191 | timer = null, |
192 | timerFalse = null, |
193 | flag = true, |
194 | i = 0, |
195 | randoma,li, li1, li2,k,one,two,three; |
196 | console.log(nameArr); |
197 | document.getElementById('names').parentNode.removeChild(document.getElementById('names')); |
198 | for (var j = 0; j < nameArr.length; j++) { |
199 | nameArr[j] = nameArr[j].split(''); |
200 | if (nameArr[j].length != 3) { |
201 | nameArr[j].splice(1, 0, '_'); |
202 | } |
203 | } |
204 | btn.addEventListener('click', function() { |
205 | if (flag == true && btn.innerHTML == '开始') { |
206 | flag = false; |
207 | btn.innerHTML = '停止'; |
208 | sp.innerHTML = ''; |
209 | sp.style.animation = 'none'; |
210 | randomName(); |
211 | timer = setInterval(play, 5); |
212 | |
213 | function play() { |
214 | if (i % 300 == -290) { |
215 | randomName(); |
216 | } |
217 | ul.style.top = i + 'px'; |
218 | ul1.style.top = i + 'px'; |
219 | ul2.style.top = i + 'px'; |
220 | i -= 5; |
221 | } |
222 | } else { |
223 | clearInterval(timer); |
224 | if (btn.innerHTML == '停止') { |
225 | btn.innerHTML = '请稍后……'; |
226 | timerFalse = setInterval(stop, 30); |
227 | } |
228 | k = i - 900 - (300 + (i % 300)); |
229 | |
230 | function stop() { |
231 | if (i != k) { |
232 | if (i % 300 == -290) { |
233 | randomName(); |
234 | } |
235 | ul.style.top = i + 'px'; |
236 | ul1.style.top = i + 'px'; |
237 | ul2.style.top = i + 'px'; |
238 | i -= 5; |
239 | } else { |
240 | ul.style.top = i + 'px'; |
241 | ul1.style.top = i + 'px'; |
242 | ul2.style.top = i + 'px'; |
243 | btn.innerHTML = '开始'; |
244 | flag = true; |
245 | clearInterval(timerFalse); |
246 | var two = lis1[Math.abs(i / 300)].innerHTML; |
247 | if (two == "_") { |
248 | two = ''; |
249 | } |
250 | sp.innerHTML = '让我们有请<span style="color:red;">' + lis[Math.abs(i / 300)].innerHTML + two + lis2[Math.abs(i / 300)].innerHTML + '</span>同学发表个人意见'; |
251 | one = lis[Math.abs(i / 300)].cloneNode(true); |
252 | two = lis1[Math.abs(i / 300)].cloneNode(true); |
253 | three = lis2[Math.abs(i / 300)].cloneNode(true); |
254 | ul.innerHTML = ul1.innerHTML = ul2.innerHTML = ''; |
255 | ul.style.top = ul1.style.top = ul2.style.top = '0'; |
256 | i = 0; |
257 | ul.appendChild(one); |
258 | ul1.appendChild(two); |
259 | ul2.appendChild(three); |
260 | sp.style.animation = 'myfirst 0.5s running forwards'; |
261 | } |
262 | } |
263 | } |
264 | }) |
265 | |
266 | function randomName() { |
267 | li = document.createElement('li'); |
268 | li1 = document.createElement('li'); |
269 | li2 = document.createElement('li'); |
270 | randoma = parseInt(Math.random() * nameArr.length); |
271 | li.innerHTML = nameArr[randoma][0]; |
272 | li1.innerHTML = nameArr[randoma][1]; |
273 | li2.innerHTML = nameArr[randoma][2]; |
274 | ul.appendChild(li); |
275 | ul1.appendChild(li1); |
276 | ul2.appendChild(li2); |
277 | } |
278 | </script> |
279 | |
280 | </html> |
281 |
结合源码再看一遍我的思路,相信大家就很清楚了,如果还有不清楚的或者有更好的意见,欢迎留言讨论。