在電子商務網站或其它網站中,我們經常會遇到在節假日,活動期進行商品的降價打折促銷;設定一個開始時間,和一個活動結束時間,然後倒計時就控制了整個活動。
下邊就給大家演示一個迴圈倒計時。這個倒計時要求為:設定結束時間為2013年10月4日 08:33:00,當結束時間到後,把結束時間再往後推遲三天,這樣就像形成了一個3天的迴圈倒計時。
先把效果給大家演示一下:
當前時間為:如下圖所示
活動結束日期設定為:
var time_end = new Date("2013/10/04 08:33:00"); // 設定活動結束結束時間
開始時間2013-10-04 08:26:22到結束時間:2013-10-04 08:33:00的倒計時效果如下圖
//倒計時還剩幾十秒效果:
//倒計時結束,即0天,0時,0分,0秒 效果如下:
//倒計時為0後,活動結束。緊接著讓活動日期往後推遲3天,也就是倒計時的結束時間為:
當前時間算起,再加3天時間作為倒計時結束時間。
比如設定的結束時間是:2013-10-04 08:33:00,這個時間倒計時完了之後,再把結束時間往後推遲3天,也就是現在的結束時間就成了:2013-10-07 08:33:00
效果如下:
距離活動結束還有: 天
時
分
秒
setTimeout("count_down()",1000);//設定每一秒呼叫一次倒計時函式
//根據天,時,分,秒的ID找到相對應的元素
var time_day = document.getElementById("times_day");
var time_hour = document.getElementById("times_hour");
var time_minute = document.getElementById("times_minute");
var time_second = document.getElementById("second");
var time_end = new Date("2013/10/04 08:33:00"); // 設定活動結束結束時間
time_end = time_end.getTime();
//定義倒計時函式
function count_down(){
var time_now = new Date(); // 獲取當前時間
time_now = time_now.getTime();
var time_distance = time_end - time_now; // 時間差:活動結束時間減去當前時間
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)
// 判斷小時小於10時,前面加0進行佔位
if(int_hour < 10)
int_hour = "0" + int_hour;
// 判斷分鐘小於10時,前面加0進行佔位
if(int_minute < 10)
int_minute = "0" + int_minute;
// 判斷秒數小於10時,前面加0進行佔位
if(int_second < 10)
int_second = "0" + int_second;
// 顯示倒計時效果
time_day.innerHTML = int_day;
time_hour.innerHTML = int_hour;
time_minute.innerHTML = int_minute;
time_second.innerHTML = int_second;
setTimeout("count_down()",1000);
}else{
//指定的結束日期結束後,往後推遲3天,或者稱之為:往後加3天
//在這裡可以非常靈活的設定:比如往後推遲2天或往後加2天:2*24*60*60*1000
//比如往後推遲1天或往後加1天:1*24*60*60*1000
//比如往後推遲2小時或往後加2小時:2*60*60*1000
// 比如往後推遲40分鐘或往後加40分鐘:40*1000這裡設定根據大家需要,靈活設定。
time_end=time_end+3*24*60*60*1000;
setTimeout("count_down()",1000);
}
}