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 () { |
||
const fromNow = function (ele) { |
const fromNow = function (ele) { |
||
let now = |
let now = new Date(), |
||
then = |
then = new Date(ele.dataset.target), |
||
before = ele.children[0], |
before = ele.children[0], |
||
after = ele.children[1], |
after = ele.children[1], |
||
i18n = ele.dataset.title, |
i18n = ele.dataset.title, |
||
isBefore = |
isBefore = (then < now), |
||
monthsHave31Days = [0, 2, 4, 6, 7, 9, 11], // 月份从0开始 |
monthsHave31Days = [0, 2, 4, 6, 7, 9, 11], // 月份从0开始 |
||
year = isBefore ? now. |
year = isBefore ? now.getFullYear() - then.getFullYear() : then.getFullYear() - now.getFullYear(), |
||
month = isBefore ? now. |
month = isBefore ? now.getMonth() - then.getMonth() : then.getMonth() - now.getMonth(), |
||
day = isBefore ? now. |
day = isBefore ? now.getDate() - then.getDate() : then.getDate() - now.getDate(), |
||
hour = isBefore ? now. |
hour = isBefore ? now.getHours() - then.getHours() : then.getHours() - now.getHours(), |
||
minute = isBefore ? now. |
minute = isBefore ? now.getMinutes() - then.getMinutes() : then.getMinutes() - now.getMinutes(), |
||
second = isBefore ? now. |
second = isBefore ? now.getSeconds() - then.getSeconds() : then.getSeconds() - getSeconds(), |
||
result = ""; |
result = ""; |
||
if (second < 0) { |
if (second < 0) { |
||
第34行: | 第34行: | ||
if (day < 0) { |
if (day < 0) { |
||
month--; |
month--; |
||
if (monthsHave31Days.includes((isBefore ? then : now). |
if (monthsHave31Days.includes( (isBefore ? then : now).getMonth() )) { day += 31; } |
||
else if ((isBefore ? then : now). |
else if ((isBefore ? then : now).getMonth() === 1) { |
||
if ((isBefore ? then : now). |
if ((isBefore ? then : now).getFullYear() % 4 === 0) { day += 29; } |
||
else { day += 28; } |
else { day += 28; } |
||
} |
} |
||
第45行: | 第45行: | ||
month += 12; |
month += 12; |
||
} |
} |
||
if (year > 0) { result += `<span class="countdown-num">${year}</ |
if (year > 0) { result += `<span class="countdown-num">${year}</${"span"}>年`; } |
||
if (month > 0) { result += `<span class="countdown-num">${month}</ |
if (month > 0) { result += `<span class="countdown-num">${month}</${"span"}><span class="countdown-month"></${"span"}>`; } |
||
else if (result !== "") { result += `<span class="countdown-num"> |
else if (result !== "") { result += `<span class="countdown-num">0</${"span"}><span class="countdown-month"></${"span"}>`; } |
||
if (day > 0) { result += `<span class="countdown-num">${day}</ |
if (day > 0) { result += `<span class="countdown-num">${day}</${"span"}>天`; } |
||
else if (result !== "") { result += `<span class="countdown-num"> |
else if (result !== "") { result += `<span class="countdown-num">0</${"span"}>天`; } |
||
if(year == 0 && month == 0) { |
if(year == 0 && month == 0) { |
||
if (hour > 0) { result += `<span class="countdown-num">${hour}</ |
if (hour > 0) { result += `<span class="countdown-num">${hour}</${"span"}><span class="countdown-hour"></${"span"}>`; } |
||
else if (result !== "") { result += `<span class="countdown-num"> |
else if (result !== "") { result += `<span class="countdown-num">0</${"span"}><span class="countdown-hour"></${"span"}>`; } |
||
if(day == 0) { |
if(day == 0) { |
||
if (minute > 0) { result += `<span class="countdown-num">${minute}</ |
if (minute > 0) { result += `<span class="countdown-num">${minute}</${"span"}>分'; } |
||
else if (result !== "") { result += `<span class="countdown-num"> |
else if (result !== "") { result += `<span class="countdown-num">0</${"span"}>分'; } |
||
if (second > 0) { result += `<span class="countdown-num">${second}</ |
if (second > 0) { result += `<span class="countdown-num">${second}</${"span"}>秒'; } |
||
else if (result !== "") { result += `<span class="countdown-num"> |
else if (result !== "") { result += `<span class="countdown-num">0</${"span"}>秒'; } |
||
} |
} |
||
} |
} |
||
第88行: | 第88行: | ||
}; |
}; |
||
document.querySelectorAll( '.countdownNode' ).forEach((ele) => { |
document.querySelectorAll( '.countdownNode' ).forEach((ele) => { |
||
const time = |
const time = new Date(ele.dataset.target); |
||
if ( |
if (!time.getTime()) { |
||
ele.classList.add("error", "disabled") |
ele.classList.add("error", "disabled") |
||
ele.textContent = "(时间格式错误!)"; |
ele.textContent = "(时间格式错误!)"; |
2020年10月30日 (五) 05:47的版本
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() - 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;
}
/*