Multiple Date Countdown Script

I know there are 100's of countdown timer scripts in JavaScript but I have not found one yet that will do what I need so I am hoping the experts here might be able to help.

Basically what I am looking for is a script that will countdown from one holiday until the next like in this example.

Thanksgiving is in: 12 Days 11 hours 25 minutes and 9 seconds
Thanksgiving is in: 12 Days 11 hours 25 minutes and 8 seconds
Thanksgiving is in: 12 Days 11 hours 25 minutes and 7 seconds
Thanksgiving is in: 12 Days 11 hours 25 minutes and 6 seconds
Thanksgiving is in: 12 Days 11 hours 25 minutes and 5 seconds
...
...开发者_如何学Go
...

Until the timer reaches 0 and then I want the same timer to show this.

Christmas is in: 29 Days 23 hours 59 minutes and 59 seconds
Christmas is in: 29 Days 23 hours 59 minutes and 58 seconds
Christmas is in: 29 Days 23 hours 59 minutes and 57 seconds
Christmas is in: 29 Days 23 hours 59 minutes and 56 seconds
Christmas is in: 29 Days 23 hours 59 minutes and 55 seconds
...
...
...

And when it reaches 0 it will begin to countdown to NewYears or whatever the next date is that was setup in the script and loop forever. Does anyone know of any scripts that can do this ?

Thanks, Adam

var callbacks = [
    {
        interval: 1000,
        callback: function() {
            // do Timer1 stuff
        }
    },
    {
        interval: 2000,
        callback: function() {
            // do Timer2 stuff
        }
    },
    {
        interval: 3000,
        callback: function() {
            // do Timer3 stuff
        }
    }
];

function startTimer () {
    var callback = callbacks[0];
    window.setTimeout(onTimerComplete, callback.interval);
}

function onTimerComplete () {
    var callback = callbacks.shift();
    callbacks.push(callback); // the first shall be the last
    callback.callback(); // call the callback function
    startTimer(); // set the timer for the first callback
}

startTimer();

I was going to suggest how to modify one of the many already-existing countdown scripts, but just about all of them were horribly written by current JavaScript coding standards (e.g. using a string as an argument to setTimeout).

So I have taken the time to write my own (try it out). Everyone is free to use or modify it as long as credit is given. Just insert <p id="countdown"></p> where you want the countdown text to go, and also add the following JavaScript code, modifying the list of dates as needed (the example uses five).

/*
Date Countdown Widget for JavaScript
Copyright (c) 2010 idealmachine.

Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted, provided that the above
copyright notice and this permission notice appear in all copies.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
*/


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

I welcome any suggestions for improvement.

Edit: I've improved the script to better separate its settings from most of its code, as well as updating the countdown as soon as the page loads. Also, the target date is now only selected on page load, meaning that the countdown will stop at zero (but when the page is reloaded, it will switch to the next target date).

I am the original poster and the I have tried out the code that idealmachine has written and I only have one suggestion that would really make this a viable solution for me. If you could add support for hours and minutes to the countdown time then it would be perfect for my needs. Something like this in the array perhaps

[Month, Day, Hour, Minute, "Tuesdays Meeting"]

You could use a 24 hour format for the hours so 17 would be 5PM and 5 would of course mean 5AM. This would open the script up to far more people and would make it perfect for my needs.

Thanks, Adam

This is a starting point, I'm not sure about the specifics you need but this one starts a timer, when it is done (after 5 seconds) starts a second one (which lasts 4 seconds).

<div id="countDiv"></div>

<script>
function countDown1 (count) {
  if (count > 0) {
   var d = document.getElementById("countDiv");
   d.innerHTML = "counter 1: " + count;
   setTimeout ("countDown1(" + (count-1) + ")", 1000);
   }
  else
   countDown2(4);
}
function countDown2 (count) {
  if (count > 0) {
   var d = document.getElementById("countDiv");
   d.innerHTML = "counter 2: " + count;
   setTimeout ("countDown2(" + (count-1) + ")", 1000);
   }

}
countDown1(5);
</script>