如何在 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>

秒表完成，这就是它应该的样子。