原生javascript实现老.虎机抽奖点名demo源码思路解析

想着使用原生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  

点击在线运行老.虎机

结合源码再看一遍我的思路,相信大家就很清楚了,如果还有不清楚的或者有更好的意见,欢迎留言讨论。

原文链接-摘自大公爵ddamy.com

上一篇:MicrosoftProjectOxford 微软牛津计划


下一篇:进程间通信之POSIX信号量