7 實作：樂透開獎
Last updated
Last updated
請再 practice 資料夾下，建立 lottery.html 網頁檔。初始的原始碼如下：
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
box-sizing: border-box;
}
body{
margin: 0;
}
hr{
border-top: 1px solid lightblue;
width: 690px;
margin: 20px auto;
}
article.container{
/* border: 1px solid black; */
width: 700px;
margin: 0 auto;
padding: 0 5px 5px 5px;
}
article.container div.go_block h1{
margin: 5px 0;
display: inline-block;
vertical-align: middle;
}
article.container div.go_block button{
display: inline-block;
vertical-align: middle;
cursor: pointer;
margin-left: 10px;
}
article.container div.block_parent{
border: 1px solid #ccc;
border-radius: 5px;
display: flex;
padding-bottom: 5px;
}
article.container div.block_parent div.block1{
/* border: 1px solid blue; */
flex-grow: 1;
}
article.container div.block_parent div.block1 h2{
text-align: center;
margin: 0 0 5px 0;
}
article.container div.block_parent div.block2{
/* border: 1px solid blue; */
flex-shrink: 0;
flex-basis: 100px;
}
article.container div.block_parent div.block2 h2{
text-align: center;
margin: 0 0 5px 0;
}
article.container div.ball_parent{
display: flex;
justify-content: center;
}
article.container div.ball{
width: 80px;
height: 80px;
border-radius: 50%;
background: radial-gradient(circle at 25px 25px, hsla(37, 95%, 82%, 1), hsla(37, 95%, 52%, 1));
margin-right: 10px;
position: relative;
}
article.container div.ball.special_ball{
background: radial-gradient(circle at 25px 25px, hsla(9, 100%, 84%, 1), hsla(9, 100%, 44%, 1));
}
article.container div.ball:last-child{
margin-right: 0;
}
article.container div.ball span{
font-weight: bold;
position: absolute;
display: inline-block;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size: 30px;
text-shadow: 1px 1px 2px gray;
}
</style>
</head>
<body>
<article class="container">
<div class="go_block">
<h1>樂透開獎</h1>
<button type="button" id="lottery_go">開獎 GO</button>
</div>
<div class="block_parent">
<div class="block1">
<h2>獎號</h2>
<div class="ball_parent">
<div class="ball general_ball"></div>
<div class="ball general_ball"></div>
<div class="ball general_ball"></div>
<div class="ball general_ball"></div>
<div class="ball general_ball"></div>
<div class="ball general_ball"></div>
</div>
</div>
<div class="block2">
<h2>特別號</h2>
<div class="ball_parent">
<div class="ball special_ball" id="special_ball"></div>
</div>
</div>
</div>
</article>
<script>
</script>
</body>
</html>寫註解：
// 寫一個補 0 的函式，名稱叫 str_pad，可以帶兩個參數，第一個是要補 0 的數字，第二個是要補幾位數完成的原始碼如下：
function str_pad(num, digit){
let str = num.toString();
while(str.length < digit){
str = '0' + str;
}
return str;
}寫註解：
// 產生一個 1 ~ 49 的數字，存到 nums_array 陣列中，不足 2 位數的要補 0寫註解：
// 產生一個 lottery_result 空陣列，放之後產生的獎號完成的原始碼如下：
let nums_array = [];
for(let i = 1; i <= 49; i++){
nums_array.push(str_pad(i, 2));
}
let lottery_result = [];寫註解：
// 寫一個函式 random_number，從 nums_array 陣列中，排除 lottery_result 已抽過的數字，然後隨機挑 1 個完成的原始碼如下：
function random_number(){
let temp_array = nums_array.filter(function(item){
return !lottery_result.includes(item);
});
let random_index = Math.floor(Math.random() * temp_array.length);
return temp_array[random_index];
}寫註解：
// 將 id 為 lottery_go 的按鈕，綁定 click 事件完成的原始碼如下：
document.querySelector('#lottery_go').addEventListener('click', function(){
});在上一步的匿名函式中，寫以下註解：
// 抓取出頁面上所有的 div.ball完成的原始碼：
let balls = document.querySelectorAll('div.ball');再寫註解：
// 宣告一個空陣列，用來存放 setInterval 的 id完成的原始碼：
let interval_ids = [];再寫註解：
/*
針對 balls 的第 1 個，每隔 0.1 秒，執行一次 random_number 函式，產生一個獎號，
並將獎號放到 lottery_result 陣列中，
且獎號用 span 標籤包起來，顯示在第一個 div.ball 裡面,
id 也要放到 interval_ids 陣列中
*/完成的原始碼：
interval_ids.push(setInterval(function(){
let num = random_number();
balls[0].innerHTML = '<span>' + num + '</span>';
// 獎號放到 lottery_result 陣列中第1個
lottery_result[0] = num;
}, 100));接續上個步驟，再往下寫註解：
// 設定 2 秒鐘之後，停掉 setInterval 的執行完成的原始碼如下：
setTimeout(function(){
clearInterval(interval_ids[0]);
}, (0 + 1) * 2000);使用 GitHub Copilot Labs 中的 Brushes → Custom 功能，將以下的程式選取起來：
interval_ids.push(setInterval(function(){
let num = random_number();
balls[0].innerHTML = '<span>' + num + '</span>';
// 獎號放到 lottery_result 陣列中第1個
lottery_result[0] = num;
}, 100));
setTimeout(function(){
clearInterval(interval_ids[0]);
}, (0 + 1) * 2000);然後 提示語(Prompt) 輸入：
將選取起來的這段程式，依據 balls 變數來跑迴圈，並將 0 改成迴圈的索引值完成的原始碼如下：
for(let i = 0; i < balls.length; i++){
interval_ids.push(setInterval(function(){
let num = random_number();
balls[i].innerHTML = '<span>' + num + '</span>';
// 獎號放到 lottery_result 陣列中第1個
lottery_result[i] = num;
}, 100));
// 設定 2 秒鐘之後，停掉 setInterval 的執行
setTimeout(function(){
clearInterval(interval_ids[i]);
}, (i + 1) * 2000);
}「開獎 GO」按鈕若連續點擊多下，看看發生什麼事？
在「開獎 GO」按鈕點擊之後，撰寫以下註解：
// 將 lottery_result 陣列清空，且按鈕不可點擊，將 this 放到另個變數叫做 that完成的原始碼如下：
lottery_result = [];
this.disabled = true;
let that = this;然後在 setTimeout 的匿名函式中，裡面的最後面，撰寫以下註解：
// 如果是最後一個，就讓按鈕可以點擊完成的原始碼如下：
if(i === balls.length - 1){
that.disabled = false;
}完成。