JS implementiert den Effekt des Anhaltens des Stoppuhr-Timers (detaillierte grafische Erklärung)

JavaScript ist ein wesentlicher Bestandteil der Frontend-Entwicklung. Freunde, die JavaScript lernen, können Sie JS verwenden, um einen Stoppuhr-Timer zu erstellen. In diesem Artikel erfahren Sie, wie Sie mit JS den Effekt eines Stoppuhr-Timers erzielen und auf die Schaltfläche klicken, um die Zeitmessung zu stoppen. Interessierte Freunde können sich darauf beziehen.

Das Schreiben eines Stoppuhr-Timers mit JS erfordert viele JavaScript-Kenntnisse, z. B. Klickereignisse, Funktionen, If-Funktionen usw. Wenn Sie sich nicht sicher sind, können Sie auf die entsprechenden Artikel auf der chinesischen PHP-Website oder klicken Besuchen Sie das JavaScript-Video-Tutorial und lernen Sie die Grundlagen gut kennen!

Detailliertes Beispiel: So erstellen Sie mithilfe von JavaScript einen Stoppuhr-Timer. Klicken Sie auf die Schaltfläche, um den Timer zu stoppen.

HTML-Teil:

Verwenden Sie im Formular die Eingabe, um eine Schaltfläche zum Starten der Zeitmessung (klicken Sie auf die Schaltfläche, um die Zeitmessung zu starten, die Zeit wird in Sekunden angegeben) und eine Stoppschaltfläche (klicken Sie zum Stoppen) zu erstellen Timing), Ein Textfeld (wird zur Anzeige der Zeit verwendet), der spezifische Code lautet wie folgt:

<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-Teil:

Die Seite wurde erstellt und dann wird JavaScript verwendet, um das zu erreichen Wirkung. Geben Sie der Start-Taste bzw. der Stopp-Taste ein Klickereignis. Wenn der Klick stoppt, wird die Zeit nach dem Stoppen nicht gelöscht. Der spezifische Code lautet wie folgt:

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;
  }

Rendering:

Der Effekt des JavaScript-Stoppuhr-Timers ist wie im Bild oben gezeigt. Sie können es ausprobieren Wenn Ihr Code den Timing-Effekt erzielen kann, hoffe ich, dass er Ihnen helfen kann.

Weitere verwandte Tutorials finden Sie im JavaScript Chinese Reference Manual

Das obige ist der detaillierte Inhalt vonJS implementiert den Effekt des Anhaltens des Stoppuhr-Timers (detaillierte grafische Erklärung). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!