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 相关文章推荐
用javascript自动显示最后更新时间
Mar 15 Javascript
浅析jQuery中常用的元素查找方法总结
Jul 04 Javascript
js实现仿网易点击弹出提示同时背景变暗效果
Aug 13 Javascript
js实现浏览本地文件并显示扩展名的方法
Aug 17 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
Aug 25 Javascript
原生js实现图片层叠轮播切换效果
Feb 02 Javascript
Vue3 源码导读(推荐)
Oct 14 Javascript
vue弹出框组件封装实例代码
Oct 31 Javascript
JavaScript面试中常考的字符串操作方法大全(包含ES6)
May 10 Javascript
vue-model实现简易计算器
Aug 17 Javascript
vue3+typescript实现图片懒加载插件
Oct 26 Javascript
vue基于Teleport实现Modal组件
May 31 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中oci8扩展
2015/06/18 PHP
php一个文件搞定微信jssdk配置
2016/12/12 PHP
baidu博客的编辑友情链接的新的层窗口!经典~支持【FF】
2007/02/09 Javascript
非常好用的JsonToString 方法 简单实例
2013/07/18 Javascript
Javascript判断图片尺寸大小实例分析
2014/06/16 Javascript
JS实现的5级联动Select下拉选择框实例
2015/08/17 Javascript
Highcharts学习之坐标轴
2016/08/02 Javascript
node学习记录之搭建web服务器教程
2017/02/16 Javascript
Vue实现购物车功能
2017/04/27 Javascript
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
2017/09/14 Javascript
Vue+jquery实现表格指定列的文字收缩的示例代码
2018/01/09 jQuery
vue弹窗组件使用方法
2018/04/28 Javascript
修改Vue打包后的默认文件名操作
2020/08/12 Javascript
js实现幻灯片轮播图
2020/08/14 Javascript
[05:28]刀塔密之一:团结则存
2014/07/03 DOTA
[01:04:39]OG vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python实现将n个点均匀地分布在球面上的方法
2015/03/12 Python
Python设计模式之观察者模式简单示例
2018/01/10 Python
详解python中__name__的意义以及作用
2019/08/07 Python
python库matplotlib绘制坐标图
2019/10/18 Python
Python学习笔记之装饰器
2020/08/06 Python
你正在寻找的CSS3 动画技术
2011/07/27 HTML / CSS
BookOutlet加拿大:在网上书店购买廉价折扣图书和小说
2018/10/05 全球购物
请解释流与文件有什么不同
2016/07/29 面试题
软件测试笔试题
2012/10/25 面试题
面试自我介绍演讲稿
2014/04/29 职场文书
民主生活会对照检查材料
2014/09/22 职场文书
公安交警个人对照检查材料思想汇报
2014/10/01 职场文书
小学校长个人总结
2015/03/03 职场文书
个人催款函范文
2015/06/24 职场文书
餐馆开业致辞
2015/08/01 职场文书
新娘婚礼答谢词
2015/09/29 职场文书
《清澈的湖水》教学反思
2016/02/17 职场文书
python实现过滤敏感词
2021/05/08 Python
pytorch中的numel函数用法说明
2021/05/13 Python
未发现nvidia显卡怎么办?Win11系统中未检测到nvidia显卡解决教程
2022/04/08 数码科技