显示相对时间的JQuery插件 - Smart Time Ago

以前使用的相对时间都是后台用php实现的,最不爽的就是不能实时更新,于是想想还是用js实现吧,所以就找了一下有没有功能单一点的JQuery插件,还真找到了一个 —— Smart Time Ago。

下边说使用:

Smart Time Ago 虽然有Bower文件,但其官方文档并没有说明,只写了npm的安装方式。不过我是直接下载Zip包使用的,用法如下

1. 解压后,载入两个文件

<script type="text/javascript" src="./timeago.js" ></script>
<script type="text/javascript" src="./locales/timeago.zh-cn.js" ></script>

2. 然后在需要使用相对时间的地方写上time标签

<time class="timeago" datetime="<?=$item['timeline']?>"></time>

3. 然后在页面载入完成后统一触发下就好了

<script>
    $(".timeago").timeago();
</script>

4. 最后说一下插件的自定义配置使用

<script>   
    $('.timeago').time({
    selector: 'time.timeago',
    attr: 'datetime',
    dir: 'up',
    lang: {
        units: {
            second: "second",
            seconds: "seconds",
            minute: "minute",
            minutes: "minutes",
            hour: "hour",
            hours: "hours",
            day: "day",
            days: "days",
            month: "month",
            months: "months",
            year: "year",
            years: "years"
        },
        prefixes: {
            lt: "less than a",
            about: "about",
            over: "over",
            almost: "almost",
            ago: ""
        },
        suffix: ' ago'
    });        
</script>

上面有几个常用的配置知道就行,其他的就无所谓了哈。其实用JS来现实相对时间的好处是,最后要说的就是这个插件本来是没有按照秒去现实的,这里我自己改粑改粑也就可以显示了。

Demo    Smart Time Ago

上面有demo瞅瞅,当用户在看页面时,显示的时间会随着时间的流逝而改变,很酷对吧。

友荐云推荐