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示例
Aug 29 Javascript
javascript实现点击后变换按钮显示文字的方法
May 13 Javascript
利用AJAX实现WordPress中的文章列表及评论的分页功能
May 17 Javascript
Jquery和JS获取ul中li标签的实现方法
Jun 02 Javascript
jQuery实现右下角可缩放大小的层完整实例
Jun 20 Javascript
第一次接触神奇的Bootstrap基础排版
Jul 26 Javascript
微信小程序 window_x64环境搭建
Sep 30 Javascript
node.js平台下的mysql数据库配置及连接
Mar 31 Javascript
vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)
Apr 20 Javascript
Vue.js组件高级特性实例详解
Dec 24 Javascript
ES2020 已定稿,真实场景案例分析
May 25 Javascript
vue3自定义dialog、modal组件的方法
Jan 04 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的一个登录的类 [推荐]
2007/03/16 PHP
php pack与unpack 摸板字符字符含义
2009/10/29 PHP
对比分析php中Cookie与Session的异同
2016/02/19 PHP
thinkPHP实现将excel导入到数据库中的方法
2016/04/22 PHP
PHP简单实现DES加密解密的方法
2016/07/12 PHP
详细解读php的命名空间(一)
2018/02/21 PHP
php中pcntl_fork创建子进程的方法实例
2019/03/14 PHP
laravel5.1框架model类查询的实现方法
2019/10/08 PHP
BOOM vs RR BO5 第一场 2.14
2021/03/10 DOTA
Extjs gridpanel 出现横向滚动条问题的解决方法
2011/07/04 Javascript
js编码、解码函数介绍及其使用示例
2013/09/05 Javascript
JavaScript中instanceof与typeof运算符的用法及区别详细解析
2013/11/19 Javascript
浅析document.ready和window.onload的区别讲解
2013/12/18 Javascript
angularjs 处理多个异步请求方法汇总
2015/01/06 Javascript
使用js画图之圆、弧、扇形
2015/01/12 Javascript
jQuery scrollFix滚动定位插件
2015/04/01 Javascript
Angular 根据 service 的状态更新 directive
2016/04/03 Javascript
BootStrap使用file-input插件上传图片的方法
2016/09/05 Javascript
JavaScript数组去重的多种方法(四种)
2017/09/19 Javascript
vue中element组件样式修改无效的解决方法
2018/02/03 Javascript
个人小程序接入支付解决方案
2019/05/23 Javascript
IE11下处理Promise及Vue的单项数据流问题
2019/07/24 Javascript
python实现简单ftp客户端的方法
2015/06/28 Python
Python 面试中 8 个必考问题
2018/11/16 Python
python实现转圈打印矩阵
2019/03/02 Python
Django项目主urls导入应用中views的红线问题解决
2019/08/10 Python
Python定时任务框架APScheduler原理及常用代码
2020/10/05 Python
eBay法国购物网站:eBay.fr
2017/10/21 全球购物
Black Halo官方网站:购买连衣裙、礼服和连体裤
2018/06/13 全球购物
沙特阿拉伯电子产品和家用电器购物网站:Black Box
2019/07/24 全球购物
临床医学大学生求职信
2013/09/28 职场文书
测控技术与仪器个人求职信范文
2013/12/30 职场文书
大学生实习证明范文(5篇)
2014/09/18 职场文书
2015年资料员工作总结
2015/04/25 职场文书
2015年反腐倡廉工作总结
2015/05/14 职场文书
2016教师读书思廉心得体会
2016/01/23 职场文书