HTML小项目之双色球
Posted 叶落而知秋！
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML小项目之双色球相关的知识，希望对你有一定的参考价值。
所用知识： html ，javascript
所用软件： Hbuilder
运行结果图如下：
所实现功能： 点击开始按钮双色球开始随机生成号码，前六个球号码1-33不重复，第七个球1-16（可与前面的球重复）点击暂停按钮七个号码显现
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>双色球</title>
<style type="text/css">
div
width: 50px;
height: 50px;
font-size: 30px;
background-color: #DCDCDC;
display: inline-block;
border-radius: 90px;
margin: 20px;
padding: 30px;
#a1
width: 70px;
height: 50px;
margin: 20px;
</style>
<!--
display: inline-block; 显示在一行
border-radius: 90px; div边框弧度 此时为圆形
margin: 20px;外间距
padding: 30px; 内间距
-->
<script language="JavaScript">
function btnStart()
//写一个1-16的随机数；
let b = Math.floor(Math.random() * 16 + 1)
let sz = new Array();
//for循环
for(var i = 0; i < 6; i++) //定义变量a 若i<7 执行循环 最后自增1
//Math.floor向下取整 Math.random定义随机数
let a = Math.floor(Math.random() * 33 + 1); //定义随机数a 范围1—33
if(i == 0)
sz[0] = a; //第一次直接存进0号位
else
let flag = false;
//判断后边生成的数字是否和前面的相等
for(var j = 0; j < sz.length; j++)
if(sz[j] == a)
flag = false;
break; //如果相等跳出此次for循环
else
flag = true; //如果不相等把flag赋值false
if(flag==true) //当flag等于false说明此次进来的数和前面的都不相等
sz[i] = a; //把此次生成的随机数存入数组
else
i--; //如果此次生成的数和数组中的数相等i--，再重新执行
document.getElementById("div1").innerHTML = sz[0];
document.getElementById("div2").innerHTML = sz[1];
document.getElementById("div3").innerHTML = sz[2];
document.getElementById("div4").innerHTML = sz[3];
document.getElementById("div5").innerHTML = sz[4];
document.getElementById("div6").innerHTML = sz[5];
document.getElementById("div7").innerHTML = b;
y = setTimeout(btnStart, 20); //定时器
function btnStop()
clearTimeout(y); //清除定时器
</script>
</head>
<body>
<center>
<div id="div1">2</div>
<div id="div2">0</div>
<div id="div3">2</div>
<div id="div4">1</div>
<div id="div5">双</div>
<div id="div6">色</div>
<div id="div7">球</div>
<br/>
<input type="button" value="开始" id="a1" onclick="btnStart()" />
<input type="button" value="暂停" id="a1" onclick="btnStop()" />
</center>
</body>
</html>
以上是关于HTML小项目之双色球的主要内容，如果未能解决你的问题，请参考以下文章