如何在 JavaScript 中創建秒錶

JavaScript 秒錶或更確切地說是停止計時器可以使用以時間間隔執行的 JavaScript 計時方法來實現。

JavaScript 計時方法自動執行特定任務，無需單擊按鈕或調用事件即可即時完成。

JavaScript 計時由兩個關鍵方法組成：

• setTimeout("javascript 表達式", 毫秒);
• clearTimeout(setTimeout() 的 ID);

在使用 JavaScript 計時方法時，您需要了解 JavaScript 如何以時間間隔執行語句。

setTimeout() 方法

句法：

 setTimeout( "JavaScript Statements", milliseconds );

setTimeout() JavaScript 計時方法只需要兩個參數：

• 第一個參數：此參數是您要執行的 JavaScript 語句。 字符串函數名稱也可以傳遞給它。
• 第二個參數：指定在第一個參數中執行 JavaScript 語句之前將花費的毫秒數。 它可以簡單地稱為（延遲執行）。

示例：setTimeout() 方法的結構

var setTime = setTimeout( function ( ) { // javascript statements }, 500 ); Or var setTime = setTimeout( "setTimeFunction( )", 500 );

示例：計算毫秒

要使用 JavaScript 事件計時方法，了解如何計算毫秒非常重要。

在一千毫秒 (1000ms) 中有一秒 (1s)

毫秒公式

1000ms = 1s Yms = Xs if 1000ms = 1s 300ms = Xs #cross multiplying 1000ms * Xs = 300ms * 1s X * 1000 = 300 * 1 1000X = 300 X = 300 / 1000 X = 0.3s

這意味著 300 毫秒 = 0.3 秒，而不是最多一秒 (1s)。 您的 JavaScript 語句將以 0.3 秒 (0.3s) 的時間間隔執行。

創建秒錶

使用 JavaScript 計時事件方法，我們可以創建秒錶。

示例：結構

var clear; function stopWatch( ) { // javascript statement here clear = setTimeout( "stopWatch( )", 1000 ); } Or function stopWatch( ) { // javascript statement here clear = setTimeout( function ( ) { // javascript statement here }, 1000 ); } Or var stopWatch = function ( ) { // javascript statement here clear = setTimeout( "stopWatch( )", 1000 ); }

示例：startwatch.js 的 JavaScript 代碼

// initialize your variables outside the function var count = 0; var clearTime; var seconds = 0, minutes = 0, hours = 0; var clearState; var secs, mins, gethours ; function startWatch( ) { /* check if seconds is equal to 60 and add a +1 to minutes, and set seconds to 0 */ if ( seconds === 60 ) { seconds = 0; minutes = minutes + 1; } /* you use the javascript tenary operator to format how the minutes should look and add 0 to minutes if less than 10 */ mins = ( minutes < 10 ) ? ( '0' + minutes + ': ' ) : ( minutes + ': ' ); /* check if minutes is equal to 60 and add a +1 to hours set minutes to 0 */ if ( minutes === 60 ) { minutes = 0; hours = hours + 1; } /* you use the javascript tenary operator to format how the hours should look and add 0 to hours if less than 10 */ gethours = ( hours < 10 ) ? ( '0' + hours + ': ' ) : ( hours + ': ' ); secs = ( seconds < 10 ) ? ( '0' + seconds ) : ( seconds ); // display the stopwatch var x = document .getElementById("timer"); x.innerHTML = 'Time: ' + gethours + mins + secs; /* call the seconds counter after displaying the stop watch and increment seconds by +1 to keep it counting */ seconds++; /* call the setTimeout( ) to keep the stop watch alive ! */ clearTime = setTimeout( "startWatch( )", 1000 ); } // startWatch( ) //create a function to start the stop watch function startTime( ) { /* check if seconds, minutes, and hours are equal to zero and start the stop watch */ if ( seconds === 0 && minutes === 0 && hours === 0 ) { /* hide the fulltime when the stop watch is running */ var fulltime = document.getElementById( "fulltime" ); fulltime.style.display = "none"; /* hide the start button if the stop watch is running */ this.style.display = "none"; /* call the startWatch( ) function to execute the stop watch whenever the startTime( ) is triggered */ startWatch( ); } // if () } // startTime() /* you need to bind the startTime( ) function to any event type to keep the stop watch alive ! */ window.addEventListener( 'load', function ( ) { var start = document .getElementById("start"); start.addEventListener( 'click', startTime ); }); // startwatch.js end

clearTimeout() 方法

要停止計時器，您需要調用 clearTimeout() 計時事件方法，這非常方便。

它只有一個參數：setTimeout() 方法的返回 ID

句法：

 clearTimeout( return ID of setTimeout() );

注意： setTimeout( ) 計時方法總是返回一個值，並且該值被傳遞給 clearTimeout( ) 計時事件方法。

ClearTimeout() 參數

var clearTime = setTimeout("JavaScript 語句", 100);

clearTime 變量通過 setTimeout() 計時方法作為值返回，可以將其作為 ID 傳遞給 clearTimeout( ID ) 以引用它 - clearTimeout( clearTime )；

怎麼運行的

每當在激活的 setTimeout() 計時方法上調用 clearTimeout() 計時方法時，clearTimeout() 計時方法將停止 setTimeout() 計時方法的執行，但不會完全破壞其執行。

在調用 clearTimeout( ) 計時方法期間 setTimeout( ) 計時方法處於空閒狀態，當您重新執行 setTimeout( ) 計時方法時，它將從停止執行的點開始，而不是從頭開始從一開始就。

就像您暫停 mp3 媒體播放器，然後播放它一樣，它會繼續從以前的位置播放，但不會從頭開始。

例如，假設我有一個使用 setTimeout() 計時方法創建的正在運行的計時器，它的起點是 00。我運行計時器，它現在讀數為 41。

如果我在這個活動的 setTimout() 方法上調用 clearTimeout() 計時方法，它會在此期間使其空閒，並且每當我重新執行 setTimeout() 計時方法時，它將從 41 開始計數，而不是從 00 .

要使計時器從 00 開始，您必須重置其計數器。 這就是邏輯。

示例：停止時間 - stopwatch.js

 //create a function to stop the time function stopTime( ) { /* check if seconds, minutes and hours are not equal to 0 */ if ( seconds !== 0 || minutes !== 0 || hours !== 0 ) { /* display the full time before reseting the stop watch */ var fulltime = document .getElementById( "fulltime" ); //display the full time fulltime.style.display = "block"; var time = gethours + mins + secs; fulltime.innerHTML = 'Fulltime: ' + time; // reset the stop watch seconds = 0; minutes = 0; hours = 0; secs = '0' + seconds; mins = '0' + minutes + ': '; gethours = '0' + hours + ': '; /* display the stopwatch after it's been stopped */ var x = document.getElementById ("timer"); var stopTime = gethours + mins + secs; x.innerHTML = stopTime; /* display all stop watch control buttons */ var showStart = document.getElementById ('start'); showStart.style.display = "inline-block"; var showStop = document.getElementById ("stop"); showStop.style.display = "inline-block"; /* clear the stop watch using the setTimeout( ) return value 'clearTime' as ID */ clearTimeout( clearTime ); } // if () } // stopTime() /* you need to call the stopTime( ) function to terminate the stop watch */ window.addEventListener( 'load', function ( ) { var stop = document.getElementById ("stop"); stop.addEventListener( 'click', stopTime ); }); // stopwatch.js end

CSS

 #stopWatch { width: 280px; height: auto; text-align: center; display: block; padding: 5px; margin: 0 auto; } #timer, #fulltime { width: auto; height: auto; padding: 10px; font-weight: bold; font-family: tahoma; display: block; border: 1px solid #eee; text-align: center; box-shadow: 0 0 5px #ccc; background: #fbfbf0; color: darkblue; border-bottom:4px solid darkgrey; } button { cursor: pointer; font-weight: 700; } #fulltime { display:none; font-size:16px; font-weight:bold; }

的HTML

 <!DOCTYPE html> <html lang="en"> <head> <title> JavaScript Stop Watch </title> <style text="text/css"> </style> <script type="text/javascript"> </script> </head> <body> <section> <p> Time : 00:00:00 </p> <button> Start </button> <button> Stop </button> <p> </p> </section> </body> </html>

秒錶完成，這就是它應該的樣子。