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 相关文章推荐
jQuery-Tools-overlay 使用介绍
Jul 14 Javascript
JS中Iframe之间传值的方法
Mar 11 Javascript
JavaScript中跨域调用Flash的方法
Aug 11 Javascript
JavaScript判断数组是否存在key的简单实例
Aug 03 Javascript
新入门node.js必须要知道的概念(必看篇)
Aug 10 Javascript
微信小程序 获取相册照片实例详解
Nov 16 Javascript
JavaScript对象封装的简单实现方法(3种方法)
Jan 03 Javascript
Node.js数据库操作之连接MySQL数据库(一)
Mar 04 Javascript
JS实现的DOM插入节点操作示例
Apr 04 Javascript
vue2.0获取鼠标位置的方法
Sep 13 Javascript
微信小程序绘制图片发送朋友圈
Jul 25 Javascript
Vue 3自定义指令开发的相关总结
Jan 29 Vue.js
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编程最快明白》第四讲:日期、表单接收、session、cookie
2010/11/01 PHP
php另类上传图片的方法(PHP用Socket上传图片)
2013/10/30 PHP
destoon调用企业会员公司形象图片的实现方法
2014/08/21 PHP
8个PHP程序员常用的功能汇总
2014/12/18 PHP
php中引用&amp;的用法分析【变量引用,函数引用,对象引用】
2016/12/12 PHP
老生常谈PHP面向对象之命令模式(必看篇)
2017/05/24 PHP
PHP生成各种随机验证码的方法总结【附demo源码】
2017/06/05 PHP
php表单习惯用的正则表达式
2017/10/11 PHP
laravel 时间格式转时间戳的例子
2019/10/11 PHP
js 鼠标点击事件及其它捕获
2009/06/04 Javascript
Extjs TriggerField在弹出窗口显示不出问题的解决方法
2010/01/08 Javascript
jquery 学习之二 属性相关
2010/11/23 Javascript
JavaScript判断变量是对象还是数组的方法
2014/08/28 Javascript
JavaScript中匿名函数的用法及优缺点详解
2016/06/01 Javascript
js实现非常棒的弹出div
2016/10/06 Javascript
详解angular脏检查原理及伪代码实现
2018/06/08 Javascript
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
2019/02/27 jQuery
jquery选择器和属性对象的操作实例分析
2020/01/10 jQuery
详解vue组件之间的通信
2020/08/30 Javascript
Python算法之栈(stack)的实现
2014/08/18 Python
Python使用Paramiko模块编写脚本进行远程服务器操作
2016/05/05 Python
python 接口_从协议到抽象基类详解
2017/08/24 Python
Python实现简单的HttpServer服务器示例
2017/09/25 Python
Python实现 PS 图像调整中的亮度调整
2019/06/28 Python
详细分析Python collections工具库
2020/07/16 Python
解决python3.6用cx_Oracle库连接Oracle的问题
2020/12/07 Python
基于css3实现漂亮便签样式
2013/03/18 HTML / CSS
英国最大的在线运动补充剂商店:Discount Supplements
2017/06/03 全球购物
Love, Bonito国际官网:新加坡女装品牌
2021/03/13 全球购物
大学生四年生活自我鉴定
2013/11/21 职场文书
小学生九一八纪念日83周年演讲稿500字
2014/09/17 职场文书
幼儿园见习报告范文
2014/10/30 职场文书
新郎接新娘保证书
2015/05/08 职场文书
年会主持人开场白台词
2015/05/29 职场文书
2016年五一促销广告语
2016/01/28 职场文书
求职自我评价参考范文
2019/05/16 职场文书