编程 Javascript

JavaScript实现计数器基础方法

Posted in Javascript onOctober 10, 2017

本文实例为大家分享了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实现计数器基础方法

- Author -

Cl_Daisy

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JavaScript中的new的使用方法与注意事项

May 16 Javascript

js监听表单value的修改同步问题，跨浏览器支持

Dec 31 Javascript

JavaScript DOM 学习第五章表单简介

Feb 19 Javascript

document.createElement()用法及注意事项(ff下不兼容)

Mar 13 Javascript

jQuery构造函数init参数分析

May 13 Javascript

JavaScript声明变量名的语法规则

Jul 10 Javascript

jQuery绑定事件的几种实现方式

May 09 Javascript

jQuery简单实现列表隐藏和显示效果示例

Sep 12 Javascript

详解Vue.js入门环境搭建

Mar 17 Javascript

jQuery 循环遍历改变a标签的href(实例讲解)

Jul 12 jQuery

webpack3之loader全解析

Oct 26 Javascript

vue Cli 环境删除与重装教程 - 版本文档

Sep 11 Javascript

JS实现合并json对象的方法

Oct 10 #Javascript

jQuery实现的form转json经典示例

Oct 10 #jQuery

JS实现websocket长轮询实时消息提示的效果

Oct 10 #Javascript

JavaScript中错误正确处理方式小结你用对了吗

Oct 10 #Javascript

vue.js实现简单轮播图效果

Oct 10 #Javascript

seajs中最常用的7个功能、配置示例

Oct 10 #Javascript

SeaJS中use函数用法实例分析

Oct 10 #Javascript