SmartTime是一个JQuery时间格式化插件,方便把时间格式化。

SmartTime

需求

做web开发很经常需要输出时间,为了提高用户体验,我们需要把时间格式化之后再做输出。

一分钟前、两小时前、3天前、、、

我们有时需要把时间输出为这样子的格式,但是页面上面有很多时间,我们在页面模板上格式化这么多时间真的很不方便。

所以,把这个工作移到前端,交给js来出来。

用法

1.引入JQuery和SmartTime。

<script src="jquery-1.11.1.min.js"></script>
<script src="SmartTime.js"></script>

2.页面上输出时间的时候,给dom添加一个选择器(这里加上添加为smartTime的clsaa)以及把时间戳(不是毫秒数)添加到dom里面。默认的dom里面存时间戳的属性都为smartTime。

<div class="smartTime" smartTime="1413700725">2014/10/19 14:38:45</div>
<div class="smartTime" smartTime="1413700525">2014/10/19 14:38:45</div>
<div class="smartTime" smartTime="1413700425">2014/10/19 14:38:45</div>
<div class="smartTime" smartTime="1413700225">2014/10/19 14:38:45</div>
<div class="smartTime" smartTime="1413699125">2014/10/19 14:38:45</div>
<div class="smartTime" smartTime="1413619125">2014/10/19 14:38:45</div>
<div class="smartTime" smartTime="1413599125">2014/10/19 14:38:45</div>
<div class="smartTime" smartTime="1413199125">2014/10/19 14:38:45</div>
<div class="smartTime" smartTime="1412699125">2014/10/19 14:38:45</div>

3.运行插件。

<script type="text/javascript">
    $(function(){
        $(".smartTime").smartTime();
        // or you can do it like this:
        // $(".smartTime").smartTime({
        //     to: "yyyy-MM-dd",
        //     attr: "smartTime"
        // });
    });
</script>

to为格式化的格式,attr为dom里面保存时间戳的属性名。

TODO

让时间自动更新。(1分钟的时间现在显示是一分钟,两分钟之后就应该自动显示为3分钟。)