我知道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或脚本中设置的下一个日期，并永远循环下去。有人知道可以执行此操作的任何脚本吗？
谢谢，亚当
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();
我将建议如何修改许多已经存在的倒计时脚本之一，但是几乎所有脚本都是由当前的JavaScript编码标准可怕地编写的（eg使用字符串作为setTimeout的参数）。
所以我花时间写我自己的（try it out）。只要获得荣誉，每个人都可以自由使用或修改它。只需将<p id="countdown"></p>插入您要倒数文字的位置，然后添加以下JavaScript代码，根据需要修改日期列表（该示例使用5个）。
/*
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);
}
我欢迎提出任何改进建议。
Edit：我对脚本进行了改进，以更好地将其设置与大多数代码分开，并在页面加载后立即更新倒计时。另外，现在仅在页面加载时选择目标日期，这意味着倒计时将在零时停止（但是在重新加载页面时，它将切换到下一个目标日期）。
我是原始的发布者，我已经尝试了Idealmachine编写的代码，但我只有一个建议，它将对我来说确实是一个可行的解决方案。如果您可以在倒计时时间上增加数小时和数分钟的支持，那么它非常适合我的需求。数组中类似这样的东西]
[Month, Day, Hour, Minute, "Tuesdays Meeting"]
您可以在小时内使用24小时格式，因此17表示5 PM，5表示5AM。这将使脚本向更多的人开放，并将使其完全适合我的需求。
谢谢，亚当
[这是起点，我不确定您需要的具体信息，但是这会启动一个计时器，完成后（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>
我修改了此代码，以便将其足球时间表显示在监视器上显示的静态页面上。我做了前面提到的包括小时和分钟的操作，但是由于这是一个静态页面，因此在计数器达到0后我也给了它超时，然后重新启动脚本以继续进行下一个游戏。在很多方面，我还是很新的，因此，任何改进或建议都将不胜感激！
/*
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],
timeNotYet = now.getHours() == arr[2] && now.getMinutes() < arr[3];
if (monthNotYet || dayNotYet || timeNotYet) {
// 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]);
}
}
// 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, and if so, reload script?
if (now >= targetDate) {
setTimeout(countdownSettings, 1000);
} 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][4])
.replace(/%WORDS%/g, words);
}
updateCountdown();
setInterval(updateCountdown, 1000);
}
function countdownSettings() {
startCountdown([
// Change the dates here to customize the script.
[2, 6, 19, 30, "@ Opponent"],
[2, 7, 19, 00, "vs Opponent"],
[2, 11, 19, 00, "@ Opponent"],
[2, 18, 19, 00, "@ Opponent"],
[2, 20, 19, 00, "vs Opponent"],
[2, 25, 19, 00, "@ Opponent"],
[2, 27, 19, 00, "@ Opponent"],
[3, 3, 19, 00, "vs Opponent"],
[3, 10, 19, 00, "@ Opponent"],
[3, 13, 19, 30, "@ Opponent"],
[3, 17, 19, 00, "vs Opponent"],
[3, 19, 19, 30, "vs Opponent"],
[3, 31, 19, 00, "vs Opponent"],
[4, 3, 19, 00, "vs Opponent"],
[4, 7, 19, 00, "@ Opponent"],
[4, 9, 19, 30, "@ Opponent"],
[4, 14, 19, 00, "vs Opponent"],
[4, 16, 19, 30, "@ Opponent"]
],
/* Element to update */
document.getElementById("countdown"),
/* Format of HTML inserted */
"Next Game %NAME% 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);
}