当前位置:主页 > javascript教程 >

JavaScript实现计数器基础方法

发布:2022-06-17 07:26:11 58


我们帮大家精选了JavaScript相关的编程文章,网友范问薇根据主题投稿了本篇教程内容,涉及到js、计数器相关内容,已被409网友关注,下面的电子资料对本篇知识点有更加详尽的解释。

本文实例为大家分享了js实现计数器的具体代码,供大家参考,具体内容如下

通过使用 JavaScript,设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行。称之为计时事件。

在 JavaScritp 中使用计时事件是很容易的,两个关键方法是:

setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
setTimeout() - 暂停指定的毫秒数后执行指定的代码

Note: setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法。在这里只介绍了setTimeout()方法;

<!DOCTYPE html>
<html>

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

      function timedCount() {
        document.getElementById('txt').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>

效果:

JavaScript实现计数器基础方法

点击开始则会从0开始计数,停止计时则会暂停在那个时刻,再点击开始则会继续累加计数...但是这个程序有一个小bug,当不停的点击开始计时,计时的速度会增加,而且点击一次停止计时不会停止,要响应的点击很多次才可以停止.....


参考资料

相关文章

  • JavaScript中Date类型详解

    发布:2020-01-15

    下面小编就为大家带来一篇JavaScript:Date类型全面解析。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧,祝大家游戏愉快哦


  • jQuery中read和JavaScript中的onload函数的区别总结

    发布:2019-11-12

    这篇文章主要介绍了jQuery中的read和JavaScript中的onload函数的区别,这两个函数在web编程中是最常用的,一定要搞清楚它们的区别,需要的朋友可以参考下


  • javascript的this关键字知识点总结

    发布:2020-03-12

    这篇文章主要介绍了javascript的this关键字的用法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧


  • Javascript实现的机器学习类库的原理

    发布:2019-09-25

    本文介绍了前端Javascript实现的机器学习类库,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧


  • 详解JavaScript 中的 this是如何工作的

    发布:2020-01-28

    这篇文章主要介绍了JavaScript 中的 this 工作原理,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下


  • JavaScript原生数组Array的用法总结

    发布:2019-11-25

    在入门Vue时, 列表渲染一节中提到数组的变异方法, 其中包括push(), pop(), shift(), unshift(), splice(), sort(), reverse(), 而concat()和slice()不属于变异方法. 在这里就复习一下Array所提供的这几个方法的使用


  • JavaScript中Array的用法及实例内容

    发布:2021-06-16

    string和array作为javascript内置对象,其中许多方法无论是在开发过程中,还是在面试的时候都有机会被面试官问到,下面这篇文章主要给大家介绍了关于JavaScript中Array方法你该知道的正确打开方法,


网友讨论