随机点名系统

还记得上学的时候被点名的恐惧吗？没办法，刚学完计时器，通过随机点名系统来巩固下知识点，顺便来感受下乐趣！代码奉上！

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <style>
 9         #box {
10             width: 800px;
11             margin: 200px auto;
12             text-align: center;
13             display: flex;
14             flex-direction: column;
15             align-items: center;
16         }
17         span {
18             display: block;
19             width: 100px;
20             height: 50px;
21             background-color: darkorange;
22             border: none;
23             font-size: 18px;
24             border-radius: 10px;
25             color: aliceblue;
26             line-height: 50px;
27             cursor: pointer;
28         }
29         p {
30             font-size: 40px;
31             color: darksalmon;
32         }
33     </style>
34 </head>
35 <body>
36     <div id="box">
37         <p id="txt"></p>
38         <span id="btn">点击开始</span>
39     </div>
40 </body>
41 <script>
42     // 获取标签的id
43     var obtn = document.getElementById("btn");
44     var otxt = document.getElementById("txt");
45     // 创建数组，相当于模拟后台数据，用字符更稳妥，不跟后台衔接的话，数组和字符无差别；
46     var str = "杨幂, 赵丽颖, 唐嫣, 刘诗诗, 彭昱畅,张子枫,李庚希,黄磊,何炅,谢娜";
47     var arr = str.split(",");
48     // var arr=["杨幂", "赵丽颖", "唐嫣", "刘诗诗", "张子枫","彭昱畅","李庚希","黄磊","何炅","谢娜"];
49     // 在p标签中写内容，初始状态，也可在标签中写；
50     otxt.innerHTML = "请点击下面的按钮，开始抽奖";
51     // 用于判断点击；
52     var j = 1;
53     // 用于清楚定时器
54     var t=null;
55     // 点击发生的事件
56     obtn.onclick = function () {
57         if (j == 1) {
58             // 定时器
59             t = setInterval(function () {
60                 var i = random(0, arr.length - 1);
61                 otxt.innerHTML = arr[i];
62             }, 10);
63             obtn.innerHTML = "点击结束";
64             j = 2;
65         } else {
66             // 清除定时器
67             clearInterval(t);
68             obtn.innerHTML = "点击开始";
69             j = 1;
70         }
71     }
72     // 随机生成函数的封装
73     function random(max, min) {
74         return Math.round(Math.random() * (max - min) + min);
75     }
76 </script>
77 </html>

写法有很多种，这只是我的一个思路，也是我对现阶段所学知识的掌握吧！你也可以根据自己所学的去尝试着写一写，只要敢想，没有实现不了的！其实函数封装好可以放到一个公共的js文件中，要用的时候，通过语句调用即可；将常用函数放入其中，会省很多事！不过jQuery里应该有，不过目前我还没学，所以只能先自己写！不过原生是基础，还是要好好掌握好的，工具很多，但你要会原理，不然工具迭代很快的！欢迎一起探讨哦！

猜你喜欢