脚本宝典收集整理的这篇文章主要介绍了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小项目之双色球全部内容,希望文章能够帮你解决HTML小项目之双色球所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。