还记得上学的时候被点名的恐惧吗？没办法，刚学完计时器，通过随机点名系统来巩固下知识点，顺便来感受下乐趣！代码奉上！
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里应该有，不过目前我还没学，所以只能先自己写！不过原生是基础，还是要好好掌握好的，工具很多，但你要会原理，不然工具迭代很快的！欢迎一起探讨哦！
原文地址：https://www.cnblogs.com/ruo-shui-yi-fang/p/11396918.html
时间： 2024-07-29 09:40:16