JS倒計時兩種實現方式代碼實例
最近做瀏覽器界面倒計時，用js就實現，兩種方式：
一：設置時長，進行倒計時。比如考試時間等等
代碼如下：
<html><head><meta charset='UTF-8'><title>簡單時長倒計時</title><SCRIPT type='text/javascript'> var maxtime = 60 * 60; //一個小時，按秒計算，自己調整! function CountDown() {if (maxtime >= 0) { minutes = Math.floor(maxtime / 60); seconds = Math.floor(maxtime % 60); msg = '距離結束還有' + minutes + '分' + seconds + '秒'; document.all['timer'].innerHTML = msg; if (maxtime == 5 * 60)alert('還剩5分鐘'); --maxtime;} else{ clearInterval(timer); alert('時間到，結束!');} } timer = setInterval('CountDown()', 1000); </SCRIPT></head><body><div style='color:red'></div><div style='color:red'></div></body></html>
運行結果：
二：設置時間戳，進行倒計時。比如距離活動結束時間等等
代碼如下：
<html><head> <meta charset='UTF-8'> <title>js簡單時分秒倒計時</title> <script type='text/javascript'> function countTime() { //獲取當前時間 var date = new Date(); var now = date.getTime(); //設置截止時間 var str='2017/5/17 00:00:00'; var endDate = new Date(str); var end = endDate.getTime(); //時間差 var leftTime = end-now; //定義變量 d,h,m,s保存倒計時的時間 var d,h,m,s; if (leftTime>=0) {d = Math.floor(leftTime/1000/60/60/24);h = Math.floor(leftTime/1000/60/60%24);m = Math.floor(leftTime/1000/60%60);s = Math.floor(leftTime/1000%60); } //將倒計時賦值到div中 document.getElementById('_d').innerHTML = d+'天'; document.getElementById('_h').innerHTML = h+'時'; document.getElementById('_m').innerHTML = m+'分'; document.getElementById('_s').innerHTML = s+'秒'; //遞歸每秒調用countTime方法，顯示動態時間效果 setTimeout(countTime,1000); } </script></head ><body onload='countTime()' > <div> <span id='_d'>00</span> <span id='_h'>00</span> <span id='_m'>00</span> <span id='_s'>00</span> </div></body></html>
運行結果：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。
相關文章：
網公網安備