2014-02-23 2 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시 날짜 카운트 다운입니다.

도와주세요!

업데이트 : 아직 도움이 필요합니다. 누군가 제발 도와주세요!

+0

코드를 [jsfiddle] (http://jsfiddle.net/K9Tcv/)에 붙여 넣은 다음 적절한 날짜를 표시합니다. 당신이보고 싶어하고 당신이 원하는 방식으로 작동하지 않는 것을 나타낼 수 있습니까? –

+0

그것은 작동한다, 그것의 다만 그것에서 시간을 그것에 또한 포함하는 좋아할 것입니다. 이 일을하는 방법을 알고 있습니까? – spazhead

+0

아, 카운트 다운 할 날짜 목록의 각 날짜에 목표 시간을 추가 하시겠습니까? 그게 맞습니까? –

답변

0

startCountdown의 항목 배열을 수정하여 월과 일 다음에 시간과 분을 추가 한 다음 nextDateOccurs을 수정하면 새 날짜가 생성 될 때 해당 시간과 분이 전달되고, 비트는 updateCountdown이므로 설명을 다시 표시합니다. 시도해보고 작동하지 않으면 시도한 것을 보여주는 질문을 업데이트 할 수 있습니다.

게시 한 코드는 다음 목표 날짜까지 카운트 다운됩니다.하지만 0 초 남았 으면 페이지를 새로 고칠 때까지 카운트 다운을 시작하기 위해 다음을 선택하지 않습니다. 축구를 기반으로하는 경우에는 다른 값을 추가하여 현재 카운트 다운 후 x 분이 될 때까지 다음 카운트 다운이 시작되지 않도록 처리 할 수도 있습니다.

spazhead은 자신의 필요에 맞게 제시된 코드를 수정하려고 시도했지만 코드에 표시가 없으므로 this을 게시하기를 기다렸습니다. 이 코드 수정은 시간과 분을 처리하지만 시간에 도달 할 때 동작을 추가하지 않습니다.

// 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]); 
    } 
}