[Javascript]倒數計時器CountDown

       是這樣的，公司在一年一度重要的活動會在公司內部網站設定活動倒數計時器。

前輩使用Jsp、Javascript寫了一個簡單的倒數計時器。

我也自己試用HTML、CSS、Javascript寫了一個簡單的倒數計時器。

構想：輸入倒數日期，點擊按鈕，就會開始以天、時、分、秒倒數計時了。

簡單安排版面：

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<meta charset="utf-8">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
<div class="container">
  <div class="box">
    <div class="div_col">
      <label id="lb_title">CountDown <span id="material-icons md-48-time" class="material-icons md-48-time">
          timer
        </span> Timer</label>
    </div>
    <div class="div_col">

      <input type="date" id="ip_date" name="ip_date">
      <span class="material-icons md-48-play" onmousedown="myFunction()">
        &#xe1c4;
      </span>
    </div>
    <div class="div_col">
      <div class="div_col_time">
        <div class="div_col_time_row">Days</div>
        <div class="div_col_time_dt" id="myDays">DD</div>
      </div>
      <div class="div_col_time">
        <div class="div_col_time_row">Hours</div>
        <div class="div_col_time_dt" id="myHours">HH</div>
      </div>
      <div class="div_col_time">
        <div class="div_col_time_row">Minutes</div>
        <div class="div_col_time_dt" id="myMinutes">MM</div>
      </div>
      <div class="div_col_time">
        <div class="div_col_time_row">Seconds</div>
        <div class="div_col_time_dt" id="mySeconds">SS</div>
      </div>
    </div>
    <!-- <label id="mydate">沒出現預料的結果就要檢查一下script!</label>-->

  </div>
</div>
</div>

注入靈魂：Javascript

想法：獲取當下時間和倒數日，兩數相減，直到零。

作法：使用Date()獲取當下時間毫秒和倒數日毫秒，若相減大於0，則表示時間未到，繼續倒數。倒數使用SetInterval()執行每秒倒數。時間到則使用ClearInterval()停止執行。

需注意：獲取毫秒後須再使用parse()轉數字型態，才能將取得的毫秒用在Ｍath()對象。

var sp_time = document.getElementById("material-icons md-48-time");
var myval;
sp_time.style.cssText = "color:blue;";
function myFunction() {
  clearInterval(myval);

  var today = new Date(); //若要測試，可以編輯基準天日期
  var md = document.getElementById("ip_date").value;
  var myday = new Date(md);
  var mresult =
    Date.parse(myday) -
    Date.parse(today) -
    8 * 60 * 60 * 1000; /*input type date is begin at am8:00*/
  //console.log("1");
  myval = setInterval(function () {
    //console.log("2");
    if (mresult > 0) {
      //console.log("3");
      document.getElementById("myDays").innerHTML = Math.floor(
        mresult / (24 * 60 * 60 * 1000)
      );
      document.getElementById("myHours").innerHTML =
        Math.floor(mresult / (60 * 60 * 1000)) % 24;
      document.getElementById("myMinutes").innerHTML =
        Math.floor(mresult / (60 * 1000)) % 60;
      document.getElementById("mySeconds").innerHTML =
        Math.floor(mresult / 1000) % 60;
      mresult = mresult - 1000;
      //console.log("4");
    } else {
      clearInterval(myval);
      document.getElementById("myDays").innerHTML = "D";
      document.getElementById("myHours").innerHTML = "O";
      document.getElementById("myMinutes").innerHTML = "N";
      document.getElementById("mySeconds").innerHTML = "E";
      // document.getElementById("mydate").innerHTML = "時間到！";
      //console.log("5");
    }
    //console.log("6");
  }, 1000);

  //console.log("7");
} //console.log("8");

ps.不用理我的console.log()，只是寫的時候會簡單寫一些log，確認程式有無反應😓

完整範例程式碼

完整的Code可以到我的CodePen參考。 若有錯誤的地方還請多多指教唷。

參考資料：

JavaScript 計時事件 內有說明SetInterval、SetTimeout以及ClearInterval、ClearTimeout。

JavaScript Date（日期） 對象

JavaScript Date 對象

JavaScript Math 對象