3.13 實作：樂透開獎與兌獎程式

樂透開獎 + 兌獎 結果示意

第 1 步：網頁檔及介面建立

在 lottery 資料夾下，建立 index.html 檔，原始碼如下 ：

HTML

以下原始碼，請放在 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>

CSS

完成的示意圖：

第 2 步：補 0 的函式

將 script 標籤，放在 body 的結尾標籤之前，然後放入以下的程式，試著解讀與執行：

function str_pad(my_num, digits){
  var my_num_str = my_num.toString(); // 將資料轉成字串，存至變數
  while(my_num_str.length < digits){  // 跑 while 迴圈，只要位數不足 digits，那就補 0
    my_num_str = "0" + my_num_str;
  }
  return my_num_str; // 回傳資料
}

可測試以下：

console.log( str_pad(3, 2) ); // 03
console.log( str_pad(7, 3) ); // 007

第 3 步：建立獎號

所有獎號：01 ~ 49

開獎獎號：總共7個，前6個為一般獎號，最後1個為特別號。都不能重覆。

加入以下的原始碼：

let nums_array = []; // 所有獎號：01 ~ 49
for(let i = 1; i <= 49; i++){
  nums_array.push( str_pad(i, 2) );
}

let lottery_result = []; // 開獎獎號

在 console 中，試著印出 nums_array 確認是否為 ["01", "02"......, "49"]。

第 4 步：寫一個函式，陣列當中隨機挑選一個

nums_array 是一個 01 ~ 49 的陣列，會從中隨機挑選一個，放到 lottery_result 陣列當中。

但是，每次在隨機挑選的時候，應該先排除已經抽過的，排除掉之後，才隨機挑一個。

完成的原始碼如下，請加入以下的函式，試著解讀與測試：

function random_number(){
  // 排除已經抽中的獎號
  let random_arr = nums_array.filter(function(item, i){
    return !lottery_result.includes(item);
  });
  //console.log(random_arr); // 若想看排除之後的新陣列，可這行印出來看
  
  // 隨機挑一個做回傳
  let r = random_arr[Math.floor(Math.random()*random_arr.length)];
  return r;
}

可執行以下程式來測試：

console.log( random_number() );

// 或者手動替 lottery_result 加入已抽過的，然後才隨機抽一個
let lottery_result = ["01", "49"];
console.log( random_number() );

第 5 步：開獎 - click 事件綁定

點擊開獎的按鈕，執行對應的匿名函式。

加入以下的程式：

let btn_lottery_go = document.getElementById("lottery_go");
btn_lottery_go.addEventListener("click", function(){
  alert("test");

});

測試看看，點擊按鈕之後，會跳內建的彈窗。

第 6 步：每隔0.1秒取得亂數，呈現於頁面

沿續上一步的程式，在匿名函式中，加入以下的程式：

// 抓取出頁面上 class 名稱有 ball 的元素
let balls_el = document.querySelectorAll(".ball");

// 此陣列打算用來儲存 setInterval 回傳的 id
let counts_arr = [];

// 每隔 0.1 秒，執行某程式，然後會回傳 id，存在變數 count_start
let count_start = setInterval(function(){
  
  // 將隨機取得的獎號，放到頁面上，以及存至 lottery_result 陣列
  let ball_num = random_number();
  balls_el[0].innerHTML = `<span>${ball_num}</span>`;
  lottery_result[0] = ball_num;
  
}, 100);

// 將 interval id 存至 counts_arr 陣列中
counts_arr.push(count_start);

第 7 步：設定 2 秒鐘之後，停掉 setInterval 的程式

接續上個步驟，在其底下，加入以下的程式：

// setTimeout 函式，然定 2 秒鐘之後欲執行的程式
setTimeout(function(){

  // 停掉 setInterval 的程式，就使用 clearInterval() 函式，並代入 id
  clearInterval(counts_arr[0]); // 下個步驟 0 要改成 i
  
}, (0 + 1) * 2000); // 下個步驟 0 要改成 i

第 8 步：共七個獎號，跑迴圈

將以下這段程式(前兩個步驟已寫過，將 0 改成 i)，跑迴圈：

let count_start = setInterval(function(){
  let ball_num = random_number();
  balls_el[i].innerHTML = `<span>${ball_num}</span>`;
  lottery_result[i] = ball_num;
}, 100);
counts_arr.push(count_start);
setTimeout(function(){
  clearInterval(counts_arr[i]);
}, (i + 1) * 2000);

迴圈程式如下：

for(let i = 0; i < balls_el.length; i++){
  // 以上程式放這
}

問題點

將「開獎 GO」按鈕，點擊多次的話，會發生什麼狀況？試試看。

第 9 步：停掉開獎按鈕的點擊並重新啟用

在「開獎 GO」按鈕的 click 事件觸發之後，先執行以下程式：

lottery_result = []; // 清空
this.disabled = true; // 按鈕會加上 disabled 屬性，所以會停掉 click 事件的觸發
var that = this;

再測試看看之後，若想要讓「開獎 GO」按鈕可以再次點擊的話，就讓開獎完之後，讓按鈕可以再次點擊，只要移除按鈕上的 disabled 屬性即可。所以在 setTimeout 當中，加以下的程式：

if(i == 6){ // 這代表最後的特別獎獎號也開出來了
  that.disabled = false; // 移除按鈕的 disabled 屬性
}

第 10 步：加上兌獎的結構

在原來的 article 標籤，同層的下方，加入以下的原始碼：

<hr>

<article class="container2">
  <div class="go_block">
    <h1>樂透兌獎</h1>
    <button type="button" id="lottery_match">兌獎 GO</button>
  </div>

  <div class="block_parent">
    <div class="block1">
      <h2>請輸入您的獎號：</h2>
      <div class="input_block">
        <input type="text" class="num">
        <input type="text" class="num">
        <input type="text" class="num">
        <input type="text" class="num">
        <input type="text" class="num">
        <input type="text" class="num">
      </div>
    </div>
    <div class="block2">
      <h2>兌獎結果：</h2>
      <p class="result"></p>
    </div>
  </div>
</article>

完成的介面示意：

第 11 步：兌獎按鈕的 click 事件綁定

在 script 標籤裡面的最後面，加入以下的 JS 程式，然後確認點擊「兌獎 GO」按鈕時，有跳 alert 彈窗：

// 兌獎
let btn_lottery_match = document.getElementById("lottery_match");
btn_lottery_match.addEventListener("click", function(){
  alert("tt");
});

第 12 步：抓出使用者輸入的六個獎號

按下「兌獎 GO」按鈕之後，在 console 中印出使用者輸入的六個獎號，在上一步的匿名函式中，執行以下程式：

// 抓出頁面上的 input.num 元素，然後存在 user_nums 變數中
// user_nums 結果會是陣列
let user_nums = document.querySelectorAll("input.num");

// 宣告一個空陣列
let user_nums_arr = [];

// 將使用者輸入的六個獎號(每個獎號都2位數)，放至 user_nums_arr 陣列當中
for(let i = 0; i < user_nums.length; i++){
  user_nums_arr.push(str_pad(user_nums[i].value, 2));
}

// 將 user_nums_arr 變數印出來看
console.log(user_nums_arr);

第 13 步：區分獎號

接續上一步的程式碼，繼續往下執行以下的程式碼：

// 區分獎號
let general_num = [];
let special_num = lottery_result[6];
lottery_result.forEach(function(item, i){
  if(i <= 5){
    general_num.push(item);
  }
});
console.log(general_num); // 六個獎號，放在陣列中
console.log(special_num); // 特別號

第 14 步：判斷獎號有沒有中

接續上一步的程式碼，繼續往下執行以下的程式碼：

let general_count = []; // 獎號若有中，存在此陣列
let special_count = []; // 特別號若有中，存在此陣列

// 使用者輸入的那些獎號，有沒有存在於 general_num 陣列當中，
// 若有，就將該獎號存至 general_count 陣列當中
user_nums_arr.forEach(function(item, i){
  if(general_num.includes(item)){
    general_count.push(item);
  }
});

// 使用者輸入的那些獎號，有沒有特別號，若有，就將特別號存至 special_count 陣列當中
if(user_nums_arr.includes(special_num)){
  special_count.push(special_num);
}

console.log(general_count);
console.log(special_count);

第 15 步：頁面上顯示中獎的結果

接續上一步的程式碼，繼續往下執行以下的程式碼：

let p_el = document.getElementsByClassName("result")[0];
p_el.innerHTML = `獎號中 ${general_count.length} 個(${general_count.join("、")})；特別號中 ${special_count.length} 個(${special_count.join("、")})。`;

完成結果，如下圖的藍字部份：

完成。