随机点名系统

Posted ruo-shui-yi-fang

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了随机点名系统相关的知识,希望对你有一定的参考价值。

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

 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里应该有,不过目前我还没学,所以只能先自己写!不过原生是基础,还是要好好掌握好的,工具很多,但你要会原理,不然工具迭代很快的!欢迎一起探讨哦!

以上是关于随机点名系统的主要内容,如果未能解决你的问题,请参考以下文章

随机点名系统

点名系统

08===跨线程访问之随机点名系统。

js随机点名系统

学生课堂随机点名系统小结

JavaScript简单的随机点名系统