LLWiki正在建设中,欢迎加入我们!
“Widget:Countdown”的版本间差异
跳转到导航
跳转到搜索
小 标签:移动版网页编辑 移动版编辑 |
小 标签:移动版网页编辑 移动版编辑 |
||
第2行: | 第2行: | ||
请使用{{tl|countdown}}调用。}}</noinclude><includeonly><!--{if !isset($wgCountdown) || !$wgCountdown}--><!--{assign var="wgCountdown" value=true scope="global"}--><script src="/mediawiki/resources/lib/moment/moment.js"></script><script> |
请使用{{tl|countdown}}调用。}}</noinclude><includeonly><!--{if !isset($wgCountdown) || !$wgCountdown}--><!--{assign var="wgCountdown" value=true scope="global"}--><script src="/mediawiki/resources/lib/moment/moment.js"></script><script> |
||
//</includeonly>Javascript脚本:<pre lang=js |
//</includeonly>Javascript脚本:<pre lang=js> |
||
"use strict"; |
"use strict"; |
||
window.addEventListener('load', function () { |
window.addEventListener('load', function () { |
||
第48行: | 第48行: | ||
let result = ""; |
let result = ""; |
||
if (year > 0) { |
if (year > 0) { |
||
result += `<span class="countdown-num">${year}</span>年 |
result += `<span class="countdown-num">${year}</` + 'span>年'; |
||
} |
} |
||
if (month > 0) { |
if (month > 0) { |
||
result += `<span class="countdown-num">${month}</span>月 |
result += `<span class="countdown-num">${month}</` + 'span>月'; |
||
} else if (result !== "") { |
} else if (result !== "") { |
||
result += `<span class="countdown-num">${0}</span>月 |
result += `<span class="countdown-num">${0}</` + 'span>月'; |
||
} |
} |
||
if (day > 0) { |
if (day > 0) { |
||
result += `<span class="countdown-num">${day}</span>日 |
result += `<span class="countdown-num">${day}</` + 'span>日'; |
||
} else if (result !== "") { |
} else if (result !== "") { |
||
result += `<span class="countdown-num">${0}</span>日 |
result += `<span class="countdown-num">${0}</` + 'span>日'; |
||
} |
} |
||
if (hour > 0) { |
if (hour > 0) { |
||
result += `<span class="countdown-num">${hour}</span>小时 |
result += `<span class="countdown-num">${hour}</` + 'span>小时'; |
||
} else if (result !== "") { |
} else if (result !== "") { |
||
result += `<span class="countdown-num">${0}</span>小时 |
result += `<span class="countdown-num">${0}</` + 'span>小时'; |
||
} |
} |
||
if (minute > 0) { |
if (minute > 0) { |
||
result += `<span class="countdown-num">${minute}</span>分 |
result += `<span class="countdown-num">${minute}</` + 'span>分'; |
||
} else if (result !== "") { |
} else if (result !== "") { |
||
result += `<span class="countdown-num">${0}</span>分 |
result += `<span class="countdown-num">${0}</` + 'span>分'; |
||
} |
} |
||
if (second > 0) { |
if (second > 0) { |
||
result += `<span class="countdown-num">${second}</span>秒 |
result += `<span class="countdown-num">${second}</` + 'span>秒'; |
||
} else if (result !== "") { |
} else if (result !== "") { |
||
result += `<span class="countdown-num">${0}</span>秒 |
result += `<span class="countdown-num">${0}</` + 'span>秒'; |
||
} |
} |
||
return (isBefore ? before : after).replace("$1", result.replace(/(\d) /g, "$1")); |
return (isBefore ? before : after).replace("$1", result.replace(/(\d) /g, "$1")); |
||
第94行: | 第94行: | ||
window.setInterval(run, 1000); |
window.setInterval(run, 1000); |
||
}); |
}); |
||
// |
//</pre> |
||
<includeonly> |
<includeonly> |
||
</script> |
</script> |
2020年8月20日 (四) 11:14的版本
Javascript脚本:
"use strict";
window.addEventListener('load', function () {
var timeObj = {};
const fromNow = function (then, before, after) {
const now = moment();
const isBefore = then.isBefore(now);
const monthsHave31Days = [0, 2, 4, 6, 7, 9, 11]; // 月份从0开始
let 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();
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;
}
let result = "";
if (year > 0) {
result += `<span class="countdown-num">${year}</` + 'span>年';
}
if (month > 0) {
result += `<span class="countdown-num">${month}</` + 'span>月';
} else if (result !== "") {
result += `<span class="countdown-num">${0}</` + 'span>月';
}
if (day > 0) {
result += `<span class="countdown-num">${day}</` + 'span>日';
} else if (result !== "") {
result += `<span class="countdown-num">${0}</` + 'span>日';
}
if (hour > 0) {
result += `<span class="countdown-num">${hour}</` + 'span>小时';
} else if (result !== "") {
result += `<span class="countdown-num">${0}</` + 'span>小时';
}
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>秒';
}
return (isBefore ? before : after).replace("$1", result.replace(/(\d) /g, "$1"));
};
const run = () => {
document.querySelectorAll(".countdownNode:not(.disabled)").forEach((ele) => {
ele.innerHTML = fromNow(timeObj[ele.id], ele.dataset.before || "$1前", ele.dataset.after || "还剩$1");
});
};
document.querySelectorAll(".countdownNode").forEach((ele) => {
const time = moment(ele.dataset.target);
if (!time || !time.isValid()) {
ele.classList.add("error", "disabled")
ele.innerHTML = "(发生了致命错误!)";
return;
}
timeObj[ele.id] = time;
});
run();
window.setInterval(run, 1000);
});
//
CSS样式表:
*/
.countdown-num {
display:inline-block;
width:1.25em;
text-align:right;
}
/*