JS倒計時實例_天時分秒
更新時間：2017年08月22日 08:37:54 投稿：jingxian
下面小編就為大家?guī)硪黄狫S倒計時實例_天時分秒。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
HTML代碼：
<div id="times_wrap" class="time_num"> 距離結(jié)束時間： <div class="time_w"> <b id="times_d" class="time"> </b>天 <b id="times_h" class="time"> </b>時 <b id="times_m" class="time"> </b>分 <b id="times_s" class="time"> </b>秒 </div> </div>
JavaScript代碼：
<script type="text/javascript">
setTimeout("show_time()",1000);
var time_wrap = document.getElementByIdx_x("times_wrap");
var time_d = document.getElementByIdx_x("times_d");
var time_h = document.getElementByIdx_x("times_h");
var time_m = document.getElementByIdx_x("times_m");
var time_s = document.getElementByIdx_x("times_s");
var time_end = new Date("2012/10/29 08:00:00"); // 設(shè)定結(jié)束時間
time_end = time_end.getTime();
function show_time(){
var time_now = new Date(); // 獲取當(dāng)前時間
time_now = time_now.getTime();
var time_distance = time_end - time_now; // 結(jié)束時間減去當(dāng)前時間
var int_day, int_hour, int_minute, int_second;
if(time_distance >= 0){
// 天時分秒換算
int_day = Math.floor(time_distance/86400000)
time_distance -= int_day * 86400000;
int_hour = Math.floor(time_distance/3600000)
time_distance -= int_hour * 3600000;
int_minute = Math.floor(time_distance/60000)
time_distance -= int_minute * 60000;
int_second = Math.floor(time_distance/1000)
// 時分秒為單數(shù)時、前面加零站位
if(int_hour < 10)
int_hour = "0" + int_hour;
if(int_minute < 10)
int_minute = "0" + int_minute;
if(int_second < 10)
int_second = "0" + int_second;
// 顯示時間
time_d.innerHTML = int_day;
time_h.innerHTML = int_hour;
time_m.innerHTML = int_minute;
time_s.innerHTML = int_second;
setTimeout("show_time()",1000);
}else{
time_d.innerHTML = time_d.innerHTML;
time_h.innerHTML = time_h.innerHTML;
time_m.innerHTML = time_m.innerHTML;
time_s.innerHTML = time_s.innerHTML;
// clearTimeout(timerID)
}
};
</script>
以上這篇JS倒計時實例_天時分秒就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
javascript 方法一些使用方法,注意看下他的函數(shù)。2009-05-05
這篇文章主要介紹了簡單了解Ajax表單序列化的實現(xiàn)方法,隨著Ajax的出現(xiàn)，表單序列化已經(jīng)成為一種需求,在學(xué)習(xí)原生Ajax時,若用POST方法向后臺提交數(shù)據(jù)時,就需要將表單序列化,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了微信小程序生成二維碼的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
用JS操作FRAME中的IFRAME及其內(nèi)容的實現(xiàn)代碼
一直都需要這樣的東西，發(fā)現(xiàn)了這個好東西，一定要研究下2008-07-07
在iFrame子頁面里實現(xiàn)模態(tài)框的方法
今天小編就為大家分享一篇在iFrame子頁面里實現(xiàn)模態(tài)框的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
返回和前進大家應(yīng)該不陌生吧，瀏覽器上面的返回和前進按鈕大家瀏覽網(wǎng)頁時都會應(yīng)到的，下面就為大家介紹下js中是如何實現(xiàn)所謂的返回和前進2013-10-10
這篇文章主要介紹了JavaScript中的this妙用,結(jié)合實例形式分析了JavaScript中的this基本功能、用法及操作注意事項,需要的朋友可以參考下2020-05-05
這篇文章主要介紹了使用原生JS實現(xiàn)滾輪翻頁效果的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
js實現(xiàn)首屏延遲加載實現(xiàn)方法 js實現(xiàn)多屏單張圖片延遲加載效果
這篇文章主要介紹了js實現(xiàn)首屏延遲加載實現(xiàn)方法，以及js實現(xiàn)多屏單張圖片延遲加載效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要介紹了webpack分離css單獨打包的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06