Project - Lottery Number Generator

Demo

前言

原本是想複習隨機產生不重複的數字，後來想到曾看過有人用隨機產生數字來產生樂透號碼，就順手寫了一個按下按鈕隨機產生數字的功能出來。

簡介

點擊機器的白色旋轉鈕，將隨機產生一組範圍在 1 到 49 之間，且不重複的 7 個數字。

使用工具或技術

Pug
Sass
Gulp
Google Fonts

過程

建立一個變數 lotteryNumbers 為空陣列，預備存放樂透號碼。

使用 Math.random() 產生隨機數字，然後用 indexOf() 去檢查產生的數字是否已存在 lotteryNumbers 陣列中，如果沒有，就推入陣列，直到總共有七個不重複的數字。

javascript

function createNumbers() {
  var randomNumber;
  var lotteryNumbers = [];
  var i = 1;
  while (i <= 7) {
    randomNumber = (Math.floor(Math.random() * 49) + 1).toString().padStart(2, 0)
    if (lotteryNumbers.indexOf(randomNumber) == -1) {
      lotteryNumbers.push(randomNumber);
      i++;
    }
  }
}

原本習慣性使用 for 去做這件事，但執行之後發現，陣列裡面的數字確實沒有重複，不過有時候會不足七個數字。這才想到， for 迴圈會隨著 i 執行七次，但產生重複的數字就不會推到陣列裡，所以有時候數字會不足七個。

於是，就改用 while ，當產生的數字是不重複的， i 才會加一，如此一來，就會確保執行結果確實為七個不重複的數字。

後記

一開始只是想練 JavaScript 的功能而已，所以 HTML 和 CSS 就是隨興寫寫，加個按鈕綁定點擊事件來產生數字。

但寫完之後，覺得這樣實在是單調了些，就憑感覺刻了一個機器出來取代原本的按鈕，讓畫面看起來有趣、活潑一點。

最後再經過一番修改，就是現在看到的樣子啦，出來的樣子果然比較賞心悅目。

最近正好在學習 Gulp ，就用 Pug 跟 Sass 再寫一遍，然後透過 Gulp 寫任務去編譯跟監看。

使用 Gulp 去自動執行各個任務真的很方便，不過跟原本的檔案比起來，檔案數量多出了不少，用在小專案上似乎是大材小用了，但拿來練練手還是不錯的。

本來還打算顯示依產生順序排列，以及依數字大小排序兩種版本，但又覺得這樣看起來會太雜，故作罷。不過，程式碼還是留著，之後如果還有什麼想法再來改寫吧。