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,提升网页加载速度
Nov 14 Javascript
js 剪切板应用clipboardData详细解析
Dec 17 Javascript
js中function()使用方法
Dec 24 Javascript
Document.body.scrollTop的值总为零的快速解决办法
Jun 09 Javascript
AngularJS 输入验证详解及实例代码
Jul 28 Javascript
基于JavaScript实现无限加载瀑布流
Jul 21 Javascript
详解Vue微信公众号开发踩坑全记录
Aug 21 Javascript
Javascript中prototype与__proto__的关系详解
Mar 11 Javascript
Vue中使用vux配置代码详解
Sep 16 Javascript
vue 使用v-for进行循环的实例代码详解
Feb 19 Javascript
js模拟实现百度搜索
Jun 28 Javascript
JavaScript实现点击切换验证码及校验
Jan 10 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关联链接常用代码
2012/11/05 PHP
解析php获取字符串的编码格式的方法(函数)
2013/06/21 PHP
php生成EAN_13标准条形码实例
2013/11/13 PHP
PHP-FPM 的管理和配置详解
2019/02/17 PHP
Laravel 中创建 Zip 压缩文件并提供下载的实现方法
2019/04/02 PHP
javascript下数值型比较难点说明
2010/06/07 Javascript
JQuery分别取得每行最后一列和最后一行的示例代码
2013/08/18 Javascript
jqGrid增加时--判断开始日期与结束日期(实例解析)
2013/11/08 Javascript
JS 获取浏览器和屏幕宽高等信息代码
2014/03/31 Javascript
JavaScript中的Math 使用介绍
2014/04/21 Javascript
JS+CSS实现Li列表隔行换色效果的方法
2015/02/16 Javascript
原生js实现商品放大镜效果
2017/01/12 Javascript
深入理解Vue生命周期、手动挂载及挂载子组件
2017/09/27 Javascript
一秒学会微信小程序制作table表格
2019/02/14 Javascript
angular2 NgModel模块的具体使用方法
2019/04/10 Javascript
JS实现在线ps功能详解
2019/07/31 Javascript
json 带斜杠时如何解析的实现
2019/08/12 Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
2019/11/18 Javascript
JS代码实现页面切换效果
2021/01/10 Javascript
如何在 Vue 表单中处理图片
2021/01/26 Vue.js
[00:32]2018DOTA2亚洲邀请赛iG出场
2018/04/03 DOTA
Python中删除文件的程序代码
2011/03/13 Python
Python GUI编程完整示例
2019/04/04 Python
Mac中PyCharm配置Anaconda环境的方法
2020/03/04 Python
学习Python列表的基础知识汇总
2020/03/10 Python
pytorch 限制GPU使用效率详解(计算效率)
2020/06/27 Python
Python通过Schema实现数据验证方式
2020/11/12 Python
Html5调用手机摄像头并实现人脸识别的实现
2018/12/21 HTML / CSS
Brookstone美国官网:独特新奇产品
2017/03/04 全球购物
eBay爱尔兰站:eBay.ie
2019/08/09 全球购物
电子商务专业实习生自我鉴定
2013/09/24 职场文书
教师节促销活动方案
2014/02/14 职场文书
小学运动会报道稿
2014/10/04 职场文书
刑事辩护授权委托书格式
2014/10/13 职场文书
预防职务犯罪警示教育心得体会
2016/01/15 职场文书
Golang表示枚举类型的详细讲解
2021/09/04 Golang