JS implements the effect of pausing the stopwatch timer (detailed graphic explanation)

JavaScript is an indispensable part of front-end development. Many effects cannot be achieved without JS. Friends who are learning JavaScript, can you use JS to make a stopwatch timer? This article will tell you how to use JS to achieve the effect of a stopwatch timer, and click the button to stop timing. Finally, I will share the code of the js stopwatch timer with you. Friends who are interested can refer to it.

Writing a stopwatch timer with JS requires a lot of JavaScript knowledge, such as click events, functions, if functions, etc. If you are unclear, you can refer to the relevant articles on the PHP Chinese website, or visit JavaScript video tutorial, you must learn the basics well!

Detailed example: How to use JavaScript to make a stopwatch timer, and you can click the button to stop the timer.

HTML part:

In the form form, use input to create a start timing button (click the button to start timing, the time is in seconds), and a stop button (click to stop timing), A text box (used to display time), the specific code is as follows:

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

The page has been set up, and then JavaScript is used to achieve the effect. Give the start button and the stop button a click event respectively. When the click stops, the timing is paused (the time is not reset after stopping). Use setTimeout to set the timing unit to seconds. The specific code is as follows:

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

Effect diagram:

The effect of the JavaScript stopwatch timer is as shown in the picture above. Only one picture was taken above. You can try it to see if your code can achieve the timing effect. The tutorial is more detailed, I hope it can help you!

For more related tutorials, please visit JavaScript Chinese Reference Manual

The above is the detailed content of JS implements the effect of pausing the stopwatch timer (detailed graphic explanation). For more information, please follow other related articles on the PHP Chinese website!