JavaScriptでストップウォッチを作成する方法

公開: 2022-02-16
JavaScriptでストップウォッチを作成する方法

JavaScriptストップウォッチ、またはむしろストップダウンタイマーは、時間間隔で実行されるJavaScriptタイミングメソッドを使用して実装できます。

JavaScriptのタイミングメソッドは、ボタンをクリックしたりイベントを呼び出したりすることなく、その場で実行される特定のタスクを自動化します。

JavaScriptのタイミングは、次の2つの主要なメソッドで構成されています。

  • setTimeout（ "javascript式"、ミリ秒）;
  • clearTimeout（setTimeout（）のID）;

JavaScriptタイミングメソッドを使用する場合、JavaScriptが時間間隔でステートメントを実行する方法を理解する必要があります。

setTimeout（）メソッド

構文：

 setTimeout( "JavaScript Statements", milliseconds );

setTimeout（）JavaScriptタイミングメソッドは、次の2つのパラメーターのみを取ります。

  • 最初のパラメーター：このパラメーターは、実行するJavaScriptステートメントです。 文字列関数名を渡すこともできます。
  • 2番目のパラメーター：最初のパラメーターでJavaScriptステートメントを実行するまでにかかるミリ秒を指定します。 単に（Delay On Execution）と呼ぶことができます。

例：setTimeout（）メソッドの構造

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

例：ミリ秒の計算

JavaScriptイベントタイミングメソッドを使用するには、ミリ秒の計算方法を理解することが非常に重要です。

1000ミリ秒（1000ms）で1秒（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秒であり、最大1秒ではないことを意味します。 JavaScriptステートメントは0.3秒（0.3秒）の時間間隔で実行されます。

ストップウォッチの作成

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（）タイミングイベントメソッドを呼び出す必要があります。これは非常に便利です。

パラメータは1つだけです。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（）タイミングメソッドの実行を停止しますが、実行を完全に破棄することはありません。

setTimeout（）タイミングメソッドは、clearTimeout（）タイミングメソッドが呼び出されている間アイドル状態のままであり、setTimeout（）タイミングメソッドを再実行すると、実行が停止した時点から開始され、最初から開始されることはありません。最初から。

mp3メディアプレーヤーを一時停止してから再生するときと同じように、前の位置から再生を続けますが、最初からやり直すことはありません。

たとえば、setTimeout（）タイミングメソッドを使用して作成された実行中のタイマーがあり、その開始点が00であるとします。タイマーを実行すると、41を読み取っています。

このアクティブなsetTimout（）メソッドでclearTimeout（）タイミングメソッドを呼び出すと、その期間中はアイドル状態になり、setTimeout（）タイミングメソッドを再実行すると、00からではなく41からカウントが開始されます。 。

タイマーを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>

ストップウォッチが完成し、こんな感じになります。

スタートボタンとストップボタンが付いた小さなタイマー