网站地图 | RSS订阅 老铁博客 - 上海SEO优化|上海网站建设|蜘蛛池出租|站群代搭建
你的位置:首页 » 前端脚本 » 正文

js计时器,js实现计时器在线时间

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>&lt;scripttype=&quot;text/javascript&quot;&gt;<br><br>setInterval(&quot;myInterval()&quot;,1000);//1000为1秒钟<br><br>functionmyInterval()<br><br>{<br><br>alert('实战帮,javascript视频课程');<br><br>}<br><br>&lt;/script&gt;<br><br>1.setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout运用在延迟一段时间,再进行某项操作。<br><br>setTimeout(&quot;&quot;,time)设置一个超时对象<br><br>2.setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式.<br><br>setInterval(&quot;&quot;,time)设置一个超时对象<br><br>SetInterval为自动重复,setTimeout不会重复。<br><br>3.1clearTimeout(对象)清除已设置的setTimeout对象<br><br>3.2clearInterval(对象)清除已设置的setInterval对象

  • 本文来自: 老铁博客,转载请保留出处!欢迎发表您的评论
  • 相关标签:
  • 已有0位网友发表了一针见血的评论,你还等什么?

    必填

    选填

    记住我,下次回复时不用重新输入个人信息

    必填,不填不让过哦,嘻嘻。

    ◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

    相关推荐