JavaScript腳本:
"use strict";
window.addEventListener('load', function () {
const fromNow = function (ele) {
let now = moment(),
then = moment(ele.dataset.target),
before = ele.children[0],
after = ele.children[1],
isBefore = then.isBefore(now),
monthsHave31Days = [0, 2, 4, 6, 7, 9, 11], // 月份从0开始
year = isBefore ? now.year() - then.year() : then.year() - now.year(),
month = isBefore ? now.month() - then.month() : then.month() - now.month(),
day = isBefore ? now.date() - then.date() : then.date() - now.date(),
hour = isBefore ? now.hour() - then.hour() : then.hour() - now.hour(),
minute = isBefore ? now.minute() - then.minute() : then.minute() - now.minute(),
second = isBefore ? now.second() - then.second() : then.second() - now.second(),
result = "";
if (second < 0) {
minute--;
second += 60;
}
if (minute < 0) {
hour--;
minute += 60;
}
if (hour < 0) {
day--;
hour += 24;
}
if (day < 0) {
month--;
if (monthsHave31Days.includes((isBefore ? then : now).month())) {
day += 31;
} else if ((isBefore ? then : now).month() === 1) {
if ((isBefore ? then : now).year() % 4 === 0) {
day += 29;
} else {
day += 28;
}
} else {
day += 30;
}
}
if (month < 0) {
year--;
month += 12;
}
if (year > 0) {
result += `<span class="countdown-num">${year}</` + 'span>年';
}
if (month > 0) {
result += `<span class="countdown-num">${month}</` + 'span>' + ele.dataset.month;
} else if (result !== "") {
result += `<span class="countdown-num">${0}</` + 'span>' + ele.dataset.month;
}
if (day > 0) {
result += `<span class="countdown-num">${day}</` + 'span>天';
} else if (result !== "") {
result += `<span class="countdown-num">${0}</` + 'span>天';
}
if(year == 0 && month == 0) {
if (hour > 0) {
result += `<span class="countdown-num">${hour}</` + 'span>' + ele.dataset.hour;
} else if (result !== "") {
result += `<span class="countdown-num">${0}</` + 'span>' + ele.dataset.hour;
}
if(day == 0) {
if (minute > 0) {
result += `<span class="countdown-num">${minute}</` + 'span>分';
} else if (result !== "") {
result += `<span class="countdown-num">${0}</` + 'span>分';
}
if (second > 0) {
result += `<span class="countdown-num">${second}</` + 'span>秒';
} else if (result !== "") {
result += `<span class="countdown-num">${0}</` + 'span>秒';
}
}
}
if(isBefore) {
var countdown = before.querySelector( '.countdown' );
if(countdown) { countdown.innerHTML = result; }
before.style.display = "";
after.style.display = "none";
}
else {
var countdown = after.querySelector( '.countdowm' );
if(countdown) { countdown.innerHTML = result; }
after.style.display = "";
before.style.display = "none";
}
};
const run = () => {
document.querySelectorAll( '.countdownNode:not(.disabled)' ).forEach((ele) => {
fromNow(ele);
ele.style.visibility = "visible";
});
};
document.querySelectorAll( '.countdownNode' ).forEach((ele) => {
const time = moment(ele.dataset.target);
if (!time || !time.isValid()) {
ele.classList.add("error", "disabled")
ele.innerHTML = "(发生了致命错误!)";
return;
}
var before = ele.children[0],
after = ele.children[1];
before.innerHTML = before.innerHTML.replace("$1", '<span class="countdown"><' + '/span>');
after.innerHTML = after.innerHTML.replace("$1", '<span class="countdown"><' + '/span>');
});
run();
window.setInterval(run, 1000);
});
//