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 相关文章推荐
JQuery中对服务器控件 DropdownList, RadioButtonList, CheckboxList的操作总结
Jun 28 Javascript
JavaScript自定义DateDiff函数(兼容所有浏览器)
Mar 01 Javascript
使用jQuery快速解决input中placeholder值在ie中无法支持的问题
Jan 02 Javascript
详解Webwork中Action 调用的方法
Feb 02 Javascript
基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
Jun 12 Javascript
利用Vue.js指令实现全选功能
Sep 08 Javascript
jquery点赞功能实现代码 点个赞吧!
May 29 jQuery
JS库之wow.js使用方法
Sep 14 Javascript
Vue代码整洁之去重方法整理
Aug 06 Javascript
基于Element封装一个表格组件tableList的使用方法
Jun 29 Javascript
SSM VUE Axios详解
Oct 05 Vue.js
vue+elementUI实现表格列的显示与隐藏
Apr 13 Vue.js
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
PHP5.3.1 不再支持ISAPI
2010/01/08 PHP
php设计模式小结
2013/02/15 PHP
php内嵌函数用法实例
2015/03/20 PHP
源码分析 Laravel 重复执行同一个队列任务的原因
2017/12/25 PHP
PHP 多任务秒级定时器的实现方法
2018/05/13 PHP
javascript parseInt 函数分析(转)
2009/03/21 Javascript
基于jquery的分页控件(C#)
2011/01/06 Javascript
Firefox中beforeunload事件的实现缺陷浅析
2012/05/03 Javascript
理解javascript定时器中的单线程
2016/02/23 Javascript
AngularJS基础 ng-hide 指令用法及示例代码
2016/08/01 Javascript
jQuery得到多个值只能用取Class ,不能用取ID的方法
2016/12/04 Javascript
用move.js库实现百叶窗特效
2017/02/08 Javascript
基于jQuery Easyui实现登陆框界面
2017/07/10 jQuery
通过实例解析js简易模块加载器
2019/06/17 Javascript
JS实现图片懒加载(lazyload)过程详解
2020/04/02 Javascript
Element InputNumber 计数器的实现示例
2020/08/03 Javascript
[02:46]完美世界DOTA2联赛PWL DAY4集锦
2020/11/03 DOTA
Python3基础之基本数据类型概述
2014/08/13 Python
Python 和 JS 有哪些相同之处
2017/11/23 Python
Python3正则匹配re.split,re.finditer及re.findall函数用法详解
2018/06/11 Python
python 正确保留多位小数的实例
2018/07/16 Python
一文带你了解Python 四种常见基础爬虫方法介绍
2020/12/04 Python
使用sublime text3搭建Python编辑环境的实现
2021/01/12 Python
基于Html5实现的语音搜索功能
2019/05/13 HTML / CSS
AmazeUI 加载进度条的实现示例
2020/08/20 HTML / CSS
英国在线定制百叶窗网站:Swift Direct Blinds
2020/02/25 全球购物
生物制药专业自我鉴定
2014/02/19 职场文书
财务部总监岗位职责
2014/03/12 职场文书
元宵节晚会主持人串词
2014/03/25 职场文书
效能监察建议书
2014/05/19 职场文书
高等学院职业生涯规划书范文
2014/09/16 职场文书
借名购房协议书范本
2014/10/06 职场文书
老干部工作汇报材料
2014/10/28 职场文书
办公室岗位职责范本
2015/04/11 职场文书
污染环境建议书
2015/09/14 职场文书
TV动画《史上最强大魔王转生为村民A》番宣CM公布
2022/04/01 日漫