Widget:Countdown

JavaScript脚本：

"use strict";
window.addEventListener('load', function () {
    const fromNow = function (ele) {
        let now = new Date(),
            then = new Date(ele.dataset.target),
            before = ele.children[0],
            after = ele.children[1],
            i18n = ele.dataset.title,
            isBefore = (then < now),
            monthsHave31Days = [0, 2, 4, 6, 7, 9, 11], // 月份从0开始
            year = isBefore ? now.getFullYear() - then.getFullYear() : then.getFullYear() - now.getFullYear(),
            month = isBefore ? now.getMonth() - then.getMonth() : then.getMonth() - now.getMonth(),
            day = isBefore ? now.getDate() - then.getDate() : then.getDate() - now.getDate(),
            hour = isBefore ? now.getHours() - then.getHours() : then.getHours() - now.getHours(),
            minute = isBefore ? now.getMinutes() - then.getMinutes() : then.getMinutes() - now.getMinutes(),
            second = isBefore ? now.getSeconds() - then.getSeconds() : then.getSeconds() - now.getSeconds(),
            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).getMonth() )) { day += 31; }
            else if ((isBefore ? then : now).getMonth() === 1) {
                if ((isBefore ? then : now).getFullYear() % 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"}><span class="countdown-month"></${"span"}>`; }
        else if (result !== "") { result += `<span class="countdown-num">0</${"span"}><span class="countdown-month"></${"span"}>`; }
        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"}><span class="countdown-hour"></${"span"}>`; }
            else if (result !== "") { result += `<span class="countdown-num">0</${"span"}><span class="countdown-hour"></${"span"}>`; }
            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( '.countdown' );
            if(countdown) { countdown.innerHTML = result; }
            after.style.display = "";
            before.style.display = "none";
        }
        var textMonth = ele.querySelector( '.countdown-month' ),
            textHour = ele.querySelector( '.countdown-hour' );
        if(textMonth) { textMonth.textContent = i18n.substring(2); }
        if(textHour) { textHour.textContent = i18n.substring(0,2); }
    };
    const run = () => {
        document.querySelectorAll( '.countdownNode:not(.disabled)' ).forEach((ele) => {
            if(ele.title) {
                ele.dataset.title = ele.title;
                ele.removeAttribute('title');
            }
            fromNow(ele);
            ele.style.visibility = "visible";
        });
    };
    document.querySelectorAll( '.countdownNode' ).forEach((ele) => {
        const time = new Date(ele.dataset.target);
        if (!time.getTime()) {
            ele.classList.add("error", "disabled")
            ele.textContent = "（时间格式错误！）";
            ele.style.visibility = "visible";
        }
    });
    run();
    window.setInterval(run, 1000);
});
//

CSS样式表：

 */
.countdownNode {
	visibility:hidden;
}
/*