需求

做web很经常需要输出时间,为了提高用户体验,我们经常需要把时间格式化。就好像:

SmartTime时间格式化效果

我们往往是页面上面不止一个时间。要是需要把所有时间输出为这样子的格式,我们在页面模板的填充时就会很不方便。

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

原理

通过jquery选择器选择包含需要格式化的时间的dom,然后读取时间戳,与当前的时间进行比较,再输出时间。

为什么要用时间戳?因为时间戳比较容易获得,而且Javascript的从字符串格式化到Date对象的方法满足不了需求,所以才使用时间戳。

用法

1.引入jquery和smart。

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

2.页面上输出时间的时候,给dom添加一个选择器(这里加上添加为smartTime的clsaa)以及把时间戳(不是毫秒数)添加到dom里面。默认的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>

代码

具体代码已经放到了SmartTime上来,请移步这里