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 相关文章推荐
Jsonp 跨域的原理以及Jquery的解决方案
Jun 27 Javascript
jQuery.extend 函数的详细用法
Jun 27 Javascript
JS函数实现动态添加CSS样式表文件
Dec 15 Javascript
可选择和输入的下拉列表框示例
Nov 05 Javascript
JS交换变量的方法
Jan 21 Javascript
2则自己编写的jQuery特效分享
Feb 26 Javascript
JQuery中两个ul标签的li互相移动实现方法
May 18 Javascript
Javascript 使用ajax与C#获取文件大小实例详解
Jan 13 Javascript
微信小程序 request接口的封装实例代码
Apr 26 Javascript
Vue+webpack项目基础配置教程
Feb 12 Javascript
Vue.js实现数据响应的方法
Aug 13 Javascript
nuxt.js服务端渲染中axios和proxy代理的配置操作
Nov 06 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采集类snoopy详细介绍(snoopy使用教程)
2014/06/19 PHP
Laravel中的chunk组块结果集处理与注意问题
2018/08/15 PHP
PHP钩子实现方法解析
2019/05/21 PHP
encode脚本和normal脚本混用的问题与解决方法
2007/03/08 Javascript
JavaScript中的作用域链和闭包
2012/06/30 Javascript
如何使用Jquery获取Form表单中被选中的radio值
2013/08/09 Javascript
PHP配置文件php.ini中打开错误报告的设置方法
2015/01/09 PHP
js获取数组的最后一个元素
2015/04/14 Javascript
javascript编写贪吃蛇游戏
2015/07/07 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
2015/11/06 Javascript
详解JS面向对象编程
2016/01/24 Javascript
全面解析多种Bootstrap图片轮播效果
2016/05/27 Javascript
简单实现js菜单栏切换效果
2017/03/04 Javascript
vue按需加载组件webpack require.ensure的方法
2017/12/13 Javascript
js判断输入框不能为空格或null值的实现方法
2018/03/02 Javascript
详解Nodejs mongoose
2018/06/10 NodeJs
nodejs简单抓包工具使用详解
2019/08/23 NodeJs
解决新建一个vue项目过程中遇到的问题
2020/10/22 Javascript
[06:09]辉夜杯主赛事开幕式
2015/12/25 DOTA
浅谈python jieba分词模块的基本用法
2017/11/09 Python
python 统计列表中不同元素的数量方法
2018/06/29 Python
python list的index()和find()的实现
2020/11/16 Python
CSS3实现头像旋转效果
2017/03/13 HTML / CSS
Html5 实现微信分享及自定义内容的流程
2019/08/20 HTML / CSS
基于HTML5 Canvas的3D动态Chart图表的示例
2017/11/02 HTML / CSS
新东网科技Java笔试题
2012/07/13 面试题
材料物理专业大学毕业生求职信
2013/10/15 职场文书
水果超市创业计划书
2014/01/27 职场文书
园林技术个人的自我评价
2014/02/15 职场文书
物业保安员岗位职责
2014/03/14 职场文书
代办委托书怎样写
2014/04/08 职场文书
《天游峰的扫路人》教学反思
2014/04/25 职场文书
责任担保书范文
2014/05/21 职场文书
电子商务优秀毕业生求职信
2014/07/11 职场文书
公司授权委托书范文
2014/09/21 职场文书
nginx请求限制配置方法
2021/07/09 Servers