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下将字符串当函数执行的方法
Jul 13 Javascript
关于event.cancelBubble和event.stopPropagation()的区别介绍
Dec 11 Javascript
ExtJS中文乱码之GBK格式编码解决方案及代码
Jan 20 Javascript
jquery中常用的函数和属性详细解析
Mar 07 Javascript
jquery实现适用于门户站的导航下拉菜单效果代码
Aug 24 Javascript
基于Bootstrap实现tab标签切换效果
Apr 15 Javascript
AngularJS表格添加序号的方法
Mar 03 Javascript
vue-router 导航钩子的具体使用方法
Aug 31 Javascript
AngularJS 表单验证手机号的实例(非必填)
Nov 12 Javascript
解决vue单页面修改样式无法覆盖问题
Aug 05 Javascript
JS面向对象编程基础篇(三) 继承操作实例详解
Mar 03 Javascript
关于Vue中$refs的探索浅析
Nov 05 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基础学习笔记
2007/03/18 PHP
PHP四大安全策略
2014/03/12 PHP
PHP使用NuSOAP调用Web服务的方法
2015/07/18 PHP
PHP实现小偷程序实例
2016/10/31 PHP
PHP微信PC二维码登陆的实现思路
2017/07/13 PHP
jquery之Document元素选择器篇
2008/08/14 Javascript
JS判断当前日期是否大于某个日期的实现代码
2012/09/02 Javascript
分析Node.js connect ECONNREFUSED错误
2013/04/09 Javascript
jQuery实现动画效果的实例代码
2013/05/07 Javascript
jQuery中:checkbox选择器用法实例
2015/01/03 Javascript
JavaScript实现把数字转换成中文
2015/06/29 Javascript
常用javascript表单验证汇总
2020/07/20 Javascript
jQuery弹层插件jquery.fancybox.js用法实例
2016/01/22 Javascript
Angular中使用ui router实现系统权限控制及开发遇到问题
2016/09/23 Javascript
javascript实现秒表计时器的制作方法
2017/02/16 Javascript
jQuery实现扑克正反面翻牌效果
2017/03/10 Javascript
ES6入门教程之Class和Module详解
2017/05/17 Javascript
node.js操作mysql简单实例
2017/05/25 Javascript
Vue自定义指令详解
2017/07/28 Javascript
JavaScript实现计数器基础方法
2017/10/10 Javascript
使用JQuery实现图片轮播效果的实例(推荐)
2017/10/24 jQuery
vue + vuex todolist的实现示例代码
2018/03/09 Javascript
微信小程序带动画弹窗组件使用方法详解
2018/11/27 Javascript
Vue中CSS动画原理的实现
2019/02/13 Javascript
在JavaScript中使用严格模式(Strict Mode)
2019/06/13 Javascript
Python实现将Excel转换成为image的方法
2018/10/23 Python
python批量将excel内容进行翻译写入功能
2019/10/10 Python
python调用win32接口进行截图的示例
2020/11/11 Python
CSS3 rgb and rgba(透明色)的使用详解
2020/09/25 HTML / CSS
购买澳大利亚最好的服装和内衣在线:BONDS
2016/10/14 全球购物
您的时尚,您的生活方式:DTLR Villa
2019/12/25 全球购物
Python文件操作的面试题
2013/06/22 面试题
旅游与环境专业求职信
2014/06/05 职场文书
2014年节能工作总结
2014/12/18 职场文书
餐厅保洁员岗位职责
2015/04/10 职场文书
「魔导具师妲莉亚永不妥协~从今天开始的自由职人生活~」1、2卷发售宣传CM公开
2022/03/21 日漫