原生js實現的天小時分鐘和秒倒數計時效果
倒數計時效果在很多網站中都有應用,用途也比較廣泛,比如體育賽事倒數計時,或者一些考試或者婚禮假期等等,這裡就不訊息說,下面就直接給出實現此功能的程式碼例項,程式碼如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> *{ margin:0; padding:0; list-style:none; } body{ font-size:18px; text-align:center; } .time{ height:30px; padding:200px; } </style> <script type="text/javascript"> function GetRTime(){ var EndTime= new Date('2014/12/20 00:00:00'); var NowTime = new Date(); var t =EndTime.getTime() - NowTime.getTime(); var d=0; var h=0; var m=0; var s=0; if(t>=0){ d=Math.floor(t/1000/60/60/24); h=Math.floor(t/1000/60/60%24); m=Math.floor(t/1000/60%60); s=Math.floor(t/1000%60); } else{ clearTimeout(timer); return; } document.getElementById("t_d").innerHTML = d + "天"; document.getElementById("t_h").innerHTML = h + "時"; document.getElementById("t_m").innerHTML = m + "分"; document.getElementById("t_s").innerHTML = s + "秒"; var timer=setTimeout(GetRTime,1000); } window.onload=function(){ GetRTime() } </script> </head> <body> <div class="time"> <span id="t_d">00天</span> <span id="t_h">00時</span> <span id="t_m">00分</span> <span id="t_s">00秒</span> </div> </body> </html>
上面的實現的倒數計時效果,下面介紹一下它的實現過程。
一.程式碼註釋:
1.function GetRTime(){},此函式實現了倒數計時效果。
2.var EndTime= new Date('2014/12/20 00:00:00'),倒數計時終點時間物件。
3.var NowTime = new Date(),獲取當前的時間物件。
4.var t =EndTime.getTime() - NowTime.getTime(),獲取終點時間和當前時間的毫秒差距。
5.var d=0,宣告一個變數並初始化為0,用來標識倒數計時剩餘的天,下面幾個變數也是同樣的道理。
6.if(t>=0),判斷毫秒差是否大於等於0,如果是,則繼續倒數計時效果。
7.d=Math.floor(t/1000/60/60/24),獲取剩餘的天數。
8.h=Math.floor(t/1000/60/60%24),獲取剩餘的小時,當然這裡所說的剩餘的小時並不是總的剩餘的小時數,而是在分鐘這個時間單位上的小時整數,下面的分鐘秒等也是同樣的道理。
9.else{clearTimeout(timer);return;},如果倒數計時結束,那麼就結束定時器函式的執行,並跳出此函式。
10.document.getElementById("t_d").innerHTML = d + "天",顯示倒數計時相關的內容,下面也是同樣的道理。
11.var timer=setTimeout(GetRTime,1000),利用回撥的方式不斷呼叫GetRTime函式本身。
二.相關閱讀:
1.getTime()函式可以參閱javascript getTime()一章節。
2.Math.floor()函式可以參閱javascript Math.floor()一章節。
3.setTimeout()函式可以參閱setTimeout()一章節。
相關文章
- javascript小時、分鐘和秒倒數計時效果JavaScript
- JavaScript 天小時分鐘和秒倒數計時JavaScript
- JavaScript 原生 小案例 秒殺時鐘倒數計時JavaScript
- 年月日小時分鐘秒倒數計時效果程式碼例項
- js程式碼實現倒數計時秒殺的效果JS
- 直播商城系統原始碼,js製作倒數計時,天,小時,分,秒原始碼JS
- JavaScript 原生 小案例 60秒倒數計時JavaScript
- js年月日小時分鐘秒動態時鐘效果JS
- js計算兩個日期相差的天數(不包含小時分鐘秒)JS
- js精確到天的倒數計時效果JS
- jquery實現60秒倒數計時jQuery
- js實現指定時間倒數計時JS
- js實現活動倒數計時JS
- 動畫合成小技巧!CSS 實現動感的倒數計時效果動畫CSS
- 直播平臺搭建,計時和倒數計時功能的分別實現
- 計算兩個時間日期相差的天數、分鐘數或者秒數
- php 將秒數轉換為時間(年、天、小時、分、秒)PHP
- jQuery實現的按鈕可用倒數計時效果jQuery
- 如何使用原生技術寫一個倒數計時時鐘
- 案例:倒數計時 js小案例JS
- js實現驗證碼倒數計時JS
- js倒數計時 實現傳送驗證碼倒數計時60sJS
- 倒數計時34天
- Flutter倒數計時/計時器的實現Flutter
- js——倒數計時JS
- JS倒數計時JS
- 按小時,分鐘,秒;統計之 round和trunc區別
- Js Jquery 實現的按鈕倒數計時整理JSjQuery
- 直播小程式原始碼,vue實現時間倒數計時原始碼Vue
- js 搶購倒數計時,豪秒級變動JS
- css3實現的賽道倒數計時奔跑效果CSSS3
- 倒數計時指定時間之後實現頁面跳轉效果
- 簡單實現時間倒數計時與伺服器同步效果伺服器
- 微信開發之小程式實現倒數計時
- Kookjs 倒數計時JS
- PHP日期加減月數,天數,週數,小時,分,秒等等PHP
- JavaScript 倒數計時60秒程式碼JavaScript
- js驗證碼重新傳送倒數計時效果JS