js+css+html实现抽奖小程序

摘要:学习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>