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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/385622.html

標籤：其他

上一篇：javaScript原型與原型鏈

下一篇：JavaScript之用new運算子呼叫函式——一篇帶你搞懂