There are no README for other languages support. You can translate the content below or just try those functions!
一款基于 JavaScript 的,用于在网页中实时显示网站运行时间的小插件。
博客 实验室
function registerSiteTime(
startFrom = '1970/1/1 00:00:00',
displayFrom = 1,
displayTo = 4,
interval = 1000,
showEmpty = false,
el = '.site-time',
locale = 'zh-CN'
){
const unitsI18N = {
'en-US': {
pluralSuffix: 's',
units: [
{ name: 'milisecond', carryFactor: 1000 },
{ name: 'second', carryFactor: 60 },
{ name: 'minute', carryFactor: 60 },
{ name: 'hour', carryFactor: 24 },
{ name: 'day', carryFactor: 365 },
{ name: 'year', carryFactor: 100 }
]
},
'zh-CN': {
pluralSuffix: '',
units: [
{ name: '毫秒', carryFactor: 1000 },
{ name: '秒', carryFactor: 60 },
{ name: '分钟', carryFactor: 60 },
{ name: '小时', carryFactor: 24 },
{ name: '天', carryFactor: 365 },
{ name: '年', carryFactor: 100 }
]
}
}
const { pluralSuffix, units } = locale === 'en-US' ? unitsI18N['en-US'] : unitsI18N['zh-CN']
const startFromTime = new Date(startFrom).getTime()
function renderSiteTime(){
let diff = Math.abs(Date.now() - startFromTime)
const parts = []
for (let i = 0; i < units.length && diff > 0; i++){
if (i >= displayTo) {
parts.push(`${diff} ${units[i].name}${diff === 1 ? '' : pluralSuffix}`)
break
}
let unitValue = diff % units[i].carryFactor
diff = Math.floor(diff / units[i].carryFactor)
if (i >= displayFrom && (showEmpty || unitValue > 0)) parts.push(`${unitValue} ${units[i].name}${unitValue === 1 ? '' : pluralSuffix}`)
}
if (!parts.length) {
parts.push(`0 ${units[Math.min(displayFrom, units.length - 1)].name}${pluralSuffix}`)
}
const text = parts.reverse().join(' ')
document.querySelectorAll(el).forEach(dom => dom.innerText = text)
}
renderSiteTime()
return interval ? setInterval(renderSiteTime, interval) : 0
}
var siteTime = registerSiteTime('2026/1/1 00:00:00', 1, 5)-
修改自定义参数。(就是
registerSiteTime后面一串)其中第一个参数填入开始时间的字符串即可。默认值为
'1970/1/1 00:00:00'。后两个参数指定显示的单位范围。对照表如下:
数字 时间单位 1秒 2分钟 3小时 4天 5年 (应当注意,这里的年数计算为每 365 天一年,而非按照自然年。)
例如填入
1, 4会显示xx 天 xx 小时 xx 分钟 xx 秒。默认值为1, 4。第四个参数指定触发间隔,单位毫秒,默认值为
1000。通常根据最小时间单位决定。
例如第二个参数为1(秒)就不用填这个参数。第二个参数为4(天)就将这个参数填为86400000。
特别地,如果不希望显示时间变化(即希望锁定时间),就将这个参数设为0。第五个参数指定了是否显示空时间项,默认为
false。
例如,设为true时显示xx 时 0 分 xx 秒,设为false时则显示xx 时 xx 秒。
特别地,若整个时间都为空时,无论这个参数如何设置,都会选择最小的项显示。例如0 秒。第六个参数指定了显示时间的元素选择器,默认值为
'.site-time'。如果需要在其它元素挂载时间,修改这个参数。通常不用填。第七个参数选择了时间的显示语言,默认值为
zh-CN,可选值为'en-US' | 'zh-CN'。
如果需要其他语言或自定义文字,可以对代码进行侵入式修改。通常不用填。 -
在 HTML 文档的任意位置(最好是
<body>标签的尾部)引入文件:
<script src="..."></script>
其中省略部分为 JS 文件存储的绝对/相对路径。
部分框架或博客主题需要通过特殊配置引入,相关内容请阅读对应文档。
比如 Hexo Fluid 可以通过配置项中的custom_js引入。
也可以用<script>...</script>直接包裹源代码并插入 HTML 文档。 -
在 HTML 文档的任意位置插入如下内容,即可显示网站运行时间。
<span class="site-time"></span>
附注及更多内容详见博客。