Widget:Countdown

JavaScript脚本：

"use strict";
window.addEventListener('load', function () {
    mw.loader.using( 'moment' ).then(function() {
        const fromNow = function (ele) {
            let now = moment(),
                then = moment(ele.dataset.target),
                before = ele.children[0],
                after = ele.children[1],
                i18n = ele.dataset.title,
                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><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 = moment(ele.dataset.target);
            if (!time || !time.isValid()) {
                ele.classList.add("error", "disabled")
                ele.textContent = "（时间格式错误！）";
                ele.style.visibility = "visible";
            }
        });
        run();
        window.setInterval(run, 1000);
    });
});
//

CSS样式表：

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