JSはストップウォッチタイマーを実装します

この記事の例では、ストップウォッチタイマーを実装するためのJSの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

ストップウォッチタイマーの実装:

効果図は以下のとおりです。

添付のコードをデバッグして実行

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <meta http-equiv="X-UA-compatible" content="ie=edge">
  <title>ドキュメント</title>
  <スタイル>
    #div1 {
      幅: 300ピクセル;
      高さ: 400px;
      背景: スカイブルー;
      マージン: 100px 自動;
      テキスト配置: 中央;
    }
    
    #カウント{
      幅: 200ピクセル;
      高さ: 150px;
      行の高さ: 150px;
      マージン: 自動;
      フォントサイズ: 40px;
    }
    
    #div1 入力 {
      幅: 150ピクセル;
      高さ: 40px;
      背景: オレンジ;
      フォントサイズ: 25px;
      上マージン: 20px
    }
  </スタイル>
</head>

<本文>
  <div id="div1">
    <div id="count">
      <span id="id_H">00</span>
      <span id="id_M">00</span>
      <span id="id_S">00</span>
    </div>
    <input id="start" type="button" value="開始">
    <input id="pause" type="button" value="一時停止">
    <input id="stop" type="button" value="停止">
  </div>
  <スクリプト>
    //ラベルノードの検索操作を簡素化できます var btn = getElementById('btn')
    関数 $(id) {
      document.getElementById(id) を返します。
    }
    window.onload = 関数() {
      //クリックするとビルドとカウントが開始されます var count = 0
      var timer = null //タイマー変数はタイマーの戻り値を記録します setInterval $("start").onclick = function() {
        タイマー = setInterval(関数() {
          カウント++;
          コンソール.log(カウント)
            // ページの時間、分、秒の値を変更する必要があります console.log($("id_S"))
          $("id_S").innerHTML = showNum(count % 60)
          $("id_M").innerHTML = showNum(parseInt(count / 60) % 60)
          $("id_H").innerHTML = showNum(parseInt(count / 60 / 60))
        }, 1000)
      }
      $("一時停止").onclick = 関数() {
          //タイマーをキャンセルする clearInterval(timer)
        }
        //カウントを停止し、データをクリアし、ページ表示データをクリアします$("stop").onclick = function() {
        //タイマーをキャンセルする $("pause").onclick()
          // clearInterval(タイマー)
          //データクリア合計秒数クリアカウント = 0
          // ページ表示データがクリアされました $("id_S").innerHTML = "00"
        $("id_M").innerHTML = "00"
        $("id_H").innerHTML = "00"
      }

      //1桁の数字を処理する関数をカプセル化する function showNum(num) {
        （数値<10）の場合{
          '0' + 数値を返す
        }
        数値を返す
      }
    }
  </スクリプト>
</本文>

</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: