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 注册事件代码
Jan 27 Javascript
Jquery对象和Dom对象的区别分析
Nov 20 Javascript
jQuery中delegate()方法用法实例
Jan 19 Javascript
基于JavaScript实现类似于百度学术高级检索功能
Mar 02 Javascript
jQuery实现图片局部放大镜效果
Mar 17 Javascript
浅谈jQuery效果函数
Sep 16 Javascript
jQuery实现页面顶部下拉广告
Dec 30 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
Feb 07 Javascript
关于angularJs清除浏览器缓存的方法
Nov 28 Javascript
动态加载、移除js/css文件的示例代码
Mar 20 Javascript
简述JS浏览器的三种弹窗
Jul 15 Javascript
vue-property-decorator用法详解
Dec 12 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
咖啡豆要不要放冰箱的原因
2021/03/04 冲泡冲煮
Windows Apache2.2.11及Php5.2.9-1的安装与配置方法
2009/06/08 PHP
php 文章调用类代码
2011/08/11 PHP
PHP以及MYSQL日期比较方法
2012/11/29 PHP
DOM基础及php读取xml内容操作的方法
2015/01/23 PHP
php 将json格式数据转换成数组的方法
2018/08/21 PHP
PHP实现对数字分隔加千分号的方法
2019/03/18 PHP
利用JS重写Cognos右键菜单的实现代码
2010/04/11 Javascript
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
2011/08/28 Javascript
JavaScript按位运算符的应用简析
2014/02/04 Javascript
基于jquery实现在线选座订座之影院篇
2015/08/24 Javascript
angularjs学习笔记之简单介绍
2015/09/26 Javascript
Angular 根据 service 的状态更新 directive
2016/04/03 Javascript
省市选择的简单实现(基于zepto.js)
2016/06/21 Javascript
微信小程序 swiper制作tab切换实现附源码
2017/01/21 Javascript
mui上拉加载功能实例详解
2017/04/13 Javascript
微信小程序module.exports模块化操作实例浅析
2018/12/20 Javascript
Nginx设置为Node.js的前端服务器方法总结
2019/03/27 Javascript
layui实现三级联动效果
2019/07/26 Javascript
js实现盒子滚动动画效果
2020/08/09 Javascript
解决antd Form 表单校验方法无响应的问题
2020/10/27 Javascript
在antd Form表单中select设置初始值操作
2020/11/02 Javascript
[51:17]Mski vs VGJ.S Supermajor小组赛C组 BO3 第三场 6.3
2018/06/04 DOTA
python爬取w3shcool的JQuery课程并且保存到本地
2017/04/06 Python
Python实现PyPDF2处理PDF文件的方法示例
2019/09/25 Python
解决Python二维数组赋值问题
2019/11/28 Python
PyCharm中Matplotlib绘图不能显示UI效果的问题解决
2020/03/12 Python
python自动下载图片的方法示例
2020/03/25 Python
python 6.7 编写printTable()函数表格打印(完整代码)
2020/03/25 Python
python三引号如何输入
2020/07/06 Python
python如何实现图片压缩
2020/09/11 Python
python3.7中安装paddleocr及paddlepaddle包的多种方法
2020/11/27 Python
python opencv实现图像配准与比较
2021/02/09 Python
美国值得信赖的婚恋交友网站:eHarmony
2018/10/04 全球购物
信用社员工先进事迹材料
2014/02/04 职场文书
国家税务局干部作风整顿整改措施
2014/09/18 职场文书