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 相关文章推荐
js读写(删除)Cookie实例详解
Apr 17 Javascript
js使用eval解析json(js中使用json)
Jan 17 Javascript
jQuery中animate用法实例分析
Mar 09 Javascript
jQuery Ajax实现跨域请求
Jan 21 Javascript
微信小程序 动态绑定数据及动态事件处理
Mar 14 Javascript
js实现延迟加载的几种方法
Apr 24 Javascript
jquery DataTable实现前后台动态分页
Jun 17 jQuery
Node.js进阶之核心模块https入门
May 23 Javascript
脚手架vue-cli工程webpack的作用和特点
Sep 29 Javascript
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 jQuery
layui prompt 设置允许空白提交的方法
Sep 24 Javascript
Vue如何循环提取对象数组中的值
Nov 18 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中类属性与类静态变量的访问方法示例
2016/07/13 PHP
PHP基于新浪IP库获取IP详细地址的方法
2017/05/04 PHP
JavaScript中__proto__与prototype的关系深入理解
2012/12/04 Javascript
JS代码判断IE6,IE7,IE8,IE9的函数代码
2013/08/02 Javascript
jQuery中.live()方法的用法深入解析
2013/12/30 Javascript
jquery实现漫天雪花飞舞的圣诞祝福雪花效果代码分享
2015/08/20 Javascript
js计算文本框输入的字符数
2015/10/23 Javascript
JavaScript实现经典排序算法之冒泡排序
2016/12/28 Javascript
详解基于angular-cli配置代理解决跨域请求问题
2017/07/05 Javascript
Vue2.0 多 Tab切换组件的封装实例
2017/07/28 Javascript
详解JSONObject和JSONArray区别及基本用法
2017/10/25 Javascript
微信小程序-getUserInfo回调的实例详解
2017/10/27 Javascript
在vscode中统一vue编码风格的方法
2018/02/22 Javascript
express默认日志组件morgan的方法
2018/04/05 Javascript
细说Vue组件的服务器端渲染的过程
2019/05/30 Javascript
使用VueRouter的addRoutes方法实现动态添加用户的权限路由
2019/06/03 Javascript
微信小程序聊天功能的示例代码
2020/01/13 Javascript
Python简单实现两个任意字符串乘积的方法示例
2018/04/12 Python
解决在pycharm中显示额外的 figure 窗口问题
2019/01/15 Python
Python多进程fork()函数详解
2019/02/22 Python
Python2与Python3的区别点整理
2019/12/12 Python
Python如何基于rsa模块实现非对称加密与解密
2020/01/03 Python
用pytorch的nn.Module构造简单全链接层实例
2020/01/14 Python
Html5原创俄罗斯方块(基于canvas)
2019/01/07 HTML / CSS
英国领先的野生鸟类食品供应商:GardenBird
2018/08/09 全球购物
学生会主席就职演讲稿
2014/01/14 职场文书
公务员职业生涯规划书范文  
2014/01/19 职场文书
广告词串烧
2014/03/19 职场文书
法人授权委托书
2014/04/03 职场文书
祖国在我心中演讲稿600字
2014/05/04 职场文书
医生爱岗敬业演讲稿
2014/08/26 职场文书
旷课检讨书范文
2014/10/30 职场文书
2014年网络管理员工作总结
2014/12/01 职场文书
《观潮》教学反思
2016/02/17 职场文书
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
2021/04/29 HTML / CSS
Redis官方可视化工具RedisInsight安装使用教程
2022/04/19 Redis