Dateを使用してJavaScriptでストップウォッチを実装する方法-フロントエンドQ&A-php.cn

Dateを使用してJavaScriptでストップウォッチを実装する方法

PHPz

リリース： 2023-04-21 10:40:10

オリジナル

577 人が閲覧しました

現代社会の発展に伴い、タイマーの役割はますます重要になっています。日常生活でのタイミングでも、スポーツ競技やコンピューター競技でのタイミングでも、ストップウォッチとして実装する必要があります。今回はJavaScriptでDateオブジェクトを使ってストップウォッチを実装する方法を紹介します。

まず、JavaScript の Date オブジェクトを見てみましょう。 Date オブジェクトは、JavaScript で非常に一般的に使用されるオブジェクトで、時刻と日付を表すために使用されます。 new Date() ステートメントを使用して、新しい Date オブジェクトを作成できます。デフォルトでは、new Date() ステートメントを使用すると、現在の時刻と日付が返されます。

以下は、Date オブジェクトを使用して現在時刻を取得する方法を示す例です:

let now = new Date();
console.log(now);

ログイン後にコピー

出力結果は、現在の時刻と日付です。例:

Thu Oct 07 2021 12:08:20 GMT+0800 (中国标准时间)

ログイン後にコピー

現在時刻を取得したら、それを使用してストップウォッチを実装できます。ストップウォッチはタイマーを使用する必要があり、タイミング関数は setInterval() 関数を設定することによって実装されます。以下は、setInterval() 関数を使用して単純なタイマーを実装する方法を示す例です:

let count = 0;
let intervalId = setInterval(function() {
   count++;
   console.log(count);
}, 1000);

ログイン後にコピー

この例では、count 変数を使用して経過した秒数を記録します。 Count は 1 ずつ増加し、コンソールに出力されます。 setInterval() 関数を使用して、intervalId 変数に割り当てました。 setInterval() 関数は、渡された関数を一定の間隔で実行し、後続の操作のために一意の識別子を返します。

次に、ストップウォッチに開始、停止、リセット機能を追加します。以下は、開始、停止、リセットの 3 つのボタンを含む完全な実装であり、正しくタイミングを設定できます。

<html>
<head>
   <title>JavaScript秒表</title>
</head>
<body>
   <h1>JavaScript秒表</h1>
   <div id="clock">00:00:00</div>
   <button id="startBtn">开始</button>
   <button id="stopBtn">停止</button>
   <button id="resetBtn">重置</button>
</body>
<script>
   let intervalId = null;
   let count = 0;
   let clock = document.getElementById('clock');
   let startBtn = document.getElementById('startBtn');
   let stopBtn = document.getElementById('stopBtn');
   let resetBtn = document.getElementById('resetBtn');

   function startClock(){
      intervalId = setInterval(function() {
         count++;
         let hours = Math.floor(count / 3600);
         let minutes = Math.floor((count - hours * 3600) / 60);
         let seconds = count - hours * 3600 - minutes * 60;
         clock.innerHTML = hours.toString().padStart(2, '0') + ':' + 
                           minutes.toString().padStart(2, '0') + ':' + 
                           seconds.toString().padStart(2, '0');
      }, 1000);
   }

   function stopClock(){
      clearInterval(intervalId);
   }

   function resetClock(){
      clearInterval(intervalId);
      count = 0;
      clock.innerHTML = '00:00:00';
   }

   startBtn.addEventListener('click', startClock);
   stopBtn.addEventListener('click', stopClock);
   resetBtn.addEventListener('click', resetClock);
</script>
</html>

ログイン後にコピー

この例では、まず 3 つのボタンを作成し、開始、停止、リセット機能を追加しました。 getElementById() 関数を使用してページ上の HTML 要素を取得し、対応する JavaScript 変数に割り当てます。

startClock() 関数では、setInterval() 関数を使用して時間を計測し、時間計測結果を hh:mm:ss の形式でページに出力します。 Math.floor() 関数を使用して四捨五入し、padStart() 関数を使用して数値を 2 桁の文字列にフォーマットして、ページに簡単に出力できるようにします。 stopClock() 関数とresetClock() 関数では、clearInterval() 関数を使用してタイマーを停止し、カウント値とクロック値をそれぞれリセットします。

JavaScript を使用してストップウォッチを実装したい場合は、この例が役立つはずです。必要に応じてコードを変更および拡張して、より豊富で複雑なタイミング関数を実現できます。さて、今回はここまでです。この記事がお役に立てば幸いです。

以上がDateを使用してJavaScriptでストップウォッチを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。