js实现通过开始结束控制的计时器
本文实例为大家分享了js通过开始结束控制计时器的具体实现代码,供大家参考,具体内容如下
时间戳的使用的可以取消对多次点击事件产生效果的累加,譬如下文,运用时间戳,保证了在多次点击事件后不会对setInterval()中的时间进行叠加。
开始结束运用addEventlistener()来控制开始结束,
实时显示在你要显示的文本内容放置在setInterval()中,可实现实时显示的效果。
不足setInterval()方法所设置的时间并不能保证一直是1秒的,有误差,但是可通过前后Date()的不同控制在一定范围内才可执行,不过这里暂时没有设置这个,有空再补。
简单计时器 input{ border:1pxsolidblack; text-align:right; font-size:20px; } 秒
vartime=0; varseconde=0; varbtn1=document.getElementById("btn1"); varbtn2=document.getElementById("btn2"); vartext=document.getElementById("text"); functiongetStyle(elem,prop){ if(window.getComputedStyle){ returnwindow.getComputedStyle(elem,null)[prop]; }else{ returnelem.currentStyle[prop]; } } varcount=1;//设置时间戳 btn1.addEventListener("click",showTime) functionshowTime(e){ if(count){ time=setInterval(function(){ seconde++; text.value=seconde; },1000) count=0; } } btn2.addEventListener("click",stopTime) functionstopTime(){ clearInterval(time); count=1; }