JavaScript 倒數計時器

Mehvish Ashiq 2023年1月30日 2022年5月10日
  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 值為 secondsminutes 的元素。這個匿名函式用 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 個屬性,分別命名為 totalSecondsstartTimerresetTimerpauseTimerresumeTimer。每個屬性的值都是一個匿名函式,有自己的函式體。

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

例如,this.resumeTimer 表示 this(時鐘)物件的 resumeTimer 屬性。

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

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