防疫計劃！從今日開始，我會開啟JavaScript和Python的實作系列，透過實作一些簡單的功能讓大家慢慢學習！而今天就從JavaScript的計時器功能開始吧，今天會製作的是簡化版，讓大家先理解JavaScript的運作方式！
首先要學習JavaScript之前，你必須一定要有Html和CSS的基礎，如果不是很了解以下有幾篇文章可以幫助你，其中也包含之前的Python爬蟲教學喔！
https://tw.alphacamp.co/blog/html-css-web-design
前置作業
安裝Visual Studio Code
首先我會建議你安裝VS Code，這是撰寫JavaScript最好的IDE，詳細你可以參考下面這個網站
https://tw.alphacamp.co/blog/visual-studio-code-editor-tutorial-and-extensions
導入BootStrap （非必要）
BootStrap對於後端工程師來說無疑是個福音，不想要自己慢慢設計前端，但在呈現上面又不想要自己的網站太醜，那選BootStrap就對了，這個作品會用到一點點的BootStrap來設計物件，但如果你覺得太麻煩，他並不是我們要教學的內容，也不會因為沒有裝就實現不了功能喔！ 關於安裝，一樣參考下面這個網站
https://www.runoob.com/bootstrap4/bootstrap4-install.html
實作程式
首先我們要先將我們需要的元素設計出來，之後在替他們補上JavaScript的邏輯，而我們會需要的有
- 讓使用者輸入自己想要的秒數-Input欄位
- 讓使用者開始計時的按鈕- Button欄位
- 使用者實際看到倒數計時的計時器-Span欄位
<!doctype html>
<html lang="en">
<head>
<title>JavaScript教學-計時器</title>
</head>
<body>
<h1>JavaScript教學-計時器</h1>
<div>
<input
id = "setSecond"
/>
</input>
<button
onclick = "startCounting()"
>確認</button>
</div>
<span style="color:red">時間計數：<span id="time">0小時0分0秒</span>
上述都是基本的Html內容，但不同的是，大家可以看到id這個方法，如果只學過HTML和CSS，應該會知道那是用來接受CSS的方法，但此處不一樣，我們要開始有一個給標籤屬性命名的習慣，因為那是我們接下來透過JavaScript去找到這些我們要接受變數、改變內容的名字，所以上面可以看到input欄位多了setMinute的id、span欄位多了check_i的id，這樣待會就可以使用JavaScript的方法去找到這些標籤了！
得到使用者所輸入的秒數
我們接下來需要透過使用流程來加上JavaScript的邏輯，所以首先是我們需要得到使用者輸入的秒數，先在原本的程式碼中加入這個部分，執行看看！
<script type="text/javascript">
let SetMinute = 0;
setMinute = document.getElementById("setMinute").value
console.log(setMinute)
這邊就要講到接下來文章中最重要的東西，也就是document.getElementById，如果你看過搶購機器那篇文章的話，就會發現這好像是大同小異的東西，恭喜你猜對了！這邊我們透過getElementById這個函式抓取了上面Input欄位的內容，並且利用.value得到裡面輸入的內容，這樣我們就可以得到使用者輸入要到計時的秒數了，之後我們再透過點擊按鈕的onclick去觸發function，onclick可以直接連結JavaScript裡我們寫好的函式，並且直接做執行，這是一個很好用的功能，我們將上述講的內容打包，並且加入一些小細節，像下面這樣
<button
onclick = "startCounting()"
>確認</button>
<script type="text/javascript">
let SetSecond = 0; //使用者所輸入的秒數，因為等等要用在倒數計時所以設置全域變數
function startCounting(){
setSecond = document.getElementById("setSecond").value //接受變數
console.log(setSecond) //JavaScript的print功能
SetSecond = parseInt(setSecond) //將得到的字串轉換為數字
}
看一下應該要得到的結果
可以看到右下角的確接受了使用者輸入的變數惹！
倒數計時功能
計時器的重點功能就在這裡了（廢話），我們要怎麼實現倒數計時功能呢，首先就是要先了解setInterval（）這個函式，我們執行以下的操作
<script type="text/javascript">
let timer = 0;
timer = window.setInterval("startCounting()", 1000); //此為展示用，實際是下面那行
//timer = window.setInterval("Check_Time()", 1000);
會在console裡面發現發現startCounting不斷的被執行，且是每隔一秒一次，這就是setInterval的作用，可以自己設定秒數，此處就是1000毫秒 = 1秒 ，剛好跟倒數計時的每秒是一樣的，並且設定要執行的函式，而我們設定的當然不是startCounting，而是接下來做到計時的函式，所以接下來我們只需要將顯示倒計時的邏輯寫好就可以完成功能了，我們看下面
<script type="text/javascript">
function Check_Time() {
SetSecond -= 1;
if(SetSecond === 0){ //時間到了
alert("時間到了")
clearInterval(timer)
return
}
console.log(SetSecond)
const time = document.getElementById("time");
const Hour = Math.floor(SetSecond / 3600);
const Minute = Math.floor(Math.floor(SetSecond % 3600) / 60);
const Second = SetSecond % 60;
time.innerHTML = Hour + "小時" + Minute + "分" + Second + "秒";
}
判斷是否時間到
此處比較長我們慢慢講解，首先每次執行的時候，都一定要判斷時間是否到了，這樣在完成的時候我們才能夠停止計時，而怎麼判斷呢，首先我們將second-1，代表每秒過去了，再來我們必須要檢查，時間是不是已經等於0了，這樣才能提醒使用者時間已經到了，而如果時間到了，我們就使用JavaScript的alert()，讓使用者看到彈出視窗，並且透過clearInterval來暫停每秒會執行的函式，這樣就會整個停下來了，之後我們做return，避免程式繼續跑下去，到這邊是判斷時間到的部分。
時間的段落
接下來我們只要透過數學公式將使用者輸入的秒數換成小時、分、秒，並將它們組合在一起，像上述的那樣，最後一樣再次抓取顯示倒數計時欄位的Id，這邊會看到innerHTML這個用法，這是用來抓取標籤之間文字的方法，我們用這個方法取代掉最上面的0時0分0秒，就可以完成文字的替換了，我們將倒數計時功能的程式碼片段合起來就會像是下面這個樣子
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<h1>JavaScript教學-計時器</h1>
<div style="margin:0px auto;">
<input
id="setSecond"
/>
</input>
<button
onclick = "startCounting()"
>確認</button>
</div>
<span id="Check_Txt" style="color:red">時間計數：<span id="time">0小時0分0秒</span>
<script type="text/javascript">
let timer = 0;
let SetSecond = 0; //使用者所輸入的秒數，因為等等要用在倒數計時所以設置全域變數
function startCounting(){
setSecond = document.getElementById("setSecond").value //接受變數
console.log(setSecond) //JavaScript的print功能
SetSecond = parseInt(setSecond) //將得到的字串轉換為數字
//開始倒計時
timer = window.setInterval("Check_Time()", 1000);
}
function Check_Time() {
SetSecond -= 1;
if(SetSecond === 0){ //時間到了
alert("時間到了")
clearInterval(timer)
return
}
console.log(SetSecond)
const time = document.getElementById("time");
const Hour = Math.floor(SetSecond / 3600);
const Minute = Math.floor(Math.floor(SetSecond % 3600) / 60);
const Second = SetSecond % 60;
time.innerHTML = Hour + "小時" + Minute + "分" + Second + "秒";
}
</script>
到這裡，我們就完成了一個簡化版的計時器，當然這個計時器離成品還有一段距離，不過此篇文章主要是要先讓大家透過這個理解了解JavaScript和Html是怎麼做互動的，以下是Demo! 有問題都可以在下方留言喔，感謝你耐心看到這裡！
