2020-6-15 13:51:27 | 作者：老铁SEO | 0个评论 | 人浏览
js定时器的准确时间
这个相差是不确定的。
因为虽说1000毫秒是1秒，但是js是单线程的，又怎么会有一个线程单独来计算时间呢，那么问题来了。
js是如何定时的？
其实js的setTimeout机制是这样的，每个语句都会加入到执行的队列中，也就是挂起状态，其实是一直往执行队列里面加你写的语句上一句其他代码，或者setTimeout的回调函数里面的代码，执行完了，再次执行已经挂起的setTimeout，那么此时执行时间与电脑配置和js执行效率有关。
所以结论就是，电脑速度越快，js代码效率越高，这个延迟就越小。
但是，一定会有一定的延迟的，因为js是单线程的
求一个用javascript实现的计时器
<html>
<body>
<scriptlanguage="javascript">
vartimeout=-1;
vartimer;
functioncal(){
if(startButton.value=="开始"){
startButton.value="暂停";
timer=setInterval("timeout++;textField.value='已经过了:'+(timeout/600)+'分钟.';",100)
}
else{
clearInterval(timer);
startButton.value="开始";
}
}
functionreset(){
startButton.value="开始";
textField.value="";
if(timer!=null){
timeout=-1;
clearInterval(timer);
}
}
</script>
<inputtype="text"size=50name="textField">
<inputtype="submit"size=10name="startButton"value="开始"onclick="cal();">
<inputtype="submit"size=10name="resetButton"value="重置"onclick="reset();">
</body>
</html>
怎样用javascript做一个计时器
计时器,在生活当中也是用得频繁的功能,比如锻炼身体,跑步比赛等等相关的活动.我们用Javascript来完成一个计时器.
计时器,主要就是对时间的一个逻辑处理,比如60秒等于1分钟,60分钟等于一个小时,我们这里只做到小时的处理.就这么一个简单的逻辑,然后动态的显示在一个Input里面.
那现在我们来完成这个界面
<label>计时:</label>
<inputtype="text"name=""id="timer"/>
<buttononclick="pause(this)"id="pause"state="on">暂停</button>
<buttononclick="restart()">重新开始</button>
给标签元素一个ID是为了获取其中的标签,然后加入了两个点击事件,计数器的暂停,和重新开始事件.
首先我们来完成开始计时的处理,开始计时主要还是是用了setInterval的方法,其中每隔1秒执行一次方法,
这样我们就可以对时间做处理,就像开头所说60秒等于1分钟...,所以这里就需要用判断来处理,最后就将其中的得到的秒,分,时显示到输入框里.
varele_timer=document.getElementById("timer");
varn_sec=0;//秒
varn_min=0;//分
varn_hour=0;//时
//60秒===1分
//60分===1小时
functiontimer(){
returnsetInterval(function(){
varstr_sec=n_sec;
varstr_min=n_min;
varstr_hour=n_hour;
if(n_sec<10){
str_sec="0"+n_sec;
}
if(n_min<10){
str_min="0"+n_min;
}
if(n_hour<10){
str_hour="0"+n_hour;
}
vartime=str_hour+":"+str_min+":"+str_sec;
ele_timer.value=time;
n_sec++;
if(n_sec>59){
n_sec=0;
n_min++;
}
if(n_min>59){
n_sec=0;
n_hour++;
}
},1000);
}
varn_timer=timer();
我们用timer方法包装setInterval方法是为了,后面暂停和重新开始做处理.
用户点击了暂停,计时器就停止计时,用户继续点击这个按钮,计时器继续计时.所以这里有一个状态需要控制,这个状态我们给这个按钮一个属性.
//暂停和继续
functionpause(self){
varstate=self.getAttribute("state");
if(state==="on"){
clearInterval(n_timer);
self.textContent="继续";
self.setAttribute("state","off");
}else{
n_timer=timer();
self.textContent="暂停";
self.setAttribute("state","on");
}
}
最后我们来看一下重新开始,重新开始事件就更加简单了.将计数器清0,然后改变暂停按钮初始状态.
functionrestart(){
clearInterval(n_timer);
n_sec=0;
n_min=0;
n_hour=0;
n_timer=timer();
varele_pause=document.getElementById("pause");
ele_pause.textContent="暂停";
ele_pause.setAttribute("state","on");
}
这样就完成了计时的功能.效果如下
js定时器怎么使用？
setInterval()循环执行相应的方法<br><br><scripttype="text/javascript"><br><br>setInterval("myInterval()",1000);//1000为1秒钟<br><br>functionmyInterval()<br><br>{<br><br>alert('实战帮，javascript视频课程');<br><br>}<br><br></script><br><br>1.setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout运用在延迟一段时间，再进行某项操作。<br><br>setTimeout("",time)设置一个超时对象<br><br>2.setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式.<br><br>setInterval("",time)设置一个超时对象<br><br>SetInterval为自动重复，setTimeout不会重复。<br><br>3.1clearTimeout(对象)清除已设置的setTimeout对象<br><br>3.2clearInterval(对象)清除已设置的setInterval对象