Hi，大家好，我是Tony，是一個對於JavaScript有些概念的新手。

挑戰第29天，倒數一天了！
今天來做一個比較難的挑戰，實作練習，做出一個碼表計時網頁。
由於彭彭老師的系列影片在昨天到一個段落了，
這次我另外找到一個Youtuber 程式柴 的內容來學習。
應為我還不是很熟，所以會照著影片內容一步一步學習。

今天的學習內容是：JavaScript 實作練習- 製作碼表

學習內容來自
CodeShiba 程式柴【 JavaScript 教學 】 實作練習 - JS 碼錶
教學影片
https://www.youtube.com/watch?v=d8jGHjYlwBs&list=PLpZ8gOBZmTy5p5l55u-Kup74LLH8cJCnB&index=27
教學檔案下載
https://github.com/CodeShibaGo/js-tutorial

昨天的學習內容：[Day 28] JavaScript 物件 淺拷貝、深拷貝(Copy)
https://ithelp.ithome.com.tw/articles/10347870

1. 開啟實作練習教材

程式柴老師的教材分成brgin跟solution兩個部分，
begin是尚未寫完成的題目內容，
solution是已經完成的範例內容。
很貼心可以讓學習者也能先看到完成後是什麼樣子，
除此之外，HTNL與CSS的部分也都先寫好了，我就直接用了。
P.S. 我下載的這份教材begin的部分已經寫完，我就是直接砍掉再重新練習。

藉由之前學到的內容，
可以看到教材使用模組的方式來分別撰寫JavaScript與CSS的內容，
未來自己在實作時應該也會常常遇到了。

進入begin中的script.js檔案中，
看得到畫面如下：

程式碼如下：

let seconds = 0
let m_seconds = 0
const displayMSeconds = document.getElementById('m_seconds')
const displaySeconds = document.getElementById('seconds')
const buttonStart = document.getElementById('button-start')
const buttonStop = document.getElementById('button-stop')
const buttonReset = document.getElementById('button-reset')
let interval

// 綁定 buttonStart 按鈕的觸發事件
buttonStart.onclick = () => {
  
}

// 綁定 buttonStop 按鈕的觸發事件
buttonStop.onclick = () => {
  
}

// 綁定 buttonReset 按鈕的觸發事件
buttonReset.onclick = () => {
  
}

// 碼錶讀取方法
const timer = () => {
  
}

2. 第一區塊，buttonStart 按鈕的觸發事件

在結果頁面中我們有三個按鈕，
Start：點擊後開始計時
Stop：點擊後暫停計時
Reset：碼表歸零

第一部分就是要來寫我們的Start按鈕。
在JavaScript中，1000代表1秒鐘
直接看與語法：

// 綁定 buttonStart 按鈕的觸發事件
buttonStart.onclick = () => {
  interval=setInterval(timer,10)
}

寫入setInterval，語法意義是*設定每過一段時間，就自動執行某個函數。
第一個放timer,10表示每次跑碼表的單位都是從10/1000秒

3. 第二區塊，buttonStop 按鈕的觸發事件

Stop：點擊後暫停計時
運用到clearInterval語法，停止前面的setInterval繼續執行。
語法：

// 綁定 buttonStop 按鈕的觸發事件
buttonStop.onclick = () => {
  clearInterval(interval)
}

4. 第三區塊，buttonReset 按鈕的觸發事件

Reset：碼表歸零
一樣用clearInterval語法，但還要把秒數、毫秒歸零。
除了程式內要歸零，頁面顯示也要靠DOM去設定歸零。

// 綁定 buttonStop 按鈕的觸發事件
// 綁定 buttonReset 按鈕的觸發事件
buttonReset.onclick = () => {
  clearInterval(interval)
  seconds=0 //秒數歸零
  m_seconds=0 //毫秒歸零
  displayMSeconds.innerHTML=`0${m_seconds}` //網頁毫秒歸零
  displaySeconds.innerHTML=`0${seconds}` //網頁秒數歸零
}

5. 第四區塊，網頁顯示碼表讀取方式

由於我們前面的設置，後台已經可以讀取到碼表在運作了，
但目前還沒有辦法在網頁顯示出來。
我們希望在網頁的00:00裡面印出秒數，

看到最上面，我們宣告
displayMSeconds是代表顯示毫秒，
displaySeconds代表顯示秒數，

const displayMSeconds = document.getElementById('m_seconds') //顯示毫秒
const displaySeconds = document.getElementById('seconds') //顯示秒數

再用上innerHTML語法去帶入程式，
然後因為要讓毫秒進位到秒數，
在寫一個if判斷式，當毫秒大於99時，換秒數進1，讓毫秒歸零，再繼續跑。

// 碼錶讀取方法
const timer = () => {
  m_seconds++ //讓毫秒運作
  
  //如果毫秒比9小，就顯示前方有零(為了毫秒顯示09而不是9)
  if (Number(m_seconds)<=9){
    displayMSeconds.innerHTML=`0${m_seconds}`
  }
  
  //如果毫秒比9大，就顯示毫秒本身(為了毫秒顯示10而不是010)
  if (Number(m_seconds)>9){
    displayMSeconds.innerHTML=`${m_seconds}`
  }
  
  //如果毫秒大於99，換秒數開始跑，讓毫秒歸零，再繼續跑。
  if(m_seconds>99){
      seconds++;
      displaySeconds.innerHTML=`0${seconds}`
      m_seconds=0
      displayMSeconds.innerHTML=`0${m_seconds}`
  }
  
  //如果秒數大於9，澤顯示秒數本身(為了秒數顯示10而不是010)
  if (Number(seconds) > 9) {
    displaySeconds.innerHTML = seconds
  }
}

終於完成碼表製作了！
來看一下做出來的碼表長什麼樣子吧~
成果展示 (點擊Youtube影片觀看)

以上就是今天的練習內容，
算是這段時間的一個挑戰，
小小總結這陣子學習的內容。
明天即將進入挑戰最後一天，應該會是個總結內容。
也非常感謝一路看到這一篇的大家，
看到每一篇文章的觀看數成長，與高手路過的留言我都覺得很開心。
謝謝大家，我們明天見！