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实现div的显示和隐藏的小例子
Jun 25 Javascript
jquery删除提示框弹出是否删除对话框
Jan 07 Javascript
防止jQuery ajax Load使用缓存的方法小结
Feb 22 Javascript
在JS数组特定索引处指定位置插入元素的技巧
Aug 24 Javascript
简介JavaScript中的setDate()方法的使用
Jun 11 Javascript
JavaScript多图片上传案例
Sep 28 Javascript
jQuery替换节点用法示例(使用replaceWith方法)
Sep 08 Javascript
jQuery Checkbox 全选 反选的简单实例
Nov 29 Javascript
Bootstrap BootstrapDialog使用详解
Feb 17 Javascript
很棒的vue弹窗组件
May 24 Javascript
React实现全局组件的Toast轻提示效果
Sep 21 Javascript
详解Vue数据驱动原理
Nov 17 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函数
2010/01/11 PHP
PHP的SQL注入过程分析
2012/01/06 PHP
PHP中register_globals参数为OFF和ON的区别(register_globals 使用详解)
2012/02/05 PHP
PHP获取当前所在目录位置的方法
2014/11/26 PHP
php实现贪吃蛇小游戏
2016/07/26 PHP
利用PHP访问MySql数据库的逻辑操作以及增删改查的实例讲解
2017/08/30 PHP
JS获取下拉列表所选中的TEXT和Value的实现代码
2014/01/11 Javascript
jQuery可见性过滤器:hidden和:visibility用法实例
2015/06/24 Javascript
JS+CSS实现简单滑动门(滑动菜单)效果
2015/09/19 Javascript
原生js实现数字字母混合验证码的简单实例
2015/12/10 Javascript
Jquery和angularjs获取check框选中的值的方法汇总
2016/01/17 Javascript
浅谈AngularJs指令之scope属性详解
2016/10/24 Javascript
使用JS代码实现点击按钮下载文件
2016/11/12 Javascript
Bootstrap4如何定制自己的颜色和风格
2018/02/26 Javascript
ES6之模版字符串的具体使用
2018/05/17 Javascript
JS工厂模式开发实践案例分析
2019/10/17 Javascript
Python版实现微信公众号扫码登陆
2020/05/28 Javascript
简单了解JavaScript作用域
2020/07/31 Javascript
采用python实现简单QQ单用户机器人的方法
2014/07/03 Python
python实现斐波那契递归函数的方法
2014/09/08 Python
Python中使用SAX解析xml实例
2014/11/21 Python
wxPython中listbox用法实例详解
2015/06/01 Python
Django框架安装方法图文详解
2019/11/04 Python
Anaconda+VSCode配置tensorflow开发环境的教程详解
2020/03/30 Python
伦敦一家西班牙童装精品店:La Coqueta
2018/02/02 全球购物
美赞臣新加坡官方旗舰店:Enfagrow新加坡
2019/05/15 全球购物
《少年王冕》教学反思
2014/04/11 职场文书
爱国主义教育活动总结
2014/05/07 职场文书
雏鹰争章活动总结
2014/05/09 职场文书
党的群众路线批评与自我批评范文
2014/10/16 职场文书
研讨会通知
2015/04/27 职场文书
信用卡工资证明范本
2015/06/19 职场文书
快消品行业营销模式与盈利模式分享
2019/09/27 职场文书
python库sklearn常用操作
2021/08/23 Python
如何Tomcat中使用ipv6地址
2022/05/06 Servers
Android Studio 计算器开发
2022/05/20 Java/Android