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 相关文章推荐
Firefox和IE浏览器兼容JS脚本写法小结
Jul 07 Javascript
获取offsetTop和offsetLeft值的js代码(兼容)
Apr 16 Javascript
angular简介和其特点介绍
Jan 29 Javascript
用js编写的简单的计算器代码程序
Aug 04 Javascript
JS采用绝对定位实现回到顶部效果完整实例
Jun 20 Javascript
Web开发使用Angular实现用户密码强度判别的方法
Sep 27 Javascript
微信小程序实现跑马灯效果完整代码(附效果图)
May 30 Javascript
javascript闭包的使用之按钮切换功能
Aug 30 Javascript
vue-cli 首屏加载优化问题
Nov 06 Javascript
javascriptvoid(0)含义以及与&quot;#&quot;的区别讲解
Jan 19 Javascript
详解vue 动态加载并注册组件且通过 render动态创建该组件
May 30 Javascript
JavaScript实现4位随机验证码的生成
Jan 28 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
德劲1104的电路分析与改良
2021/03/01 无线电
php 截取字符串并以零补齐str_pad() 函数
2011/05/07 PHP
ThinkPHP3.2.3数据库设置新特性
2015/03/05 PHP
php获取网站根目录物理路径的几种方法(推荐)
2017/03/04 PHP
PHP基于递归算法解决兔子生兔子问题
2018/05/11 PHP
thinkPHP5.1框架中Request类四种调用方式示例
2019/08/03 PHP
HTML-CSS群中单选引发的“事件”
2007/03/05 Javascript
JavaScript递归操作实例浅析
2016/10/31 Javascript
vue双向数据绑定原理探究(附demo)
2017/01/17 Javascript
jquery表单验证插件validation使用方法详解
2017/01/20 Javascript
Vue.js上下滚动加载组件的实例代码
2017/07/17 Javascript
jQuery实现常见的隐藏与展示列表效果示例
2018/06/04 jQuery
js实现敏感词过滤算法及实现逻辑
2018/07/24 Javascript
vue props对象validator自定义函数实例
2019/11/13 Javascript
JS浏览器BOM常见操作实例详解
2020/04/27 Javascript
原生js实现随机点名
2020/07/05 Javascript
封装 axios+promise通用请求函数操作
2020/08/11 Javascript
[50:01]Ti4 冒泡赛第二天 NEWBEE vs Titan
2014/07/15 DOTA
Python使用matplotlib绘图无法显示中文问题的解决方法
2018/03/14 Python
Django model序列化为json的方法示例
2018/10/16 Python
Python3实现获取图片文字里中文的方法分析
2018/12/13 Python
解决python web项目意外关闭,但占用端口的问题
2019/12/17 Python
Python爬虫库requests获取响应内容、响应状态码、响应头
2020/01/25 Python
pycharm设置当前工作目录的操作(working directory)
2020/02/14 Python
一款纯css3实现的tab选项卡的实列教程
2014/12/11 HTML / CSS
美国面料纺织品商城:Fabric.com
2017/06/28 全球购物
澳大利亚领先的美容护肤品零售商之一:SkincareStore
2018/01/22 全球购物
销售员求职个人的自我评价
2014/02/19 职场文书
李敖北大演讲稿
2014/05/24 职场文书
行政管理专业求职信
2014/07/06 职场文书
遗失说明具结保证书
2015/02/26 职场文书
2016年政治理论学习心得体会
2016/01/25 职场文书
Oracle 区块链表创建过程详解
2021/05/15 Oracle
ObjectMapper 如何忽略字段大小写
2021/06/29 Java/Android
python_tkinter弹出对话框创建
2022/03/20 Python
python实现双向链表原理
2022/05/25 Python