2014-02-23 98 views
0

我一直在努力尋找/創建一個倒數計時器,它能夠保存多個日期的時間,以便當最近的日期到期時,下一個日曆將被顯示。JS倒計時的多個日期

這是我迄今發現:

function startCountdown(dates, elem, format) { 
var now = new Date(), index = 0, targetDate; 
// Returns the next date a specific month/day combination occurs. 
function nextDateOccurs(arr) { 
    var monthNotYet = now.getMonth() < arr[0] - 1, 
     dayNotYet = now.getMonth() == arr[0] - 1 && now.getDate() < arr[1]; 

    if(monthNotYet || dayNotYet) { 
     // Date will pass within this calendar year 
     return new Date(now.getFullYear(), arr[0] - 1, arr[1]); 
    } else { 
     // Date has already passed within this calendar year 
     return new Date(now.getFullYear() + 1, arr[0] - 1, arr[1]); 
    } 
} 

// Returns the numeric argument followed by the singular 
// or plural name of the item as is correct (and then 
// a space character). 
function formatQuantity(num, singular, plural) { 
    return num + " " + (num == 1 ? singular : plural) + " "; 
} 

// Pick the target date that is closest. 
for(var j = 0; j < dates.length; ++j) { 
    if(nextDateOccurs(dates[j]) < nextDateOccurs(dates[index])) { 
     index = j; 
    } 
} 

// Make a Date object for the target date. 
targetDate = nextDateOccurs(dates[index]); 


// Update the countdown every second. 
function updateCountdown() { 
    var months = 0, millis, advNow, advNow1, words = ""; 

    // Update now with the current date and time. 
    advNow1 = now = new Date(); 

    // Has the target date already passed? 
    if(now >= targetDate) { 
     millis = 0; 
    } else { 
     // Find the last time that is a whole number of months past now 
     // but less than one month before the target date. 
     while(advNow1 < targetDate) { 
      ++months; 
      advNow = advNow1; 
      advNow1 = new Date(now); 
      advNow1.setMonth(now.getMonth() + months); 
     } 
     --months; 

     // Find the time difference in milliseconds within the month. 
     millis = targetDate - advNow; 
    } 

    // Turn that into months, days, hours, minutes, and seconds. 
    words += formatQuantity(months, "month", "months"); 
    words += formatQuantity(Math.floor(millis/864e5), "day", "days"); 
    words += formatQuantity(Math.floor(millis % 864e5/36e5), "hour", "hours"); 
    words += formatQuantity(Math.floor(millis % 36e5/6e4), "minute", "minutes"); 
    words += formatQuantity(Math.floor(millis % 6e4/1e3), "second", "seconds"); 

    // Update the element. 
    elem.innerHTML = format 
     .replace(/%NAME%/g, dates[index][2]) 
     .replace(/%WORDS%/g, words); 

} 

updateCountdown(); 
setInterval(updateCountdown, 1000); 
} 

function countdownSettings() { 
startCountdown([ 
     // Change the dates here to customize the script. 
     [1, 1, "New Year's Day"], 
     [2, 14, "Valentine's Day"], 
     [7, 4, "Fourth of July"], 
     [10, 31, "Halloween"], 
     [12, 25, "Christmas"] 

    ], 
    /* Element to update */ document.getElementById("countdown"), 
    /* Format of HTML inserted */ "%NAME% is in: %WORDS%" 
); 
} 

// Run the script only after the page has fully loaded 
// to ensure that elements are accessible from the DOM. 
if(window.addEventListener) { 
window.addEventListener("load", countdownSettings, false); 
} else { 
window.attachEvent("onload", countdownSettings); 
} 

到目前爲止,這一切確實是倒計時的日期在12:00 AM。

請幫助我!

更新:仍然需要幫助!請有人幫忙!

+0

我把你的代碼粘貼到一個[jsfiddle](http://jsfiddle.net/K9Tcv/)中,它顯示了相應的下一個日期。你可以看看並指出什麼不按你想要的方式工作嗎? –

+0

它的工作原理,它只是我希望它包括在其中的時間。你知道這樣做的一種方式嗎? – spazhead

+0

啊,你想添加目標時間到日期列表中的每個日期以倒計數到?是對的嗎? –

回答

0

您只需要修改startCountdown中的條目數組,以在月和日之後添加小時和分鐘,然後修改nextDateOccurs,以便在創建新日期時通過這些小時和分鐘,位updateCountdown,以便它再次顯示說明。嘗試一下,如果它不起作用,那麼你可以更新顯示你嘗試過的問題。

您發佈的代碼將倒​​計時到下一個目標日期,但一旦達到0秒,它將不會選擇下一個,開始倒計時直到頁面刷新。對於一個基於足球的東西,你甚至可以添加另一個值來處理,直到達到當前效果後的x分鐘纔開始下一個倒計時。

我等待發布this,因爲代碼中沒有提供spazhead試圖修改它們提供的代碼以滿足其需求的指示。代碼的這種修改處理小時和分鐘,但不會在達到時間時添加行爲。

// Returns the next date a specific month/day combination occurs. 
function nextDateOccurs(arr) { 
    var monthNotYet = now.getMonth() < arr[0] - 1, 
     dayNotYet = now.getMonth() == arr[0] - 1 && now.getDate() < arr[1], 
     hourNotYet = now.getMonth() == arr[0] - 1 && now.getDate() == arr[1] && now.getHours() < arr[2], 
     minuteNotYet = now.getMonth() == arr[0] - 1 && now.getDate() == arr[1] && now.getHours() == arr[2] && now.getMinutes() < arr[3]; 

    if(monthNotYet || dayNotYet || hourNotYet || minuteNotYet) { 
     // Date will pass within this calendar year 
     return new Date(now.getFullYear(), arr[0] - 1, arr[1], arr[2], arr[3]); 
    } else { 
     // Date has already passed within this calendar year 
     return new Date(now.getFullYear() + 1, arr[0] - 1, arr[1], arr[2], arr[3]); 
    } 
}