jquery如何實現倒計時效果

首先獲取當前時間與目標時間的時間差，然後通過定時器更新這個時間差，就實現了倒計時效果。實現上述過程需要以下兩個函數：

setTimeout(code,millisec);//?在指定的毫秒數後調用函數

實例演示如下

創建Html元素

<span>距離2015年國慶節還剩：</span><br>

<div?class="content">

<input?type="text"?id="time_d">天<input?type="text"?id="time_h">時<input?type="text"?id="time_m">分<input?type="text"?id="time_s">秒

</div>

</div>

設置css樣式

div.box>span{color:#999;font-style:italic;}

div.content{width:250px;margin:10px?0;padding:20px;border:2px?solid?#ff6666;}

input[type='text']{width:45px;height:35px;padding:5px?10px;margin:5px?0;border:1px?solid?#ff9966;}

編寫jquery代碼

show_time();

});?

function?show_time(){?

var?time_start?=?new?Date().getTime();?//設定當前時間

var?time_end?=?new?Date("2015/10/01?00:00:00").getTime();?//設定目標時間

//?計算時間差?

var?time_distance?=?time_end?-?time_start;?

//?天

var?int_day?=?Math.floor(time_distance/86400000)?

time_distance?-=?int_day?*?86400000;?

//?時

var?int_hour?=?Math.floor(time_distance/3600000)?

time_distance?-=?int_hour?*?3600000;?

//?分

var?int_minute?=?Math.floor(time_distance/60000)?

time_distance?-=?int_minute?*?60000;?

//?秒?

var?int_second?=?Math.floor(time_distance/1000)?

//?時分秒為單數時、前面加零?

if(int_day?<?10){?

int_day?=?"0"?+?int_day;?

}?

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").val(int_day);?

$("#time_h").val(int_hour);?

$("#time_m").val(int_minute);?

$("#time_s").val(int_second);?

//?設置定時器

setTimeout("show_time()",1000);?

}

觀察效果

某個時刻的截圖

幾秒後的截圖

上篇: 九十年代壹汽“平頭柴” 解放CA1121J載重卡車 下篇: 20113dmax32激活碼