JavaScript教學-從打造一個計時器裡認識JavaScript!(上)

防疫計劃!從今日開始,我會開啟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的邏輯,而我們會需要的有

  1. 讓使用者輸入自己想要的秒數-Input欄位
  2. 讓使用者開始計時的按鈕- Button欄位
  3. 使用者實際看到倒數計時的計時器-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! 有問題都可以在下方留言喔,感謝你耐心看到這裡!

馬上看—Python爬蟲教學 -試著作自己的搶購機器吧!(上)

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *