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 相关文章推荐
JObj预览一个JS的框架
Mar 13 Javascript
js判断两个日期是否相等的方法
Sep 10 Javascript
javascript中的循环语句for语句深入理解
Apr 04 Javascript
基于Vue.js的表格分页组件
May 22 Javascript
EasyUI学习之Combobox下拉列表(1)
Dec 29 Javascript
js如何判断是否在iframe中及防止网页被别站用iframe嵌套
Jan 11 Javascript
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
JavaScript累加、迭代、穷举、递归等常用算法实例小结
May 08 Javascript
vue-自定义组件传值的实例讲解
Sep 18 Javascript
vue框架中props的typescript用法详解
Feb 17 Javascript
VueQuillEditor富文本上传图片(非base64)
Jun 03 Javascript
浅谈vue中使用编辑器vue-quill-editor踩过的坑
Aug 03 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
一个用于MySQL的PHP XML类
2006/10/09 PHP
Php中用PDO查询Mysql来避免SQL注入风险的方法
2013/04/25 PHP
smarty中常用方法实例总结
2015/08/07 PHP
PHP使用curl制作简易百度搜索
2016/11/03 PHP
php微信开发之图片回复功能
2018/06/14 PHP
php实现的PDO异常处理操作分析
2018/12/27 PHP
一个无限级XML绑定跨框架菜单(For IE)
2007/01/27 Javascript
js定时器怎么写?就是在特定时间执行某段程序
2013/10/11 Javascript
jquery ui resize 中border-box的bug修正
2015/04/26 Javascript
javascript实现查找数组中最大值方法汇总
2016/02/13 Javascript
jQuery 获取跨域XML(RSS)数据的相关总结分析
2016/05/18 Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
2016/08/19 Javascript
jQuery简单获取DIV和A标签元素位置的方法
2017/02/07 Javascript
Angular.js指令学习中一些重要属性的用法教程
2017/05/24 Javascript
Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法
2017/07/09 Javascript
angular实现spa单页面应用实例
2017/07/10 Javascript
vue购物车插件编写代码
2017/11/27 Javascript
JS实现获取word文档内容并输出显示到html页面示例
2018/06/23 Javascript
Python标准库os.path包、glob包使用实例
2014/11/25 Python
在pandas多重索引multiIndex中选定指定索引的行方法
2018/11/16 Python
Python3之手动创建迭代器的实例代码
2019/05/22 Python
Python实现代码统计工具
2019/09/19 Python
Python3与fastdfs分布式文件系统如何实现交互
2020/06/23 Python
keras的三种模型实现与区别说明
2020/07/03 Python
解决CSS3 transition-delay 属性默认值0不带单位失效的问题
2020/10/29 HTML / CSS
荷兰和比利时时尚鞋店:Van Dalen
2018/04/23 全球购物
物业招聘计划书
2014/01/10 职场文书
三八活动策划方案
2014/08/17 职场文书
“四风”查摆问题自我剖析材料
2014/09/27 职场文书
报到证办理个人委托书
2014/10/06 职场文书
办理护照工作证明
2014/10/10 职场文书
行政答辩状范文
2015/05/21 职场文书
单位收入证明范本
2015/06/18 职场文书
导游词之四川武侯祠
2019/10/21 职场文书
Python爬虫中urllib3与urllib的区别是什么
2021/07/21 Python
python数据处理之Pandas类型转换
2022/04/28 Python