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>

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
THE END
分享
二维码
< <上一篇
下一篇>>