js实现通过开始结束控制的计时器


Posted in Javascript onFebruary 25, 2019

本文实例为大家分享了js通过开始结束控制计时器的具体实现代码,供大家参考,具体内容如下

时间戳的使用的可以取消对多次点击事件产生效果的累加,譬如下文,运用时间戳,保证了在多次点击事件后不会对setInterval()中的时间进行叠加。

开始结束运用addEventlistener()来控制开始结束,

实时显示在你要显示的文本内容放置在setInterval()中,可实现实时显示的效果。
不足setInterval()方法所设置的时间并不能保证一直是1秒的,有误差,但是可通过前后Date()的不同控制在一定范围内才可执行,不过这里暂时没有设置这个,有空再补。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>简单计时器</title>
  <style type="text/css">
  input{
    border: 1px solid black;
    text-align: right;
    font-size:20px;
  }
  </style>
</head>
<body>
  <input type="text" id="text" value="0" >秒
  <br>
  <input type="button" value="开始计时" id="btn1">
  <input type="button" value="停止计时" id="btn2">
  <script type="text/javascript">
  var time = 0;
  var seconde=0;
  var btn1 = document.getElementById("btn1");
  var btn2 = document.getElementById("btn2");
  var text = document.getElementById("text");
  function getStyle(elem, prop) {
    if (window.getComputedStyle) {
      return window.getComputedStyle(elem, null)[prop];
    } else {
      return elem.currentStyle[prop];
    }
  }
  var count = 1;//设置时间戳
  btn1.addEventListener("click",showTime)
  function showTime(e) {
    if(count){
      time = setInterval(function () {
        seconde++;
        text.value = seconde;
      }, 1000)
      count =0;
    }
  }
  btn2.addEventListener("click",stopTime)
  function stopTime(){
    clearInterval(time);
    count =1;
  }
  </script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
刷新时清空文本框内容的js代码
Apr 23 Javascript
JScript的条件编译
May 29 Javascript
javascript 语法基础 想学习js的朋友可以看看
Dec 16 Javascript
jquery 表单取值常用代码
Dec 22 Javascript
对于this和$(this)的个人理解
Sep 08 Javascript
javascript获取网页各种高宽及位置的方法总结
Jul 27 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(下)
Apr 21 Javascript
countup.js实现数字动态叠加效果
Oct 17 Javascript
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 jQuery
通过angular CDK实现页面元素拖放的步骤详解
Jul 01 Javascript
JavaScript常用8种数组去重代码实例
Sep 09 Javascript
js面向对象编程OOP及函数式编程FP区别
Jul 07 Javascript
js实现倒计时器自定义时间和暂停
Feb 25 #Javascript
JS module的导出和导入的实现代码
Feb 25 #Javascript
js实现多个倒计时并行 js拼团倒计时
Feb 25 #Javascript
js实现网页同时进行多个倒计时功能
Feb 25 #Javascript
js实现一个页面多个倒计时的3种方法
Feb 25 #Javascript
Vue自定义指令上报Google Analytics事件统计的方法
Feb 25 #Javascript
写一个Vue Popup组件
Feb 25 #Javascript
You might like
读jQuery之二(两种扩展)
2011/06/11 Javascript
jquery将一个表单序列化为一个对象的方法
2014/01/03 Javascript
jQuery实现背景滑动菜单
2016/12/02 Javascript
vue-cli webpack 开发环境跨域详解
2017/05/18 Javascript
详解ES6之用let声明变量以及let loop机制
2017/07/15 Javascript
JS实现点击循环切换显示内容的方法
2017/10/19 Javascript
javascript显示动态时间的方法汇总
2018/07/06 Javascript
Vue2.0生命周期的理解
2018/08/20 Javascript
小程序日历控件使用方法详解
2018/12/29 Javascript
vue 翻页组件vue-flip-page效果
2020/02/05 Javascript
selenium 反爬虫之跳过淘宝滑块验证功能的实现代码
2020/08/27 Javascript
[52:32]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第三场 11.18
2020/11/18 DOTA
Python实现的多线程端口扫描工具分享
2015/01/21 Python
Python线程中对join方法的运用的教程
2015/04/09 Python
Python的collections模块中namedtuple结构使用示例
2016/07/07 Python
python脚本替换指定行实现步骤
2017/07/11 Python
对python模块中多个类的用法详解
2019/01/10 Python
Tensorflow分类器项目自定义数据读入的实现
2019/02/05 Python
Python安装Flask环境及简单应用示例
2019/05/03 Python
Pytorch.nn.conv2d 过程验证方式(单,多通道卷积过程)
2020/01/03 Python
python GUI库图形界面开发之PyQt5多线程中信号与槽的详细使用方法与实例
2020/03/08 Python
Python装饰器实现方法及应用场景详解
2020/03/26 Python
super关键字的用法
2012/04/10 面试题
工地门卫岗位职责
2013/12/30 职场文书
竞选卫生委员演讲稿
2014/04/28 职场文书
我的长生果教学反思
2014/04/28 职场文书
市场推广策划方案
2014/06/02 职场文书
建筑施工安全责任书
2014/07/24 职场文书
工会趣味活动方案
2014/08/18 职场文书
试用期转正后的自我评价
2014/09/21 职场文书
乔迁之喜答谢词
2015/01/05 职场文书
教师个人年终总结
2015/02/11 职场文书
文化苦旅读书笔记
2015/06/29 职场文书
详解Python类和对象内容
2021/06/22 Python
Sql Server之数据类型详解
2022/02/28 SQL Server
Python实现日志实时监测的示例详解
2022/04/06 Python