我打算建议如何修改许多已经存在的倒计时脚本之一，但几乎所有这些脚本都是由当前的 JavaScript 编码标准编写的（例如，使用字符串作为 setTimeout 的参数）。
所以我花时间写我自己的（试试看）。只要给予信用，每个人都可以自由使用或修改它。只需<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);
}
我欢迎任何改进建议。
编辑：我改进了脚本以更好地将其设置与其大部分代码分开，并在页面加载后立即更新倒计时。此外，现在仅在页面加载时选择目标日期，这意味着倒计时将停止在零（但当页面重新加载时，它将切换到下一个目标日期）。