DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> JS、jquery實現幾分鐘前、幾小時前、幾天前等時間差顯示效果的代碼實例
JS、jquery實現幾分鐘前、幾小時前、幾天前等時間差顯示效果的代碼實例
編輯:JavaScript綜合知識     

 在新浪微博首頁看到每條微博後邊顯示的時間並不是標准的年-月-日格式,而是經過換算的時間差,如:發表於5分鐘前、發表於“2小時前”,比起標准的時間顯示格式,貌似更加直觀和人性化

要實現類似功能,用JS就可以,實現方法如下:   一、javascript函數實現: 實例1:    代碼如下: //JavaScript函數: var minute = 1000 * 60; var hour = minute * 60; var day = hour * 24; var halfamonth = day * 15; var month = day * 30; function getDateDiff(dateTimeStamp){ var now = new Date().getTime(); var diffValue = now - dateTimeStamp; if(diffValue < 0){  //若日期不符則彈出窗口告之  //alert("結束日期不能小於開始日期!");  } var monthC =diffValue/month; var weekC =diffValue/(7*day); var dayC =diffValue/day; var hourC =diffValue/hour; var minC =diffValue/minute; if(monthC>=1){  result="發表於" + parseInt(monthC) + "個月前";  }  else if(weekC>=1){  result="發表於" + parseInt(weekC) + "周前";  }  else if(dayC>=1){  result="發表於"+ parseInt(dayC) +"天前";  }  else if(hourC>=1){  result="發表於"+ parseInt(hourC) +"個小時前";  }  else if(minC>=1){  result="發表於"+ parseInt(minC) +"分鐘前";  }else  result="剛剛發表"; return result; }     若你得到的時間格式不是時間戳,可以使用下面的JavaScript函數把字符串轉換為時間戳, 本函數的功能相當於JS版的strtotime:    代碼如下: //js函數代碼:字符串轉換為時間戳 function getDateTimeStamp(dateStr){  return Date.parse(dateStr.replace(/-/gi,"/")); }     實例2:   代碼如下: <script>        function jsDateDiff(publishTime){            var d_minutes,d_hours,d_days;            var timeNow = parseInt(new Date().getTime()/1000);            var d;            d = timeNow - publishTime;            d_days = parseInt(d/86400);            d_hours = parseInt(d/3600);            d_minutes = parseInt(d/60);            if(d_days>0 && d_days<4){                return d_days+"天前";            }else if(d_days<=0 && d_hours>0){                return d_hours+"小時前";            }else if(d_hours<=0 && d_minutes>0){                return d_minutes+"分鐘前";            }else{                var s = new Date(publishTime*1000);                // s.getFullYear()+"年";         return (s.getMonth()+1)+"月"+s.getDate()+"日";            }        }        </script>     二、jquery插件實現   HTML代碼:    代碼如下: <span class="time timeago" title="<fmt:formatDate value="${comment.createAt}" pattern="yyyy-MM-dd HH:mm:ss"/>"></span>     調用代碼:     代碼如下: jQuery("span.timeago").timeago();     插件源碼:      代碼如下: (function (factory) {   if (typeof define === 'function' && define.amd) {     // AMD. Register as an anonymous module.     define(['jquery'], factory);   } else {     // Browser globals     factory(jQuery);   } }(function ($) {   $.timeago = function(timestamp) {     if (timestamp instanceof Date) {       return inWords(timestamp);     } else if (typeof timestamp === "string") {       return inWords($.timeago.parse(timestamp));     } else if (typeof timestamp === "number") {       return inWords(new Date(timestamp));     } else {       return inWords($.timeago.datetime(timestamp));     }   };   var $t = $.timeago;     $.extend($.timeago, {     settings: {       refreshMillis: 60000,       allowFuture: false,       localeTitle: false,       cutoff: 0,       strings: {         prefixAgo: null,         prefixFromNow: null,         suffixAgo: "前",         suffixFromNow: "from now",         seconds: "1分鐘",         minute: "1分鐘",         minutes: "%d分鐘",         hour: "1小時",         hours: "%d小時",         day: "1天",         days: "%d天",         month: "1月",         months: "%d月",         year: "1年",         years: "%d年",         wordSeparator: "",         numbers: []       }     },     inWords: function(distanceMillis) {       var $l = this.settings.strings;       var prefix = $l.prefixAgo;       var suffix = $l.suffixAgo;       if (this.settings.allowFuture) {         if (distanceMillis < 0) {           prefix = $l.prefixFromNow;           suffix = $l.suffixFromNow;         }       }         var seconds = Math.abs(distanceMillis) / 1000;       var minutes = seconds / 60;       var hours = minutes / 60;       var days = hours / 24;       var years = days / 365;         function substitute(stringOrFunction, number) {         var string = $.isFunction(stringOrFunction) ? stringOrFunction(number, distanceMillis) : stringOrFunction;         var value = ($l.numbers && $l.numbers[number]) || number;         return string.replace(/%d/i, value);       }         var words = seconds < 45 && substitute($l.seconds, Math.round(seconds)) ||         seconds < 90 && substitute($l.minute, 1) ||         minutes < 45 && substitute($l.minutes, Math.round(minutes)) ||         minutes < 90 && substitute($l.hour, 1) ||         hours < 24 && substitute($l.hours, Math.round(hours)) ||         hours < 42 && substitute($l.day, 1) ||         days < 30 && substitute($l.days, Math.round(days)) ||         days < 45 && substitute($l.month, 1) ||         days < 365 && substitute($l.months, Math.round(days / 30)) ||         years < 1.5 && substitute($l.year, 1) ||         substitute($l.years, Math.round(years));         var separator = $l.wordSeparator || "";       if ($l.wordSeparator === undefined) { separator = " "; }       return $.trim([prefix, words, suffix].join(separator));     },     parse: function(iso8601) {       var s = $.trim(iso8601);       s = s.replace(/.d+/,""); // remove milliseconds       s = s.replace(/-/,"/").replace(/-/,"/");       s = s.replace(/T/," ").replace(/Z/," UTC");       s = s.replace(/([+-]dd):?(dd)/," $1$2"); // -04:00 -> -0400       return new Date(s);     },     datetime: function(elem) {       var iso8601 = $t.isTime(elem) ? $(elem).attr("datetime") : $(elem).attr("title");       return $t.parse(iso8601);     },     isTime: function(elem) {       // jQuery's `is()` doesn't play well with HTML5 in IE       return $(elem).get(0).tagName.toLowerCase() === "time"; // $(elem).is("time");     }   });     // functions that can be called via $(el).timeago('action')   // init is default when no action is given   // functions are called with context of a single element   var functions = {     init: function(){       var refresh_el = $.proxy(refresh, this);       refresh_el();       var $s = $t.settings;       if ($s.refreshMillis > 0) {         setInterval(refresh_el, $s.refreshMillis);       }     },     update: function(time){       $(this).data('timeago', { datetime: $t.parse(time) });       refresh.apply(this);     },     updateFromDOM: function(){       $(this).data('timeago', { datetime: $t.parse( $t.isTime(this) ? $(this).attr("datetime") : $(this).attr("title") ) });       refresh.apply(this);     }   };     $.fn.timeago = function(action, options) {     var fn = action ? functions[action] : functions.init;     if(!fn){       throw new Error("Unknown function name '"+ action +"' for timeago");     }     // each over objects here and call the requested function     this.each(function(){       fn.call(this, options);     });     return this;   };     function refresh() {     var data = prepareData(this);     var $s = $t.settings;       if (!isNaN(data.datetime)) {       if ( $s.cutoff == 0 || distance(data.datetime) < $s.cutoff) {         $(this).text(inWords(data.datetime));       }     }     return this;   }     function prepareData(element) {     element = $(element);     if (!element.data("timeago")) {       element.data("timeago", { datetime: $t.datetime(element) });       var text = $.trim(element.text());       if ($t.settings.localeTitle) {         element.attr("title", element.data('timeago').datetime.toLocaleString());       } else if (text.length > 0 && !($t.isTime(element) && element.attr("title"))) {         element.attr("title", text);       }     }     return element.data("timeago");   }     function inWords(date) {     return $t.inWords(distance(date));   }     function distance(date) {     return (new Date().getTime() - date.getTime());   }     // fix for IE6 suckage   document.createElement("abbr");   document.createElement("time"); }));
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved