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之如何使用回调函数
May 16 Javascript
js返回前一页刷新本页重载页面
Jul 29 Javascript
javascript制作坦克大战全纪录(1)
Nov 27 Javascript
网页收藏夹显示ICO图标(代码少)
Aug 04 Javascript
Backbone.js框架中Model与Collection的使用实例
May 07 Javascript
Knockoutjs 学习系列(二)花式捆绑
Jun 07 Javascript
JS排序之冒泡排序详解
Apr 08 Javascript
vue微信分享 vue实现当前页面分享其他页面
Dec 02 Javascript
小程序实现选择题选择效果
Nov 04 Javascript
实现Vue的markdown文档可以在线运行的方法示例
Dec 11 Javascript
javascript实现摄像头拍照预览
Sep 30 Javascript
纯js+css实现在线时钟
Aug 18 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遍历目录并返回统计目录大小
2014/06/09 PHP
MySql数据库查询结果用表格输出PHP代码示例
2015/03/20 PHP
基于ThinkPHP实现批量删除
2015/12/18 PHP
php英文单词统计器
2016/06/23 PHP
js传值 判断
2006/10/26 Javascript
setTimeout与setInterval在不同浏览器下的差异
2010/01/24 Javascript
JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结
2010/04/13 Javascript
引入JS文件IE6报语法错误或缺少对象问题的解决方法
2014/01/09 Javascript
原生js实现淘宝首页点击按钮缓慢回到顶部效果
2014/04/06 Javascript
22点关于jquery性能优化的建议
2014/05/28 Javascript
jQuery验证插件 Validate详解
2014/11/20 Javascript
js实现缓冲运动效果的方法
2015/04/10 Javascript
jquery中ready()函数执行的时机和window的load事件比较
2015/06/22 Javascript
第一次接触神奇的Bootstrap导航条
2016/08/09 Javascript
jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
2016/09/21 Javascript
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
2018/12/11 Javascript
浅析JS中NEW的实现原理及重写
2020/02/20 Javascript
总结Python编程中三条常用的技巧
2015/05/11 Python
使用Python将数组的元素导出到变量中(unpacking)
2016/10/27 Python
python正则中最短匹配实现代码
2018/01/16 Python
python中的常量和变量代码详解
2018/07/25 Python
python使用tornado实现简单爬虫
2018/07/28 Python
python在回调函数中获取返回值的方法
2019/02/22 Python
详解python实现交叉验证法与留出法
2019/07/11 Python
python3正则模块re的使用方法详解
2020/02/11 Python
python和php哪个更适合写爬虫
2020/06/22 Python
Python+Kepler.gl实现时间轮播地图过程解析
2020/07/20 Python
C++面试题目
2013/06/25 面试题
4S店售后客服自我评价
2014/04/09 职场文书
夫妻分居协议书范本
2014/11/28 职场文书
2014年机关党委工作总结
2014/12/11 职场文书
故宫的导游词
2015/01/31 职场文书
2015年支教教师工作总结
2015/07/22 职场文书
聘任协议书(挂靠)
2015/09/21 职场文书
10大幻兽系恶魔果实 蝙蝠果实上榜,第一自愈能力强
2022/03/18 日漫
详解使用内网穿透工具Ngrok代理本地服务
2022/03/31 Servers