ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript でカウンターの基本を実装する方法

JavaScript でカウンターの基本を実装する方法

黄舟
リリース: 2017-10-11 10:18:29
オリジナル
3504 人が閲覧しました

この記事では主にJavaScriptでカウンタを実装する基本的な方法を詳しく紹介します。 、特定の参照値があり、興味のある友人はそれを参照できます

この記事の例では、参考のためにjs実装カウンターの特定のコードを共有します。具体的な内容は次のとおりです

JavaScriptを使用して、設定された時間間隔の後、関数が呼び出された直後ではなく、コードを実行します。それをタイミングイベントと呼びます。

JavaScript でタイミング イベントを使用するのは簡単です。主なメソッドは次の 2 つです:

setInterval() - 指定されたコードを指定されたミリ秒数で継続的に実行します。
setTimeout() - 指定されたミリ秒間一時停止した後、指定されたコードを実行します

注: setInterval() と setTimeout() は、HTML DOM Window オブジェクトの 2 つのメソッドです。ここでは setTimeout() メソッドのみを紹介します


<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <script type="text/javascript">
      var c = 0
      var t

      function timedCount() {
        document.getElementById(&#39;txt&#39;).value = c;
        c = c + 1;
        //创建计时器,在指定周期内循环执行
        t = setTimeout("timedCount()", 1000);
      }

      function stopCount() {
        //清除计时器
        clearTimeout(t);
      }
    </script>
  </head>

  <body>

    <form>
      <input type="button" value="开始计时!" onClick="timedCount()">
      <input type="text" id="txt">
      <input type="button" value="停止计时!" onClick="stopCount()">
    </form>



  </body>

</html>
ログイン後にコピー

効果:

[開始] をクリックするとカウントが 0 から始まり、タイマーを停止するとその時点で一時停止され、もう一度 [開始] をクリックします。累積カウントは継続します ...しかし、このプログラムには小さなバグがあり、タイミングを開始するために連続してクリックすると、タイミングの速度が増加し、タイミングを停止するために一度クリックする必要があります。停止に応じて...

以上がJavaScript でカウンターの基本を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート