JS实现可暂停秒表计时器的效果（图文详解）-js教程-PHP中文网

JS实现可暂停秒表计时器的效果（图文详解）

yulia

发布： 2018-10-27 13:41:46

原创

12842人浏览过

javascript是前端开发中必不可少的一部分，很多效果的实现离不开js，正在学习javascript的小伙伴，你会用js制作秒表计时器吗？这篇文章就和大家如何用js实现秒表计时器的效果，并且点击按钮可以停止计时，最后将js秒表计时器的代码分享给大家，感兴趣的朋友可以参考借鉴一下。

用JS写可停止的秒表计时器需要用到很多JavaScript知识，比如点击事件，function，if函数等等，如有不清楚的同学可以参考PHP中文网的相关文章，或者访问 JavaScript视频教程，一定要把基础学好啊！

实例详解：如何用JavaScript制作秒表计时器，并且可以点击按钮停止计时。

HTML部分：

在form表单中，用input创建一个开始计时按钮（点击按钮开始计时，时间以秒为单位），一个停止按钮（点击可停止计时），一个文本框（用于显示时间），具体代码如下：

<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让其实现效果。分别给开始按钮和停止按钮一个点击事件，当点击停止后，计时暂停（停止后时间不清零），用setTimeout设置计时单位为秒，具体代码如下：

秒哒

秒哒-不用代码就能实现任意想法

134

查看详情

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

登录后复制

效果图：

图片1.jpg