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 相关文章推荐
js 颜色选择器(兼容firefox)
Mar 05 Javascript
flexigrid 参数说明
Nov 23 Javascript
JavaScrip实现PHP print_r的数功能(三种方法)
Nov 12 Javascript
浅析JavaScript中的类型和对象
Nov 29 Javascript
JavaScript中的console.time()函数详细介绍
Dec 29 Javascript
JS判断当前页面是否在微信浏览器打开的方法
Dec 08 Javascript
关于javascript中限定时间内防止按钮重复点击的思路详解
Aug 16 Javascript
JQuery和HTML5 Canvas实现弹幕效果
Jan 04 Javascript
Zepto实现密码的隐藏/显示
Apr 07 Javascript
Javacript中自定义的map.js  的方法
Nov 26 Javascript
Vue结合Video.js播放m3u8视频流的方法示例
May 04 Javascript
小程序数据通信方法大全(推荐)
Apr 15 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
You might like
PHP小技巧搜集,每个PHPer都来露一手
2007/01/02 PHP
PHP运行出现Notice : Use of undefined constant 的完美解决方案分享
2012/03/05 PHP
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
PHP操作路由器实现方法示例
2019/04/27 PHP
Javascript 获取字符串字节数的多种方法
2009/06/02 Javascript
jQuery判断复选框是否勾选的原理及示例
2014/05/21 Javascript
浅谈Javascript中匀速运动的停止条件
2014/12/19 Javascript
javascript实现链接单选效果的方法
2015/05/13 Javascript
jquery插件方式实现table查询功能的简单实例
2016/06/06 Javascript
详解Node.Js如何处理post数据
2016/09/19 Javascript
微信小程序开发探究
2016/12/27 Javascript
详解使用vue脚手架工具搭建vue-webpack项目
2017/05/10 Javascript
JS基于for语句编写的九九乘法表示例
2018/01/04 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
2018/12/05 Javascript
微信小程序实现文字无限轮播效果
2018/12/28 Javascript
js数组去重的方法总结
2019/01/18 Javascript
vue与bootstrap实现简单用户信息添加删除功能
2019/02/15 Javascript
利用原生JavaScript实现造日历轮子实例代码
2019/05/08 Javascript
JavaScript常用8种数组去重代码实例
2020/09/09 Javascript
python list使用示例 list中找连续的数字
2014/01/27 Python
python操作摄像头截图实现远程监控的例子
2014/03/25 Python
PyQt5 pyqt多线程操作入门
2018/05/05 Python
Matplotlib 生成不同大小的subplots实例
2018/05/25 Python
python将print输出的信息保留到日志文件中
2019/09/27 Python
Python生成pdf目录书签的实例方法
2020/10/29 Python
python字符串拼接+和join的区别详解
2020/12/03 Python
举例说明类变量和实例变量的区别
2016/06/30 面试题
机修工岗位职责
2013/11/24 职场文书
企业车辆管理制度
2014/01/24 职场文书
平安建设工作方案
2014/06/02 职场文书
研究生导师推荐信
2015/03/25 职场文书
2015年驾驶员工作总结
2015/04/29 职场文书
2015年机关纠风工作总结
2015/05/15 职场文书
MySQL 角色(role)功能介绍
2021/04/24 MySQL
MySQL 四种连接和多表查询详解
2021/07/16 MySQL
java实现web实时消息推送的七种方案
2022/07/23 Java/Android