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 相关文章推荐
THREE.JS入门教程(3)着色器-下
Jan 24 Javascript
jQuery筛选器children()案例详解(图文)
Feb 17 Javascript
基于编写jQuery的无缝滚动插件
Aug 02 Javascript
jQuery选择器源码解读(八):addCombinator函数
Mar 31 Javascript
JavaScript实现将UPC转换成ISBN的方法
May 26 Javascript
jquery实现九宫格大转盘抽奖
Nov 13 Javascript
JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)
Dec 13 Javascript
jQuery实现手机自定义弹出输入框
Jun 13 Javascript
Javascript vue.js表格分页,ajax异步加载数据
Oct 24 Javascript
BootStrap tooltip提示框使用小结
Oct 26 Javascript
JavaScript中Math对象的方法介绍
Jan 05 Javascript
JavaScript实现多重继承的方法分析
Jan 09 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
php模拟post提交数据的方法
2015/02/12 PHP
Laravel5.1自定义500错误页面示例
2016/10/09 PHP
多广告投放代码 推荐
2006/11/13 Javascript
表单提交时自动复制内容到剪贴板的js代码
2007/03/16 Javascript
关于二级域名下使用一级域名下的COOKIE的问题
2011/11/07 Javascript
js动态生成指定行数的表格
2013/07/11 Javascript
js 控制页面跳转的5种方法
2013/09/09 Javascript
禁止ajax缓存获取程序最新数据的方法
2013/11/19 Javascript
做好七件事帮你提升jQuery的性能
2014/02/06 Javascript
jQuery CSS3相结合实现时钟插件
2016/01/08 Javascript
浅析jquery unbind()方法移除元素绑定的事件
2016/05/24 Javascript
js将字符串中的每一个单词的首字母变为大写其余均为小写
2017/01/05 Javascript
js实现带简单弹性运动的导航条
2017/02/22 Javascript
React简单介绍
2017/05/24 Javascript
关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)
2018/09/04 Javascript
Vue的watch和computed方法的使用及区别介绍
2018/09/06 Javascript
ES6数组与对象的解构赋值详解
2019/06/14 Javascript
react国际化化插件react-i18n-auto使用详解
2020/03/31 Javascript
Node快速切换版本、版本回退(降级)、版本更新(升级)
2021/01/07 Javascript
Python调用C++程序的方法详解
2017/01/24 Python
Python+threading模块对单个接口进行并发测试
2019/06/25 Python
简单了解Pandas缺失值处理方法
2019/11/16 Python
学Python 3的理由和必要性
2019/11/19 Python
python实现低通滤波器代码
2020/02/26 Python
使用Python发现隐藏的wifi
2020/03/04 Python
基于python实现坦克大战游戏
2020/10/27 Python
详解BeautifulSoup获取特定标签下内容的方法
2020/12/07 Python
美国知名眼镜网站:Target Optical
2020/04/04 全球购物
初中学校军训方案
2014/05/09 职场文书
社区戒毒工作方案
2014/06/04 职场文书
2014银行领导班子四风对照检查材料思想汇报
2014/09/25 职场文书
2015年环卫工作总结
2015/04/28 职场文书
高中军训感想
2015/08/07 职场文书
Python基础之教你怎么在M1系统上使用pandas
2021/05/08 Python
python图片灰度化处理的几种方法
2021/06/23 Python
入门学习Go的基本语法
2021/07/07 Golang