JS はストップウォッチ タイマーの一時停止の効果を実装します (詳細な図による説明)

JavaScript はフロントエンド開発に不可欠な部分であり、JS なしでは多くの効果を実現できません。JavaScript を学習している皆さん、JS を使ってストップウォッチ タイマーを作成できますか?この記事では、JS を使用してストップウォッチ タイマーの効果を実現し、ボタンをクリックしてタイミングを停止する方法について説明します。最後に、JS ストップウォッチ タイマーのコードを共有します。興味のある方は参考にしてください。

JS でストップウォッチ タイマーを作成するには、クリック イベント、関数、if 関数など、多くの JavaScript の知識が必要です。不明な場合は、PHP 中国語 Web サイトの関連記事を参照するか、 JavaScript ビデオ チュートリアル にアクセスして、基本をよく学ぶ必要があります。

詳細な例: JavaScript を使用してストップウォッチ タイマーを作成する方法。ボタンをクリックするとタイマーを停止できます。

HTML 部分:

フォーム フォームで、入力を使用してタイミング開始ボタン (ボタンをクリックしてタイミングを開始します。時間は秒単位です) と停止ボタン (クリックして開始します) を作成します。ストップ タイミング)、テキスト ボックス (時間を表示するために使用)、具体的なコードは次のとおりです:

<form>
   <input type="button" value="开始计时!" onclick="start()" />
   <input type="text" id="txt" />
   <input type="button" value="停止!" onclick="stop()" />
</form>
<p>单击开始计时按钮，输入框将从0开始一直计时。以秒计算</p>
<p>单击停止按钮，停止计时，再次点击开始按钮，又再次开始计时。</p>

JavaScript 部分:

ページがセットアップされ、JavaScript が使用されて効果を達成します。開始ボタンと停止ボタンにそれぞれクリック イベントを与えます。クリックが停止すると、タイミングが一時停止されます (停止後に時間はリセットされません)。具体的なコードは次のとおりです。 ##

var c=0;
  var t;
  var timer_is_on=0;
  function timedCount(){
   document.getElementById('txt').value=c;
   c=c+1;
   t=setTimeout(function(){timedCount()},1000);
  }
  function start(){
   if (!timer_is_on){
    timer_is_on=1;
    timedCount();
   }
  }
  function stop(){
   clearTimeout(t);
   timer_is_on=0;
  }

効果図:

JavaScript ストップウォッチ タイマーの効果は、上の写真に示されているとおりです。試してみてください。コードがタイミング効果を達成できるかどうかを確認するには、チュートリアルがより詳細です。お役に立てれば幸いです。

その他の関連チュートリアルについては、

JavaScript 中国語リファレンス マニュアル をご覧ください。

以上がJS はストップウォッチ タイマーの一時停止の効果を実装します (詳細な図による説明)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。