多日期倒计时脚本

Question

我知道JavaScript中有100个倒数计时器脚本，但是我还没有找到一个可以做我需要的，所以我希望这里的专家可以提供帮助。

基本上我要找的是一个脚本，在这个例子中将从一个假日倒计时到下一个假期。

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
...
...
...

直到计时器达到0然后我想要相同的计时器来显示它。

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
...
...
...

当它达到0时，它将开始倒计时到NewYears或者在脚本中设置的下一个日期并永远循环。有谁知道任何可以做到这一点的脚本？

谢谢， 亚当

Answer 1

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

Answer 2

我打算建议如何修改许多已经存在的倒计时脚本中的一个，但几乎所有这些脚本都是由当前的JavaScript编码标准编写的（例如使用字符串作为参数to setTimeout）。

所以我花时间写自己的（try it out）。只要给予信用，每个人都可以自由使用或修改它。只需将<p id="countdown"></p>插入您想要倒计时文本的位置，并添加以下JavaScript代码，根据需要修改日期列表（示例使用五个）。

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

我欢迎任何改进建议。

编辑：我改进了脚本，以便更好地将其设置与大多数代码分开，并在页面加载后立即更新倒计时。此外，目标日期现在仅在页面加载时选择，这意味着倒计时将停止在零（但是当重新加载页面时，它将切换到下一个目标日期。）

Answer 3

我是原始海报，我已经尝试了理想机器编写的代码，我只有一个建议，这将真正使我成为一个可行的解决方案。如果您可以在倒计时时间内添加小时和分钟的支持，那么它将非常适合我的需求。也许在数组中有类似的东西

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

您可以使用24小时格式的小时，因此17将是5PM，5当然意味着5AM。这样可以将脚本打开给更多人，并使其完美满足我的需求。

谢谢， 亚当

Answer 4

这是一个起点，我不确定你需要的细节，但是这个开始一个计时器，当它完成时（5秒后）开始第二个（持续4秒）。

<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>