JavaScript 倒數計時器

  2. 貼士文章
  3. JavaScript 貼士
  4. JavaScript 倒數計時器
Mehvish Ashiq 2023年1月30日 2022年5月10日
JavaScript JavaScript Timer
  1. 在 JavaScript 中使用 setInterval() 和 Math 函式顯示倒數計時器
  2. 使用 setInterval() 和 pad() 函式顯示 JavaScript Count Up Timer
  3. 使用 jQuery 顯示 JavaScript 計數計時器
  4. 使用物件和屬性顯示 JavaScript Count Up Timer
JavaScript 倒數計時器

本教程向你介紹 JavaScript 倒計時。它使用 setInterval()、pad()、clearInterval() 和 Math.floor() 函式和物件來建立計數計時器。

它還說明了 jQuery 如何幫助你優化程式碼。

在 JavaScript 中使用 setInterval() 和 Math 函式顯示倒數計時器

HTML 程式碼：

<!DOCTYPE html>
<html>
  <head>
    <title>Count Up Timer in JavaScript</title>
  </head>
  <body>
      <div id="count_up_timer">00:00:00</div>
      <button id="stop_count_up_timer" onclick="clearInterval(timerVariable)">Stop Time</button>
  </body>
</html>

CSS 程式碼：

#count_up_timer{
	font-size: 100px;
	font-weight: bold;
	color: darkblue;
}
#stop_count_up_timer{
	background-color:black;
	color:white
}

JavaScript 程式碼：

var timerVariable = setInterval(countUpTimer, 1000);
var totalSeconds = 0;

function countUpTimer() {
  ++totalSeconds;
  var hour = Math.floor(totalSeconds / 3600);
  var minute = Math.floor((totalSeconds - hour * 3600) / 60);
  var seconds = totalSeconds - (hour * 3600 + minute * 60);
  document.getElementById("count_up_timer").innerHTML = hour + ":" + minute + ":" + seconds;
}

輸出：

javascript count up timer - 輸出第一部分

在此程式碼示例中，setInterval() 函式每秒呼叫一次 countUpTimer() 函式（1 秒 = 1000 毫秒）。在 countUpTimer() 函式中，變數 totalSeconds 首先增加 1，然後用於小時、分鐘和秒的轉換。

之後，id 值為 count_up_timer 的第一個元素被選中。HTML 內容 (innerHTML) 被計時器 (hour:minute:seconds) 替換。一旦你點選 Stop Timer 按鈕，倒計時計時器將停止。

setInterval() 函式以給定的時間間隔呼叫一個函式。它需要兩個引數，並且都是必需的。第一個引數是一個函式，另一個是以毫秒為單位的間隔。

但是，setInterval() 方法會一直呼叫該函式，直到視窗關閉或呼叫 clearInterval() 函式。它返回時間的 id，我們可以使用 clearInterval() 函式來停止計時器。

.innerHTML 屬性返回或修改指定元素的 HTML 內容。Math.floor() 將返回最大的整數（小於或等於給定的數字）。

使用 setInterval() 和 pad() 函式顯示 JavaScript Count Up Timer

HTML 程式碼：

<!DOCTYPE html>
<html>
  <head>
    <title>Count Up Timer in JavaScript</title>
  </head>
  <body>
    <h1>Count Up Timer For One Hour</h1>
	<div id = "timer">
	   <span id="minutes"></span>:<span id="seconds"></span>
	</div>
   </body>
</html>

CSS 程式碼：

#timer{
	font-size:100px;
	color:green;
	margin-left:80px;
}

JavaScript 程式碼：

var second = 0;
    function pad ( value ) { return value > 9 ? value : "0" + value; }
    setInterval( function(){
        document.getElementById("seconds").innerHTML=pad(++second%60);
        document.getElementById("minutes").innerHTML=pad(parseInt(second/60,10));
    }, 1000);

輸出：

javascript count up timer - 輸出第二部分

在此示例程式碼中，pad() 函式新增了前導零。它檢查傳遞給它的值是否是單個數字（小於或等於 9），然後新增前導零，否則不是。

setInterval() 函式以特定的時間間隔呼叫給定的函式。間隔必須以毫秒為單位。你可以訪問此連結閱讀。

然後，setInterval() 將呼叫一個匿名函式來獲取 id 值為 seconds 和 minutes 的元素。這個匿名函式用 pad() 函式返回的值替換 innerHTML（HTML 內容）。

parseInt() 函式解析給定的字串引數並返回一個特定 radix 的整數。

使用 jQuery 顯示 JavaScript 計數計時器

HTML 程式碼：

<!DOCTYPE html>
<html>
  <head>
    <title>Count Up Timer in JavaScript</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  </head>
  <body>
    <h1>Count Up Timer For One Hour</h1>
	<div id = "timer">
	   <span id="minutes"></span>:<span id="seconds"></span>
	</div>
   </body>
</html>

CSS 程式碼：

#timer{
	font-size:100px;
	color:green;
	margin-left:80px;
}

JavaScript 程式碼：

var second = 0;
    function pad ( value ) { return value > 9 ? value : "0" + value; }
    setInterval( function(){
        $("#seconds").html(pad(++second%60));
        $("#minutes").html(pad(parseInt(second/60,10)));
    }, 1000);

輸出：

javascript 計數計時器 - 輸出五

如果你想要一個前導零但不想使用 pad() 函式和 jQuery 庫怎麼辦。那麼，以下解決方案適合你。

HTML 程式碼：

<!DOCTYPE html>
<html>
  <head>
    <title>Count Up Timer in JavaScript</title>
  </head>
  <body>
      <div id="count_up_timer">00:00:00</div>
      <button id="stop_count_up_timer" onclick="clearInterval(timerVariable)">Stop Time</button>
  </body>
</html>

CSS 程式碼：

#count_up_timer{
	font-size: 100px;
	font-weight: bold;
	color: darkblue;
}
#stop_count_up_timer{
	background-color:black;
	color:white
}

JavaScript 程式碼：

var timerVariable = setInterval(countUpTimer, 1000);
var totalSeconds = 0;

function countUpTimer() {
  ++totalSeconds;
  var hour = Math.floor(totalSeconds / 3600);
  var minute = Math.floor((totalSeconds - hour * 3600) / 60);
  var seconds = totalSeconds - (hour * 3600 + minute * 60);
  if(hour < 10)
     hour = "0"+hour;
  if(minute < 10)
     minute = "0"+minute;
  if(seconds < 10)
     seconds = "0"+seconds;
  document.getElementById("count_up_timer").innerHTML = hour + ":" + minute + ":" + seconds;
}

輸出：

javascript count up timer - 輸出第三部分

在上面的程式碼中，if 語句用於檢查小時、分鐘和秒。如果它們小於 10，將新增前導零（這意味著它們是個位數）；否則就不會。

你可能已經注意到，我們學習的所有計數計時器都會在程式碼執行後立即啟動。如果我們可以完全控制 JavaScript 倒計時怎麼辦？讓我們也學習一下。

使用物件和屬性顯示 JavaScript Count Up Timer

HTML 程式碼：

<!DOCTYPE html>
<html>
  <head>
    <title>Count Up Timer in JavaScript</title>
  </head>
  <body>
    <div id="timer">
      <span id="minutes">00</span>:<span id="seconds">00</span>
    </div>
    <div id="control">
      <button id="startbtn">START</button>
      <button id="pausebtn">PAUSE</button>
      <button id="resumebtn">RESUME</button>
      <button id="resetbtn">RESET</button>
    </div>
  </body>
</html>

CSS 程式碼：

#timer{
	font-size: 100px;
	font-weight: bold;
}
#control>#startbtn{
	background-color:green;
	color:white;
}
#control>#pausebtn{
	background-color:blue;
	color:white;
}
#control>#resumebtn{
	background-color:orange;
	color:white;
}
#control>#resetbtn{
	background-color:red;
	color:white;
}

JavaScript 程式碼：

var Clock = {
  totalSeconds: 0,
  startTimer: function () {
    if (!this.interval) {
        var self = this;
        function pad(val) { return val > 9 ? val : "0" + val; }
        this.interval = setInterval(function () {
          self.totalSeconds += 1;
          document.getElementById("minutes").innerHTML = pad(Math.floor(self.totalSeconds / 60 % 60));
          document.getElementById("seconds").innerHTML = pad(parseInt(self.totalSeconds % 60));
        }, 1000);
    }
  },
  resetTimer: function () {
    Clock.totalSeconds = null; 
    clearInterval(this.interval);
    document.getElementById("minutes").innerHTML = "00";
    document.getElementById("seconds").innerHTML = "00";
    delete this.interval;
  },
  pauseTimer: function () {
    clearInterval(this.interval);
    delete this.interval;
  },
  resumeTimer: function () {
    this.startTimer();
  },
};

document.getElementById("startbtn").addEventListener("click", function () { Clock.startTimer(); });
document.getElementById("pausebtn").addEventListener("click", function () { Clock.pauseTimer(); });
document.getElementById("resumebtn").addEventListener("click", function () { Clock.resumeTimer(); });
document.getElementById("resetbtn").addEventListener("click", function () { Clock.resetTimer(); });

輸出：

javascript count up timer - 輸出第四部分

在這裡，我們建立了一個名為 Clock 的物件，它具有 5 個屬性，分別命名為 totalSeconds、startTimer、resetTimer、pauseTimer 和 resumeTimer。每個屬性的值都是一個匿名函式，有自己的函式體。

this 關鍵字指的是它所屬的一個物件，並且總是持有一個物件的引用。

例如，this.resumeTimer 表示 this（時鐘）物件的 resumeTimer 屬性。

clearInterval() 函式用於停止計數定時器。請記住，Clock 物件的每個屬性都將作用於點選事件。

Author: Mehvish Ashiq
Mehvish Ashiq avatar Mehvish Ashiq avatar

Mehvish Ashiq is a former Java Programmer and a Data Science enthusiast who leverages her expertise to help others to learn and grow by creating interesting, useful, and reader-friendly content in Computer Programming, Data Science, and Technology.

LinkedIn GitHub Facebook

相關文章 - JavaScript Timer