Skip to content

About

一款基于 JavaScript 的,用于在网页中实时显示网站运行时间的小插件。

Resources

Stars

0 stars

Watchers

0 watching

Forks

Latest commit

 

History

14 Commits

Folders and files

NameName
Last commit message
Last commit date
 
 
 
 

Repository files navigation

There are no README for other languages support. You can translate the content below or just try those functions!


JS-SiteTime

一款基于 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)

使用方法

  1. 修改自定义参数。(就是 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'。
    如果需要其他语言或自定义文字,可以对代码进行侵入式修改。通常不用填。

  2. 在 HTML 文档的任意位置(最好是 <body> 标签的尾部)引入文件:
    <script src="..."></script>
    其中省略部分为 JS 文件存储的绝对/相对路径。
    部分框架或博客主题需要通过特殊配置引入,相关内容请阅读对应文档。
    比如 Hexo Fluid 可以通过配置项中的 custom_js 引入。
    也可以用 <script>...</script> 直接包裹源代码并插入 HTML 文档。

  3. 在 HTML 文档的任意位置插入如下内容,即可显示网站运行时间。
    <span class="site-time"></span>

附注及更多内容详见博客。

About

一款基于 JavaScript 的,用于在网页中实时显示网站运行时间的小插件。

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages