萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> JS、jquery實現幾分鐘前、幾小時前、幾天前等時間差顯示效果的代碼實例

JS、jquery實現幾分鐘前、幾小時前、幾天前等時間差顯示效果的代碼實例

 在新浪微博首頁看到每條微博後邊顯示的時間並不是標准的年-月-日格式,而是經過換算的時間差,如:發表於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.wor
copyright © 萬盛學電腦網 all rights reserved