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 相关文章推荐
jQuery选择头像并实时显示的代码
Jun 27 Javascript
JS延迟加载(setTimeout) JS最后加载
Jul 15 Javascript
改进版通过Json对象实现深复制的方法
Oct 24 Javascript
离开当前页面前使用js判断条件提示是否要离开页面
May 02 Javascript
通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位
May 05 Javascript
jQuery插件datatables使用教程
Apr 21 Javascript
DWR3 访问WEB元素的两种方法实例详解
Jan 03 Javascript
ES6中新增的Object.assign()方法详解
Sep 22 Javascript
小程序云开发实战小结
Oct 25 Javascript
详解vue配置后台接口方式
Mar 29 Javascript
layui switch 开关监听 弹出确定状态转换的例子
Sep 21 Javascript
js 实现验证码输入框示例详解
Sep 23 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/03 咖啡文化
中英文字符串翻转函数
2008/12/09 PHP
浏览器预览PHP文件时顶部出现空白影响布局分析原因及解决办法
2013/01/11 PHP
Zend Studio使用技巧两则
2016/04/01 PHP
Laravel 5.3 学习笔记之 配置
2016/08/28 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
php微信支付之公众号支付功能
2018/05/30 PHP
Laravel5.1 框架Request请求操作常见用法实例分析
2020/01/04 PHP
推荐40个简单的 jQuery 导航插件和教程(下篇)
2012/09/14 Javascript
jQuery中:first-child选择器用法实例
2014/12/31 Javascript
Javascript简单改变表单元素背景的方法
2015/07/15 Javascript
使用postMesssage()实现iframe跨域页面间的信息传递
2016/03/29 Javascript
JavaScript获取中英文混合字符串长度的方法示例
2017/02/04 Javascript
在React中如何优雅的处理事件响应详解
2017/07/24 Javascript
jQuery中.attr()和.data()的区别分析
2017/09/03 jQuery
3种vue路由传参的基本模式
2018/02/22 Javascript
js+canvas实现滑动拼图验证码功能
2018/03/26 Javascript
js实现点赞按钮功能的实例代码
2020/03/06 Javascript
使用BeautifulSoup爬虫程序获取百度搜索结果的标题和url示例
2014/01/19 Python
python字符串连接的N种方式总结
2014/09/17 Python
利用Pandas 创建空的DataFrame方法
2018/04/08 Python
详解python--模拟轮盘抽奖游戏
2019/04/12 Python
Python使用dict.fromkeys()快速生成一个字典示例
2019/04/24 Python
python批量检查两个对应的txt文件的行数是否一致的实例代码
2020/10/31 Python
澳大利亚当地社区首选的光学商店:1001 Optical
2019/08/24 全球购物
工厂实习感言
2014/01/14 职场文书
《金钱的魔力》教学反思
2014/02/24 职场文书
北京天坛导游词
2015/02/12 职场文书
校园音乐节目广播稿
2015/08/19 职场文书
人事任命书范本
2015/09/21 职场文书
一文帮你理解PReact10.5.13源码
2021/04/03 Javascript
CocosCreator入门教程之网络通信
2021/04/16 Javascript
基于Java的MathML转图片的方法(示例代码)
2021/06/23 Java/Android
Meta增速拉垮,元宇宙难当重任
2022/04/29 数码科技
CSS文本阴影 text-shadow 悬停效果详解
2022/05/25 HTML / CSS
Docker容器harbor私有仓库部署和管理
2022/08/05 Servers