MCBBS Wiki欢迎您共同参与编辑!在参与编辑之前请先阅读Wiki方针。
如果在编辑的过程中遇到了什么问题,可以去讨论板提问。
为了您能够无阻碍地参与编辑 未验证/绑定过邮箱的用户,请尽快绑定/验证。
MCBBS Wiki GitHub群组已上线!
您可以在回声洞中发表吐槽!
服务器状态监控。点击进入
本站由MCBBS用户自行搭建,与MCBBS及东银河系漫游指南(北京)科技有限公司没有从属关系。点此了解 MCBBS Wiki 不是什么>>
微件:TimeDiff:修订间差异
跳到导航
跳到搜索
Salt lovely(留言 | 贡献) (重构 salt-time-diff) |
Salt lovely(留言 | 贡献) 小 (添加简化输出模式) |
||
(未显示同一用户的1个中间版本) | |||
第15行: | 第15行: | ||
//! 实时更新则额外加上 real-time ——结束时间会强制改为当前时间 |
//! 实时更新则额外加上 real-time ——结束时间会强制改为当前时间 |
||
//! 更复杂的显示请额外加上 complex ——可以用CSS修改渲染样式 |
//! 更复杂的显示请额外加上 complex ——可以用CSS修改渲染样式 |
||
//! 如果时间是UTC请额外加上 utc |
|||
//! 简化输出请额外加上 simple |
|||
//! ">{起始时间}SPLIT{结束时间}SPLIT{指令(d-天,h-小时,m-分钟,s-秒,M-毫秒)}</span> |
//! ">{起始时间}SPLIT{结束时间}SPLIT{指令(d-天,h-小时,m-分钟,s-秒,M-毫秒)}</span> |
||
var UTCOffset = new Date().getTimezoneOffset() * 60 * 1e3; |
|||
var cmdAttr = "data-salt-time-diff-command"; |
var cmdAttr = "data-salt-time-diff-command"; |
||
var startAttr = "data-salt-time-diff-start"; |
var startAttr = "data-salt-time-diff-start"; |
||
var endAttr = "data-salt-time-diff-end"; |
var endAttr = "data-salt-time-diff-end"; |
||
var i18n = { |
|||
function getDate(time) { |
|||
year: "年", |
|||
month: "个月", |
|||
day: "天", |
|||
hour: "小时", |
|||
minute: "分钟", |
|||
second: "秒", |
|||
ms: "毫秒" |
|||
}; |
|||
function getDate(time, utc = false) { |
|||
if (!time) |
if (!time) |
||
return new Date(); |
return new Date(); |
||
if (/^\d+$/.test(time.trim())) { |
if (/^\d+$/.test(time.trim())) { |
||
const d2 = new Date(+time); |
const d2 = new Date(+time); |
||
if (!isNaN(d2.valueOf())) |
if (!isNaN(d2.valueOf())) { |
||
if (utc) |
|||
d2.setTime(d2.getTime() + UTCOffset); |
|||
return d2; |
return d2; |
||
else |
} else |
||
return new Date(); |
return new Date(); |
||
} |
} |
||
第35行: | 第49行: | ||
return new Date(); |
return new Date(); |
||
} |
} |
||
function timeDiff( |
function timeDiff({ |
||
t1, |
|||
t2, |
|||
cmd = "d", |
|||
cpx = false, |
|||
simple = false |
|||
}) { |
|||
const _ms = t1.valueOf() - t2.valueOf(); |
|||
const isBefore = t1.valueOf() - t2.valueOf() > 0; |
|||
const d1 = new Date(isBefore ? t2 : t1); |
|||
const d2 = new Date(isBefore ? t1 : t2); |
|||
let ms = Math.abs(_ms); |
let ms = Math.abs(_ms); |
||
const |
const diff = { isBefore }; |
||
if (cmd.indexOf("y") != -1) { |
|||
let res = cpx ? isBefore ? '<span class="salt-time-diff-txt salt-time-diff-before">还有</span>' : '<span class="salt-time-diff-txt salt-time-diff-after">已过去</span>' : ""; |
|||
let years = d2.getFullYear() - d1.getFullYear(); |
|||
d1.setFullYear(d2.getFullYear()); |
|||
if (d1.getTime() > d2.getTime()) { |
|||
years -= 1; |
|||
d1.setFullYear(d1.getFullYear() - 1); |
|||
} |
|||
ms = d2.getTime() - d1.getTime(); |
|||
if (!simple || years) |
|||
diff.year = years; |
|||
} |
|||
if (cmd.indexOf("o") != -1) { |
|||
let years = d2.getFullYear() - d1.getFullYear(); |
|||
d1.setFullYear(d2.getFullYear()); |
|||
if (d1.getTime() > d2.getTime()) { |
|||
years -= 1; |
|||
d1.setFullYear(d1.getFullYear() - 1); |
|||
} |
|||
let months = d2.getMonth() - d1.getMonth(); |
|||
if (d2.getFullYear() - d1.getFullYear()) |
|||
months += 12; |
|||
d1.setFullYear(d2.getFullYear()); |
|||
d1.setMonth(d2.getMonth()); |
|||
if (d1.getTime() > d2.getTime()) { |
|||
months -= 1; |
|||
d1.setMonth(d1.getMonth() - 1); |
|||
} |
|||
ms = d2.getTime() - d1.getTime(); |
|||
if (!simple || months || "year" in diff) |
|||
diff.month = years * 12 + months; |
|||
} |
|||
if (cmd.indexOf("d") != -1) { |
if (cmd.indexOf("d") != -1) { |
||
let days = Math.floor(ms / (24 * 3600 * 1e3)); |
let days = Math.floor(ms / (24 * 3600 * 1e3)); |
||
ms = ms % (24 * 3600 * 1e3); |
ms = ms % (24 * 3600 * 1e3); |
||
if (!simple || days || "year" in diff || "month" in diff) |
|||
res += cpx ? `<span class="salt-time-diff-res salt-time-diff-res-day">${days}</span>天` : `${days}天`; |
|||
diff.day = days; |
|||
} |
} |
||
if (cmd.indexOf("h") != -1) { |
if (cmd.indexOf("h") != -1) { |
||
let hours = Math.floor(ms / (3600 * 1e3)); |
let hours = Math.floor(ms / (3600 * 1e3)); |
||
ms = ms % (3600 * 1e3); |
ms = ms % (3600 * 1e3); |
||
if (!simple || hours || "day" in diff) |
|||
res += cpx ? `<span class="salt-time-diff-res salt-time-diff-res-hour">${hours}</span>小时` : `${hours}小时`; |
|||
diff.hour = hours; |
|||
} |
} |
||
if (cmd.indexOf("m") != -1) { |
if (cmd.indexOf("m") != -1) { |
||
let minutes = Math.floor(ms / (60 * 1e3)); |
let minutes = Math.floor(ms / (60 * 1e3)); |
||
ms = ms % (60 * 1e3); |
ms = ms % (60 * 1e3); |
||
if (!simple || minutes || "hour" in diff) |
|||
res += cpx ? `<span class="salt-time-diff-res salt-time-diff-res-minute">${minutes}</span>分钟` : `${minutes}分钟`; |
|||
diff.minute = minutes; |
|||
} |
} |
||
if (cmd.indexOf("s") != -1) { |
if (cmd.indexOf("s") != -1) { |
||
let seconds = Math.floor(ms / 1e3); |
let seconds = Math.floor(ms / 1e3); |
||
ms = ms % 1e3; |
ms = ms % 1e3; |
||
if (!simple || seconds || "minute" in diff) |
|||
res += cpx ? `<span class="salt-time-diff-res salt-time-diff-res-second">${seconds}</span>秒` : `${seconds}秒`; |
|||
diff.second = seconds; |
|||
} |
} |
||
if (cmd.indexOf("M") != -1 || |
if (cmd.indexOf("M") != -1 || ms === Math.abs(_ms)) { |
||
diff.ms = ms; |
|||
res += cpx ? `<span class="salt-time-diff-res salt-time-diff-res-ms">${ms}</span>毫秒` : `${ms}毫秒`; |
|||
} |
|||
return readableTimeTxt(diff, cpx); |
|||
} |
|||
function readableTimeTxt(timeObj, cpx = false) { |
|||
let res = cpx ? timeObj.isBefore ? '<span class="salt-time-diff-txt salt-time-diff-before">还有</span>' : '<span class="salt-time-diff-txt salt-time-diff-after">已过去</span>' : ""; |
|||
const loop = [ |
|||
"year", |
|||
"month", |
|||
"day", |
|||
"hour", |
|||
"minute", |
|||
"second", |
|||
"ms" |
|||
]; |
|||
for (let i = 0; i < loop.length; i++) { |
|||
const t = loop[i]; |
|||
if (t in timeObj) { |
|||
res += cpx ? `<span class="salt-time-diff-res salt-time-diff-res-${t}">${timeObj[t]}</span><span class="salt-time-diff-txt salt-time-diff-txt-${t}">${i18n[t]}</span>` : `${timeObj[t]}${i18n[t]}`; |
|||
} |
|||
} |
} |
||
return res; |
return res; |
||
第68行: | 第145行: | ||
for (let i = 0; i < elems.length; i++) { |
for (let i = 0; i < elems.length; i++) { |
||
let el = elems[i]; |
let el = elems[i]; |
||
const utc = el.classList.contains("utc"); |
|||
let txt = (el.textContent || "").replace(/[年月日]/g, "/").replace(/[;:]/g, ":").split("SPLIT"); |
|||
let |
let txt = (el.textContent || "").split("SPLIT"); |
||
const t1 = getDate(txt[0].replace(/[年月日]/g, "/").replace(/[;:]/g, ":"), utc); |
|||
const t2 = getDate(txt[1].replace(/[年月日]/g, "/").replace(/[;:]/g, ":"), utc); |
|||
let cmd = "d"; |
let cmd = "d"; |
||
if (txt.length > 2) { |
if (txt.length > 2) { |
||
cmd = txt[2].replace(/[天日]/, "d").replace(/小?时/, "h").replace(/分钟?/, "m").replace("毫秒", "M").replace("秒", "s"); |
cmd = txt[2].replace(/年份?/, "y").replace(/月份?/, "o").replace(/[天日]/, "d").replace(/小?时/, "h").replace(/分钟?/, "m").replace("毫秒", "M").replace("秒", "s"); |
||
} |
} |
||
const cps = el.classList.contains("complex"); |
|||
const t = timeDiff(time1.getTime() - time2.getTime(), cmd, cps); |
|||
if (!cps) |
|||
el.textContent = t; |
|||
else |
|||
el.innerHTML = t; |
|||
el.classList.remove("salt-time-diff"); |
el.classList.remove("salt-time-diff"); |
||
el.classList.add("salt-time-diff-done"); |
el.classList.add("salt-time-diff-done"); |
||
el.setAttribute(cmdAttr, cmd); |
el.setAttribute(cmdAttr, cmd); |
||
el.setAttribute(startAttr, |
el.setAttribute(startAttr, t1.toString()); |
||
el.setAttribute(endAttr, |
el.setAttribute(endAttr, t2.toString()); |
||
handleElement(el); |
|||
} |
|||
} |
|||
function handleElement(el) { |
|||
const t1 = getDate(el.getAttribute(startAttr)); |
|||
const t2 = getDate(); |
|||
const cmd = el.getAttribute(cmdAttr) || "d"; |
|||
const simple = el.classList.contains("simple"); |
|||
const cpx = el.classList.contains("complex"); |
|||
const t = timeDiff({ t1, t2, cmd, cpx, simple }); |
|||
if (!cpx) { |
|||
if (el.textContent != t) |
|||
el.textContent = t; |
|||
} else { |
|||
if (el.innerHTML != t) |
|||
el.innerHTML = t; |
|||
} |
} |
||
} |
} |
||
第97行: | 第185行: | ||
const update = () => { |
const update = () => { |
||
for (let i = 0; i < elems.length; i++) { |
for (let i = 0; i < elems.length; i++) { |
||
handleElement(elems[i]); |
|||
const el = elems[i]; |
|||
const time1 = getDate(el.getAttribute(startAttr)); |
|||
const time2 = getDate(); |
|||
const cmd = el.getAttribute(cmdAttr) || "d"; |
|||
const cps = el.classList.contains("complex"); |
|||
const t = timeDiff(time1.getTime() - time2.getTime(), cmd, cps); |
|||
if (!cps) { |
|||
if (el.textContent != t) |
|||
el.textContent = t; |
|||
} else { |
|||
if (el.innerHTML != t) |
|||
el.innerHTML = t; |
|||
} |
|||
}, 0); |
|||
} |
} |
||
}; |
}; |
2022年10月4日 (二) 19:02的最新版本
请使用模板{{时间差}}。
原微件搬运自我的世界玩家社区Wiki,原作者:Salt_lovely(原作者即搬运者)。