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的日期格式化算法示例
Jul 31 Javascript
javascript实现根据身份证号读取相关信息
Dec 17 Javascript
微信企业号开发之微信考勤Cookies的使用
Sep 11 Javascript
javascript实现不同颜色Tab标签切换效果
Apr 27 Javascript
Bootstrap选项卡学习笔记分享
Feb 13 Javascript
VUE实现一个分页组件的示例
Sep 13 Javascript
JS中Object对象的原型概念基础
Jan 29 Javascript
解决vue 绑定对象内点击事件失效问题
Sep 05 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
Sep 17 Javascript
详解JavaScript中的函数、对象
Apr 01 Javascript
基于layui框架响应式布局的一些使用详解
Sep 16 Javascript
JS实现炫酷轮播图
Nov 15 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通过获取头信息判断图片类型的方法
2015/06/26 PHP
PHP内置加密函数详解
2016/11/20 PHP
Symfony2针对输入时间进行查询的方法分析
2017/06/28 PHP
PHP命令Command模式用法实例分析
2018/08/08 PHP
PHP实现的敏感词过滤方法示例
2019/03/06 PHP
使用Firebug对js进行断点调试的图文方法
2011/04/02 Javascript
JavaScript高级程序设计(第3版)学习笔记7 js函数(上)
2012/10/11 Javascript
jquery实现顶部向右伸缩的导航区域代码
2015/09/02 Javascript
浅谈javascript中replace()方法
2015/11/10 Javascript
JavaScript隐式类型转换
2016/03/15 Javascript
js 获取本地文件及目录的方法(推荐)
2016/11/10 Javascript
详解JavaScript模块化开发
2016/12/04 Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
2016/12/21 Javascript
Vue.js基础学习之class与样式绑定
2017/03/20 Javascript
vue组件编写之todolist组件实例详解
2018/01/22 Javascript
javascript使用substring实现的展开与收缩文字功能示例
2019/06/17 Javascript
layui-table表复选框勾选的所有行数据获取的例子
2019/09/13 Javascript
es6函数之尾递归用法实例分析
2020/04/25 Javascript
python实现的简单窗口倒计时界面实例
2015/05/05 Python
Python获取暗黑破坏神3战网前1000命位玩家的英雄技能统计
2016/07/04 Python
python对json的相关操作实例详解
2017/01/04 Python
Ubuntu安装Jupyter Notebook教程
2017/10/18 Python
python画图系列之个性化显示x轴区段文字的实例
2018/12/13 Python
关于不懂Chromedriver如何配置环境变量问题解决方法
2019/06/12 Python
Python的bit_length函数来二进制的位数方法
2019/08/27 Python
给大家整理了19个pythonic的编程习惯(小结)
2019/09/25 Python
关于tf.TFRecordReader()函数的用法解析
2020/02/17 Python
html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
2012/12/07 HTML / CSS
中软Java笔试题
2012/11/11 面试题
在Ajax应用中信息是如何在浏览器和服务器之间传递的
2016/05/31 面试题
装潢设计专业推荐信模板
2013/11/26 职场文书
2014年小学教师工作自我评价
2014/09/22 职场文书
mysql 8.0.24 安装配置方法图文教程
2021/05/12 MySQL
Vue过滤器(filter)实现及应用场景详解
2021/06/15 Vue.js
90后经典动画片排行:《数码宝贝》第二,《小鲤鱼历险记》在榜
2022/03/18 日漫
MySQL 数据表操作
2022/05/04 MySQL