摘要:学习js基础逻辑,简单实现一下,在最后作弊一下,不管几号都是谢谢参与。想做的完善一些,可以利用数组把数字换为人名,做一些修饰美化一下。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>抽奖小程序</title>
6 <style type="text/css">
7 h1{
8 color: red;
9 text-align: center;
10 }
11 div{
12 width: 510px;
13 height: 208px;
14
15 border: 1px solid orange;
16
17 margin-left: auto;
18 margin-right: auto;
19
20 font-size: 0px;
21 }
22 span{
23 /*转换为行级块元素 sapn是行级元素*/
24 display: inline-block;
25 width: 100px;
26 height: 50px;
27 /*dashed 虚线*/
28 border: 1px dashed orange;
29
30 font-size: 16px;
31 text-align: center;
32 line-height: 50px;
33 }
34
35 button{
36 /*button是行级块元素 转换为块级元素*/
37 display: block;
38 width: 100px;
39 height: 40px;
40
41 margin-top: 60px;
42 margin-left: auto;
43 margin-right: auto;
44 background-color: green;
45 }
46 </style>
47 </head>
48 <body>
49 <h1>抽奖行动正在进行!</h1>
50
51 <div id=all>
52 </div>
53 <!-- 设置一个点击函数 startOrStop() -->
54 <button onclick="startOrStop()" id=btn>开始</button>
55
56 <script type="text/javascript">
57 <!-- 通过ID获取 div标签和button标签 -->
58 var all = document.getElementById("all");
59 var btn = document.getElementById("btn");
60
61 for(var i=1;i<21;i++){
62 <!-- 生成<span></span> -->
63 var span = document.createElement("span");
64 <!-- 生成<span></span>的输出值 -->
65 span.innerHTML = i;
66 <!-- 将span添加到div块中 -->
67 all.appendChild(span);
68 }
69 <!-- 记录执行函数 -->
70 var myInterval;
71 <!-- 记录是否开始 -->
72 var isStart = false;
73 <!-- 记录生成的随机数 -->
74 var randomNum = 0;
75 function startOrStop(){
76 <!-- 执行一次,生成一个随机数,并且修改对应span的背景颜色 -->
77 function start(){
78 <!-- 获取div中的所有标签数 -->
79 var num = all.children.length;
80 <!-- 每次执行函数时,先还原div中元素的背景颜色 -->
81 for(var i=0;i<num;i++){
82 <!-- transparent 透明 -->
83 all.children[i].style.backgroundColor = "transparent";
84 }
85 <!-- Math.floor(num)对num向下取整,Math.random()生成0~1的随机小数 -->
86 randomNum = Math.floor(Math.random() * num);
87 <!-- alert(randomNum); -->
88 <!-- 对随机数对应的span修改背景颜色 -->
89 all.children[randomNum].style.backgroundColor = "red";
90 }
91 if(isStart == false){
92 <!-- 每100毫秒执行一次start()函数,保存给myInterval -->
93 myInterval = setInterval(start,100);
94 btn.style.backgroundColor = "red";
95 <!-- 修改按钮展示值 -->
96 btn.innerHTML = "停止";
97 <!-- 修改状态为开始 -->
98 isStart = true;
99 <!-- 记录最后一次的随机数对应的展示值,转换为字符串 -->
100 var flag = randomNum + 1;
101 all.children[randomNum].innerHTML = "" + flag;
102 }else{
103 all.children[randomNum].innerHTML = "谢谢参与";
104 <!-- 清空执行函数 -->
105 clearInterval(myInterval);
106 <!-- 还原背景颜色,按钮值,开始状态 -->
107 btn.style.backgroundColor = "green";
108 btn.innerHTML = "开始";
109 isStart = false;
110 }
111 }
112 </script>
113 </body>
114 </html>