網站地圖 | 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位網友發表了一針見血的評論,你還等什么?

    必填

    選填

    記住我,下次回復時不用重新輸入個人信息

    必填,不填不讓過哦,嘻嘻。

    ◎歡迎參與討論,請在這里發表您的看法、交流您的觀點。

    相關推薦

    苍穹之上手游怎么赚钱 大发快三网址是多少 湖南快乐十分精准预测 华东15选5彩票奖结果 股票融资话术 时时彩三星包胆 福彩排列7开奖结果查询95期 广融在线理财平台 北京快乐8单双大小 贵州11选5走势 北京快3一定牛一定牛