js实现通过开始结束控制的计时器       这篇文章主要为大家详细介绍了js实现通过开始结束控制的计时器，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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" 秒
 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 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持凡科。