LLWiki正在建設中,歡迎加入我們!
「Widget:Countdown」修訂間的差異
跳至導覽
跳至搜尋
小 |
小 |
||
第1行: | 第1行: | ||
<noinclude>{{doc|content={{CCnotice|MGP=widget:countdown}} |
<noinclude>{{doc|content={{CCnotice|MGP=widget:countdown}} |
||
请使用{{tl|countdown}}调用。}}</noinclude><includeonly><!--{if !isset($wgCountdown) || !$wgCountdown}--><!--{assign var="wgCountdown" value=true scope="global"}-- |
请使用{{tl|countdown}}调用。}}</noinclude><includeonly><!--{if !isset($wgCountdown) || !$wgCountdown}--><!--{assign var="wgCountdown" value=true scope="global"}--><script> |
||
//</includeonly>JavaScript脚本:<pre lang=js> |
//</includeonly>JavaScript脚本:<pre lang=js> |
||
"use strict"; |
"use strict"; |
||
window.addEventListener('load', function () { |
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开始 |
|||
monthsHave31Days = [0, 2, 4, 6, 7, 9, 11], // 月份从0开始 |
|||
year = isBefore ? now.year() - then.year() : then.year() - now.year(), |
|||
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 = ""; |
|||
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; } |
|||
} |
} |
||
if (minute < 0) { |
|||
hour--; |
|||
minute += 60; |
|||
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 (hour < 0) { |
|||
day--; |
|||
hour += 24; |
|||
} |
|||
if (day < 0) { |
|||
month--; |
|||
if (monthsHave31Days.includes((isBefore ? then : now).month())) { day += 31; } |
|||
} |
|||
else { |
else if ((isBefore ? then : now).month() === 1) { |
||
if ((isBefore ? then : now).year() % 4 === 0) { day += 29; } |
|||
var countdown = after.querySelector( '.countdown' ); |
|||
else { day += 28; } |
|||
} |
|||
else { day += 30; } |
|||
} |
} |
||
if (month < 0) { |
|||
year--; |
|||
month += 12; |
|||
if(textMonth) { textMonth.textContent = i18n.substring(2); } |
|||
} |
|||
if(textHour) { textHour.textContent = i18n.substring(0,2); } |
|||
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>'; } |
|||
const run = () => { |
|||
else if (result !== "") { result += `<span class="countdown-num">${0}</` + 'span><span class="countdown-month"><' + '/span>'; } |
|||
document.querySelectorAll( '.countdownNode:not(.disabled)' ).forEach((ele) => { |
|||
if (day > 0) { result += `<span class="countdown-num">${day}</` + 'span>天'; } |
|||
if(ele.title) { |
|||
else if (result !== "") { result += `<span class="countdown-num">${0}</` + 'span>天'; } |
|||
ele.dataset.title = ele.title; |
|||
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"; |
|||
} |
} |
||
fromNow(ele); |
|||
ele.style.visibility = "visible"; |
|||
}); |
}); |
||
run(); |
|||
window.setInterval(run, 1000); |
|||
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); |
|||
}); |
}); |
||
//</pre> |
//</pre> |
於 2020年10月5日 (一) 22:32 的修訂
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;
}
/*