首頁 > web前端 > js教程 > 主體

JS、jquery實作幾分鐘前、幾小時前、幾天前等時間差顯示效果的程式碼實例分享_javascript技巧

WBOY
發布: 2016-05-16 16:52:48
原創
1340 人瀏覽過

要實現類似功能,用JS就可以,實作方法如下:

一、javascript函數實作:
實例1:

複製程式碼 程式碼如下:


程式碼如下:



程式碼如下:



程式碼如下://JavaScript函數:
var minute = 1000 * 60;
var hour = minute * 60;
var day = hour * 24;
var halfamonth = day>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(diff  //若日期不符則彈出窗口告之
 //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:




複製程式碼

程式碼如下:


實例2:




複製程式碼


程式碼如下:    var d_minutes,d_hours,d_days;       🎜>    var d;      
    d = timeNow - publishTime ;      
    d_days = parseInt(d/86400);      
    d_hours = parse10/3600); 60);      
    if(d_days>0 && d_days        return d_days "天前";      
    } return d_hours "小時前";      
    }else if(d_hours0){      
        return d_minutes "分鐘前";      
  publishTime*1000);      
        // s.getFullYear() "年";
        return (s.getMonth() 1) "月" s.getDate() "日";      
    }  🎜>
二、jquery外掛實作

HTML程式碼:


複製程式碼 程式碼如下:">


呼叫程式碼:


複製程式碼 程式碼如下:jQuery("spantime ").timeago();

外掛程式原始碼:

複製程式碼 程式碼如下:

(function (factory) {
  if (typeof Define === 'function' && Define.amd) {
    // AMD. 註冊匿名模組。
  jquery'],factory);
  } else {
    // 瀏覽器全域變數
   factory(jQuery);
  }
}(function ($) {
= function(timestamp) {
    if (timestamp instanceof Date) {
      return inWords(timestamp);
   timeago) .parse(timestamp));
    } else if (typeof timestamp === "number") {
      return inWords(new Date(timestamp))));    }
  };
  var $t = $.timeago;

  $ .extend($.timeago, {

  $ extend($.timeago, {

  $ extend($.timeago, {

  $ extend($.timeago, {

  $ : {
      刷新Millis:60000,
     allowFuture:假,
      localeTitle:假, >        prefixAgo:null,
        prefixFrom現在:空,
        suffixAgo: "前",
        suffixFromNow: "從現在開始",        分鐘: "% d分鐘",
        小時: "1小時",
        所: "%d小時",
             月份: "1月",
        月份:“%d 月”,
        年:“1 年”,
        年:“%d 年”,
        字分隔符:“”,
        數字:[]
}
    },
    inWords: function(distanceMillis) {      var suffix = $l.suffixAgo ;
      if (this.settings.allowFuture) {
      prefixFromNow;
          後綴= $l. suffixFromNow;
        }
      }

      var 秒= Math.abs(distanceMillis) / 10 秒🎜>      var 小時= 分鐘/ 60;
      var 天= 時/ 24;
      var 年= 天/ 365;

     ingOrFunction) ? stringOrFunction(number, distanceMillis) : stringOrFunction;
        var value = ($l.numbers && $l.numbers[number]) || number;
   }

      var 單字= 秒        秒        分鐘        分鐘        小時      .round(days)) ||
        天        天        替代($l.years, Math.round(years));

      var分隔符號= $l.wordSeparator || "";   var分隔符號= $l.wordSeparator || "";  分隔符號= " "; }
      return $.trim([前綴、字、字尾].join(分隔符號));
    },
    parse: function(iso8601)
    parse: function(iso8601)
 = $.trim(iso8601) ;
      s = s.replace(/.d /,""); // 刪除毫秒
      s = s.replace(/-/,"/").replace( /-/,"/");
      s = s.replace(/T/," ").替換(/Z/," UTC");
      s = s.replace(/([ - - ]dd):?(dd)/," $1$2"); //-04:00-> -0400
      回新日期;
    },
  >      var iso8601 = $t.isTime(elem) ? $(elem).attr("datetime") : $(elem).attr("title");
    >    },
    isTime: function(elem) {
      // jQuery 的`is()` 在IE 中無法很好地與HTML5 turn
  .toLowerCase() === "time"; // $(elem).is("time");
    }
  });

  // 可以透過$(el). timeago('action')  // 當沒有給予任何操作時,init 是預設值
  // 使用單一元素的上下文呼叫函數
  varfunctions = {
    init: function (){
      varfresh_el = $. proxy(刷新, this);
      refresh_el();
      var $s = $t.settings;
      if ($s.refreshMillis > 0) {
        setInterval(refresh_el, $s. freshMillis);
      }
    },      refresh.apply(this);
    },
    updateFromDOM: function(){<00o>






























&&&&



<. t.inwords>












相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板