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滑动门代码
Dec 19 Javascript
基于jquery的拖动布局插件
Nov 25 Javascript
jQuery中val()方法用法实例
Dec 25 Javascript
jQuery Validate初步体验(二)
Dec 12 Javascript
JavaScript继承模式粗探
Jan 12 Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
Aug 19 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
Nov 25 Javascript
详解JS对象封装的常用方式
Dec 30 Javascript
JS实现隔行换色的表格排序
Mar 27 Javascript
原生JS实现瀑布流插件
Feb 06 Javascript
vue中npm包全局安装和局部安装过程
Sep 03 Javascript
在Vue中使用Echarts可视化库的完整步骤记录
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通过排列组合实现1到9数字相加都等于20的方法
2015/08/03 PHP
php 伪造HTTP_REFERER页面URL来源的三种方法
2016/09/22 PHP
PHP实现对xml进行简单的增删改查(CRUD)操作示例
2017/05/19 PHP
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
2012/02/02 Javascript
鼠标经过tr时,改变tr当前背景颜色
2014/01/13 Javascript
jQuery实现动态添加和删除一个div
2015/08/12 Javascript
jQuery的each循环用法简单示例
2016/06/12 Javascript
Angular中使用ui router实现系统权限控制及开发遇到问题
2016/09/23 Javascript
浅谈struts1 &amp; jquery form 文件异步上传
2017/05/25 jQuery
js中this对象用法分析
2018/01/05 Javascript
探秘vue-rx 2.0(推荐)
2018/09/21 Javascript
JavaScript实现数字前补“0”的五种方法示例
2019/01/03 Javascript
微信小程序实现锚点功能
2019/11/20 Javascript
JavaScript的变量声明与声明提前用法实例分析
2019/11/26 Javascript
vue实现前端分页完整代码
2020/06/17 Javascript
Python中处理unchecked未捕获异常实例
2015/01/17 Python
在Django的URLconf中使用命名组的方法
2015/07/18 Python
python-opencv颜色提取分割方法
2018/12/08 Python
把JSON数据格式转换为Python的类对象方法详解(两种方法)
2019/06/04 Python
pandas的排序和排名的具体使用
2019/07/31 Python
python PIL和CV对 图片的读取,显示,裁剪,保存实现方法
2019/08/07 Python
pyinstaller还原python代码过程图解
2020/01/08 Python
pycharm 更改创建文件默认路径的操作
2020/02/15 Python
Python生成pdf目录书签的实例方法
2020/10/29 Python
Carter’s官方旗舰店:美国受欢迎的婴童服装品牌
2018/01/21 全球购物
美国最大最全的亚洲购物网站:美国亚米网(Yamibuy)
2020/05/05 全球购物
涉外文秘个人求职的自我评价
2013/10/07 职场文书
总经理办公室主任岗位职责
2013/11/12 职场文书
个人廉洁自律承诺书
2014/03/27 职场文书
房屋财产继承协议书范本
2014/11/03 职场文书
大学生简历自我评价2015
2015/03/03 职场文书
2015年幼儿教师个人工作总结
2015/05/20 职场文书
厉行节约工作总结
2015/08/12 职场文书
Python绘制地图神器folium的新人入门指南
2021/05/23 Python
javascript之Object.assign()的痛点分析
2022/03/03 Javascript
vue递归实现树形组件
2022/07/15 Vue.js