如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>雙色球</title>
<link rel="stylesheet" type="text/css" href="css/twoToneClass.css" rel="external nofollow" >
</head>
<script type="text/javascript">
function getway(){
//定義一個數組 用來裝紅色球的隨機數
var reds=[parseInt(Math.random()*33+1)]; //1-33的隨機數
//定義一個數組 用來裝藍色球的隨機數
var blues=[parseInt(Math.random()*16+1)]; //1-16的隨機數
while(reds.length<6){ //雙色球是6紅1藍，故長度小于6 說明會循環5次 因為前面reds已經有一次的默認值
var r=parseInt(Math.random()*33+1); //定義r 隨機數的取值與reds一致 用于與reds作比較
for (var i = 0; i < reds.length; i++) {
if (reds[i]==r) { //若 reds中的隨機值與r中的相等，則跳出，繼續i++取值
break; //若reds中的隨機值與r中的不相等，則進入else if
} else if(i==reds.length-1){ //reds.length-1 --> 原先的reds.length為5，減1為4，而數組是從0 開始算，所以這里會循環5次，剛好與 reds.length<6 同步；且 i等于reds.length-1，是讓隨機數循環5次（另外就是讓它找到定義中的最后一位數）
reds.push(r); //將r中的值添加到reds中 push()：向數組中添加元素
//值得注意是！r與reds作比較時，是以reds中現有的數作比較，因為 reds.push(r); 這句代碼已經向reds中添加了數值，所以r不是以reds中自身產生的隨機數作比較，而是原先r添加到reds中的值作比較
}
}
}
//document.write(reds);
//排序
reds.sort(function compare(a,b) {
return a-b;
})
//打印隨機數
for (var h = 0; h < reds.length; h++) {
document.getElementById('tone'+h+'').innerHTML=reds[h];
}
document.getElementById('tone6').innerHTML=blues;
}
</script>
<body>
<div id="tone0"></div>
<div id="tone1"></div>
<div id="tone2"></div>
<div id="tone3"></div>
<div id="tone4"></div>
<div id="tone5"></div>
<div id="tone6"></div>
<button type="button" id="cilckMe" onclick="getway()">點我生成雙色球</button>
</body>
</html>以上這篇JavaScript實現簡單的雙色球(實例講解)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2025 51dongshi.com 版權所有
違法及侵權請聯系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬商天勤律師事務所王興未律師提供法律服務
