7 實作：樂透開獎

完成結果示意

一、網頁檔及介面建立

請再 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>

二、引導 Copilot 寫補 0 的函式

寫註解：

// 寫一個補 0 的函式，名稱叫 str_pad，可以帶兩個參數，第一個是要補 0 的數字，第二個是要補幾位數

完成的原始碼如下：

function str_pad(num, digit){
  let str = num.toString();
  while(str.length < digit){
    str = '0' + str;
  }
  return str;
}

三、引導 Copilot 寫建立獎號的程式

寫註解：

// 產生一個 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 = [];

四、引導 Copilot 寫一個函式，從陣列當中隨機挑一個，並排除抽過的獎號

寫註解：

// 寫一個函式 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];
}

五、引導 Copilot 做按鈕 click 事件上的綁定

寫註解：

// 將 id 為 lottery_go 的按鈕，綁定 click 事件

完成的原始碼如下：

document.querySelector('#lottery_go').addEventListener('click', function(){

});

六、引導 Copilot 每隔 0.1 秒隨機取得號碼，呈現於頁面

在上一步的匿名函式中，寫以下註解：

// 抓取出頁面上所有的 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));

七、引導 Copilot 在 2 秒鐘之後，抽出一個獎號

接續上個步驟，再往下寫註解：

// 設定 2 秒鐘之後，停掉 setInterval 的執行

完成的原始碼如下：

setTimeout(function(){
  clearInterval(interval_ids[0]);
}, (0 + 1) * 2000);

八、引導 Copilot 執行迴圈，共抽出 7 個獎號

使用 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」按鈕若連續點擊多下，看看發生什麼事？

九、引導 Copilot 停止開獎按鈕的點擊，開獎完後再次啟用

在「開獎 GO」按鈕點擊之後，撰寫以下註解：

// 將 lottery_result 陣列清空，且按鈕不可點擊，將 this 放到另個變數叫做 that

完成的原始碼如下：

lottery_result = [];
this.disabled = true;
let that = this;

然後在 setTimeout 的匿名函式中，裡面的最後面，撰寫以下註解：

// 如果是最後一個，就讓按鈕可以點擊

完成的原始碼如下：

if(i === balls.length - 1){
  that.disabled = false;
}

完成。

Previous6.2 引導 Copilot 撰寫縣市區域 JSON 檔 Next8 參考資料

Last updated 2 years ago