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 相关文章推荐
google 搜索框添加关键字实现代码
Apr 24 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
Jan 03 Javascript
Javascript 颜色渐变效果的实现代码
Oct 01 Javascript
jquery实现一个简单好用的弹出框
Sep 26 Javascript
jquery实现页面百叶窗走马灯式翻滚显示效果的方法
Mar 12 Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
Mar 14 Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
May 21 Javascript
js 判断一组日期是否是连续的简单实例
Jul 11 Javascript
Angular如何在应用初始化时运行代码详解
Jun 11 Javascript
Vue源码解析之数组变异的实现
Dec 04 Javascript
js实现拖动缓动效果
Jan 13 Javascript
js实现双人五子棋小游戏
May 28 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程序中的常见漏洞进行攻击(上)
2006/10/09 PHP
Laravel5中contracts详解
2015/03/02 PHP
PHP进行批量任务处理不超时的解决方法
2016/07/11 PHP
Mootools 1.2教程 Tooltips
2009/09/15 Javascript
JS跨域代码片段
2012/08/30 Javascript
轻松创建nodejs服务器(3):代码模块化
2014/12/18 NodeJs
jQuery遍历json中多个map的方法
2015/02/12 Javascript
Labelauty?jQuery单选框/复选框美化插件分享
2015/09/26 Javascript
NodeJS连接MongoDB数据库时报错的快速解决方法
2016/05/13 NodeJs
JS获取一个未知DIV高度的方法
2016/08/09 Javascript
基于JavaScript实现跳转提示页面
2016/09/24 Javascript
使用angular帮你实现拖拽的示例
2017/07/05 Javascript
import与export在node.js中的使用详解
2017/09/28 Javascript
JavaScript设计模式之构造器模式(生成器模式)定义与用法实例分析
2018/07/26 Javascript
vue按需加载实例详解
2019/09/06 Javascript
javascript前端和后台进行数据交互方法示例
2020/08/07 Javascript
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
2020/10/17 Javascript
[02:15]2014DOTA2国际邀请赛 专访LGD.lin小兔子是大腿
2014/07/14 DOTA
python 运算符 供重载参考
2009/06/11 Python
Python常见数据结构详解
2014/07/24 Python
python实现自动登录人人网并采集信息的方法
2015/06/28 Python
python实现发送邮件功能
2017/07/22 Python
python 使用poster模块进行http方式的文件传输到服务器的方法
2019/01/15 Python
Python设计模式之简单工厂模式实例详解
2019/01/22 Python
Django框架实现的普通登录案例【使用POST方法】
2019/05/15 Python
python实现拼接图片
2020/03/23 Python
python由已知数组快速生成新数组的方法
2020/04/08 Python
python+adb命令实现自动刷视频脚本案例
2020/04/23 Python
python实现批量转换图片为黑白
2020/06/16 Python
CSS3 translate导致字体模糊的实例代码
2019/08/30 HTML / CSS
美国购买当代和现代家具网站:MODTEMPO
2018/07/20 全球购物
自荐信怎么写
2015/03/04 职场文书
小学生心理健康活动总结
2015/05/08 职场文书
MySQL sql_mode的使用详解
2021/05/08 MySQL
Python anaconda安装库命令详解
2021/10/16 Python
MySQL如何使备份得数据保持一致
2022/05/02 MySQL