胖子的基地

今天无意间发现Verycd首页的资源列表中每个资源的下方的发布时间显示是会变动的,很有意思的一个用户体验处理.

其实现如下:
某一段内容源代码:

2009/12/15 13:16:22 发布

经过处理后的源代码:

54分钟前发布

将class为”date-time”的span标签的innerHTML变成了span标签的title内容,后计算出其时间与当前时间差作为span标签的新innerHTML

实现完整源代码(javascript)如下:

/**
* @desc VeryCD(TM) 动态更改时间格式
*
* 用到 prototype.js 的 document.getElementsByClassName
* 现已改用 YAHOO UI 了
*
* @usage
* 将页面中需要更改的时间用  包含
* 页面中时间格式为: 年/月/日 时:分:秒 或 年-月-日 时:分:秒
* 其中年为 4 位数字，其他都为 2 位数字，不足两位前面加 0 补全
* 并将该 JS 放在 body 的最后
* 
*
* @author ApolloPY 
*
* Copyright 2005 VeryCD Team and ApolloPY
* Some Rights Reserved
*/

function dynamicTime() {

    /**
     * 取当前客户端时区和服务器时区之差
     * @return ms
     */
    this.getTCOffset = function() {
        var d, localTZ, offset;
        var serverTZ = -480;// 服务器时区偏移值 分钟

        d = new Date();
        localTZ = d.getTimezoneOffset();// 客户机本地时区偏移值 分钟
        offset  = (serverTZ-localTZ)*60*1000;

        return(offset);
    }

    /**
     * 将 年/月/日 时:分:秒 或 年-月-日 时:分:秒 格式的时间转换成毫秒
     * 返回的时间 时区是客户端的时区 默认服务器端的时区是+8
     * @return ms
     */
    this.getMsTime = function(timeString) {
        var re, r, msTime, offset;

        re = /(\d{4})[\/-](\d{2})[\/-](\d{2})\s(\d{2})\:(\d{2})\:(\d{2})/;
        r  = timeString.match(re);
        if (r == null) {
            return false;
        }

        msTime = Date.parse(r[2]+"/"+r[3]+"/"+r[1]+" "+r[4]+":"+r[5]+":"+r[6]);
        offset  = this.getTCOffset();// 取当前客户端时区和服务器时区之差
        msTime += offset;

        return(msTime);
    }

    /**
     * 格式化时间
     * @return str
     */
    this.formatTime = function(timeSting, key) {
        var SecMilli = 1000;// 秒
        var MinMilli = SecMilli * 60;// 分
        var HrMilli  = MinMilli * 60;// 小时
        var DyMilli  = HrMilli * 24;// 天

        // 输入的时间
        var toMsTime = this.getMsTime(timeSting);
        if (toMsTime == false) {
            return timeSting;
        }
        var toTime = new Date(toMsTime);

        // 当前时间
        var now = new Date();
        var localMsTime = now.getTime();

        // 时间差
        var offset = localMsTime - toMsTime;

        // 格式
        var forTime;

        if ( Math.floor(offset / SecMilli) < 0 ) {
            if ( Math.floor(offset / MinMilli) < -15 ) {
                now.setHours(0, 0, 0, 0);
                toTime.setHours(0, 0, 0, 0);
                offset      = now.getTime() - toTime.getTime();
                offsetDy    = Math.floor(offset / DyMilli);

                toYear      = toTime.getFullYear();
                toMonth     = toTime.getMonth() + 1;
                toDay       = toTime.getDate();
                forTime = toYear + "/" + toMonth + "/" + toDay;
                if (first ===1) arrayHour = arrayHour.concat(key);
            } else {
                forTime = "刚才";
                if (first ===1) arraySecond = arraySecond.concat(key);
            }
        } else if ( Math.floor(offset / SecMilli) < 60 ) {
            forTime = Math.floor(offset / SecMilli) + "秒前";
            if (first ===1) arraySecond = arraySecond.concat(key);
        } else if ( Math.floor(offset / MinMilli) < 60 ) {
            forTime = Math.floor(offset / MinMilli) + "分钟前";
            if (first ===1) arrayMinute = arrayMinute.concat(key);
        } else if ( Math.floor(offset / HrMilli) < 24 ) {
            forTime = Math.floor(offset / HrMilli) + "小时前";
            if (first ===1) arrayHour = arrayHour.concat(key);
        } else {
            /////////////////////////////////////////////////
            now.setHours(0, 0, 0, 0);
            toTime.setHours(0, 0, 0, 0);
            offset      = now.getTime() - toTime.getTime();
            offsetDy    = Math.floor(offset / DyMilli);

            toYear      = toTime.getFullYear();
            toMonth     = toTime.getMonth() + 1;
            toDay       = toTime.getDate();

            if ( offsetDy == 1 ) {
                forTime = "昨天 ";
            } else if ( offsetDy == 2 ) {
                forTime = "前天 ";
            } else if (now.getFullYear() == toYear) {
                forTime = toMonth + "月" + toDay + "日";
            } else {
                forTime = toYear + "/" + toMonth + "/" + toDay;
            }

        }

        return(forTime);
    }

    /**
    * 遍历页面里的时间元素 调用 formatTime 更改时间格式
    *
    */
    this.updatePage = function(arrayKey) {
        if (arrayKey.length) {
            for (var k=0; k < arrayKey.length; k++) {
                time[arrayKey[k]].innerHTML = this.formatTime(timeAll[arrayKey[k]], arrayKey[k]);
            }
        }
    }

}

var time = getElementsByClassName('date-time');

if (time.length) {
    var arraySecond = new Array();
    var arrayMinute = new Array();
    var arrayHour   = new Array();

    var timeAll = new Array();

    var dynamicTime = new dynamicTime();

    var first = 1;
    for (var i=0; i < time.length; i++) {
        timeAll[i] = time[i].innerHTML;
        time[i].innerHTML = dynamicTime.formatTime(timeAll[i], i);
        if (time[i].title == '') {
            time[i].title = timeAll[i];
        }
    }
    first = 0;

    if (arraySecond.length > 0) setInterval('dynamicTime.updatePage(arraySecond)', 1000);
    if (arrayMinute.length > 0) setInterval('dynamicTime.updatePage(arrayMinute)', 60000);
    if (arrayHour.length > 0) setInterval('dynamicTime.updatePage(arrayHour)', 3600000);
}