JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享


Posted in Javascript onApril 11, 2014

要实现类似功能,用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(/([\+\-]\d\d)\:?(\d\d)/," $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");
}));
Javascript 相关文章推荐
js 判断checkbox是否选中的操作方法
Nov 09 Javascript
图片上传插件jquery.uploadify详解
Nov 15 Javascript
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
Jan 13 Javascript
介绍一个简单的JavaScript类框架
Jun 24 Javascript
JavaScript与ActionScript3两者的同性与差异性
Sep 22 Javascript
AngularJS日期格式化常见操作实例分析
May 17 Javascript
Vue父子组建的简单通信之控制开关Switch的实现
Jun 04 Javascript
jquery 动态遍历select 赋值的实例
Sep 12 jQuery
webpack4+express+mongodb+vue实现增删改查的示例
Nov 08 Javascript
Node.js开发之套接字(socket)编程入门示例
Nov 05 Javascript
jQuery实现tab栏切换效果
Dec 22 jQuery
JavaScript实现简单计时器
Jun 22 Javascript
jquery解析xml字符串简单示例
Apr 11 #Javascript
代码获取历史上的今天发生的事
Apr 11 #Javascript
jQuery中使用data()方法读取HTML5自定义属性data-*实例
Apr 11 #Javascript
JavaScript使用HTML5的window.postMessage实现跨域通信例子
Apr 11 #Javascript
jQuery实现鼠标经过图片预览大图效果
Apr 10 #Javascript
jQuery实现级联菜单效果(仿淘宝首页菜单动画)
Apr 10 #Javascript
js获取视频时长代码
Apr 10 #Javascript
You might like
《APMServ 5.1.2》使用图解
2006/10/23 PHP
CURL的学习和应用(附多线程实现)
2013/06/03 PHP
php动态生成函数示例
2014/03/21 PHP
Windows下Apache + PHP SESSION丢失的解决过程全纪录
2015/04/07 PHP
PHP验证类的封装与使用方法详解
2019/01/10 PHP
jQuery数组处理代码详解(含实例演示)
2012/02/03 Javascript
javascript针对DOM的应用分析(二)
2012/04/15 Javascript
深入领悟JavaScript中的面向对象
2013/11/18 Javascript
javascript学习笔记(七)Ajax和Http状态码
2014/10/08 Javascript
使用CamanJS在Web页面上处理图像的技巧
2015/08/18 Javascript
JQuery实现图片轮播效果
2015/09/15 Javascript
jQuery实用技巧必备(上)
2015/11/02 Javascript
深入浅析JavaScript中的3DES
2016/08/24 Javascript
canvas 画布在主流浏览器中的尺寸限制详细介绍
2016/12/15 Javascript
使用Angular缓存父页面数据的方法
2017/01/03 Javascript
javascript深拷贝和浅拷贝详解
2017/02/14 Javascript
js中setTimeout的妙用--防止循环超时
2017/03/06 Javascript
js图片放大镜效果实现方法详解
2020/10/28 Javascript
vue 中自定义指令改变data中的值
2017/06/02 Javascript
BootStrap中Table隐藏后显示问题的实现代码
2017/08/31 Javascript
Angular @HostBinding()和@HostListener()用法
2018/03/05 Javascript
浅谈layui里的上传控件问题
2019/09/26 Javascript
详解一些适用于Node.js的命名约定
2019/12/08 Javascript
[42:24]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第一场 11.01
2020/11/02 DOTA
python学习笔记:字典的使用示例详解
2014/06/13 Python
RC4文件加密的python实现方法
2015/06/30 Python
python检查URL是否正常访问的小技巧
2017/02/25 Python
Python图片裁剪实例代码(如头像裁剪)
2017/06/21 Python
对Python中9种生成新对象的方法总结
2018/05/23 Python
Python帮你微信头像任意添加装饰别再@微信官方了
2019/09/25 Python
TensorFlow tensor的拼接实例
2020/01/19 Python
canvas实现图片马赛克的示例代码
2018/03/26 HTML / CSS
Haglöfs瑞典官方网站:haglofs火柴棍,欧洲顶级户外品牌
2018/10/18 全球购物
远程培训的心得体会
2014/09/01 职场文书
安全生产工作汇报材料
2014/10/28 职场文书
2015小学教师年度考核工作总结
2015/05/12 职场文书