发布于 2017-02-07 08:03:51 | 77 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的Javascript教程,程序狗速度看过来!

JavaScript客户端脚本语言

Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为客户提供更流畅的浏览效果。


这篇文章主要介绍了js实现时间显示几天前、几小时前或者几分钟前的方法,实例汇总分析了时间显示格式转换的常用思路与技巧,需要的朋友可以参考下

这里汇总了js实现时间显示几天前、几小时前或者几分钟前的常见方法。分享给大家供大家参考。具体如下:

方法一:

个人做法是保存时间戳,然后在前端用jq插件做转换,比如 smart-time-ago

方法二:

(通过freemarker模板)如果用freemarker模板可以这样写,别的模板类推
根据自己的意愿修改条件和输出,把你的datetime传进去即可


<#macro timeline_dt datetime=.now> 
<#assign ct = (.now?long-datetime?long)/1000> 
<#if ct gte 31104000><#--n年前-->${(ct/31104000)?int}年前 
  <#t><#elseif ct gte 2592000><#--n月前-->${(ct/2592000)?int}个月前 
  <#t><#elseif ct gte 86400*2><#--n天前-->${(ct/86400)?int}天前 
  <#t><#elseif ct gte 86400><#--1天前-->昨天 
  <#t><#elseif ct gte 3600><#--n小时前-->${(ct/3600)?int}小时前 
  <#t><#elseif ct gte 60><#--n分钟前-->${(ct/60)?int}分钟前 
  <#t><#elseif ct gt 0><#--n秒前-->${ct?int}秒前 
  <#t><#else>刚刚 
</#if> 
</#macro> 

方法三:

找到一个专门的插件PrettyTime


public static void main(String[] args) { 
    PrettyTime p = new PrettyTime(); 
    System.out.println(p.format(DateUtils.addDays(new Date(), 2)));
} 

方法四:

自定义Java方法:


private final static long minute = 60 * 1000;// 1分钟 
private final static long hour = 60 * minute;// 1小时 
private final static long day = 24 * hour;// 1天 
private final static long month = 31 * day;// 月 
private final static long year = 12 * month;// 年 
/** 
* 返回文字描述的日期 
* 
* @param date 
* @return 
*/ 
public static String getTimeFormatText(Date date) { 
    if (date == null) { 
      return null; 
    } 
    long diff = new Date().getTime() - date.getTime(); 
    long r = 0; 
    if (diff > year) { 
      r = (diff / year); 
      return r + "年前"; 
    } 
    if (diff > month) { 
      r = (diff / month); 
      return r + "个月前"; 
    } 
    if (diff > day) { 
      r = (diff / day); 
      return r + "天前"; 
    } 
    if (diff > hour) { 
      r = (diff / hour); 
      return r + "个小时前"; 
    } 
    if (diff > minute) { 
      r = (diff / minute); 
      return r + "分钟前"; 
    } 
    return "刚刚"; 
}

方法五:

使用js插件:(原版的timeago.js)


// Smart Time Ago v0.1.0 
// Copyright 2012, Terry Tai, Pragmatic.ly 
// https://pragmatic.ly/ 
// Licensed under the MIT license. 
// https://github.com/pragmaticly/smart-time-ago/blob/master/LICENSE 
(function() { 
 var TimeAgo; 
 TimeAgo = (function() { 
  function TimeAgo(element, options) { 
   this.startInterval = 60000; 
   this.init(element, options); 
  } 
  TimeAgo.prototype.init = function(element, options) { 
   this.$element = $(element); 
   this.options = $.extend({}, $.fn.timeago.defaults, options); 
   this.updateTime(); 
   return this.startTimer(); 
  }; 
  TimeAgo.prototype.startTimer = function() { 
   var self; 
   self = this; 
   return this.interval = setInterval((function() { 
    return self.refresh(); 
   }), this.startInterval); 
  }; 
  TimeAgo.prototype.stopTimer = function() { 
   return clearInterval(this.interval); 
  }; 
  TimeAgo.prototype.restartTimer = function() { 
   this.stopTimer(); 
   return this.startTimer(); 
  }; 
  TimeAgo.prototype.refresh = function() { 
   this.updateTime(); 
   return this.updateInterval(); 
  }; 
  TimeAgo.prototype.updateTime = function() { 
   var self; 
   self = this; 
   return this.$element.findAndSelf(this.options.selector).each(function() {
    var timeAgoInWords; 
    timeAgoInWords = self.timeAgoInWords($(this).attr(self.options.attr)); 
    return $(this).html(timeAgoInWords); 
   }); 
  }; 
  TimeAgo.prototype.updateInterval = function() { 
   var filter, newestTime, newestTimeInMinutes, newestTimeSrc; 
   if (this.$element.findAndSelf(this.options.selector).length > 0) {
    if (this.options.dir === "up") { 
     filter = ":first"; 
    } else if (this.options.dir === "down") { 
     filter = ":last"; 
    } 
    newestTimeSrc = this.$element.findAndSelf(this.options.selector).filter(filter).attr(this.options.attr); 
    newestTime = this.parse(newestTimeSrc); 
    newestTimeInMinutes = this.getTimeDistanceInMinutes(newestTime);
    if (newestTimeInMinutes >= 0 && newestTimeInMinutes <= 44 && this.startInterval !== 60000) { 
     this.startInterval = 60000; 
     return this.restartTimer(); 
    } else if (newestTimeInMinutes >= 45 && newestTimeInMinutes <= 89 && this.startInterval !== 60000 * 22) { 
     this.startInterval = 60000 * 22; 
     return this.restartTimer(); 
    } else if (newestTimeInMinutes >= 90 && newestTimeInMinutes <= 2519 && this.startInterval !== 60000 * 30) { 
     this.startInterval = 60000 * 30; 
     return this.restartTimer(); 
    } else if (newestTimeInMinutes >= 2520 && this.startInterval !== 60000 * 60 * 12) { 
     this.startInterval = 60000 * 60 * 12; 
     return this.restartTimer(); 
    } 
   } 
  }; 
  TimeAgo.prototype.timeAgoInWords = function(timeString) { 
   var absolutTime; 
   absolutTime = this.parse(timeString); 
   return this.distanceOfTimeInWords(absolutTime) + (this.options.lang.suffix); 
  }; 
  TimeAgo.prototype.parse = function(iso8601) { 
   var timeStr; 
   timeStr = $.trim(iso8601); 
   timeStr = timeStr.replace(/\.\d\d\d+/, ""); 
   timeStr = timeStr.replace(/-/, "/").replace(/-/, "/"); 
   timeStr = timeStr.replace(/T/, " ").replace(/Z/, " UTC"); 
   timeStr = timeStr.replace(/([\+\-]\d\d)\:?(\d\d)/, " $1$2"); 
   return new Date(timeStr); 
  }; 
  TimeAgo.prototype.getTimeDistanceInMinutes = function(absolutTime) {
   var timeDistance; 
   timeDistance = new Date().getTime() - absolutTime.getTime(); 
   return Math.round((Math.abs(timeDistance) / 1000) / 60); 
  }; 
  TimeAgo.prototype.distanceOfTimeInWords = function(absolutTime) { 
   var dim; 
   dim = this.getTimeDistanceInMinutes(absolutTime); 
   if (dim === 0) { 
    return "" + this.options.lang.prefixes.lt + " " + this.options.lang.units.minute; 
   } else if (dim === 1) { 
    return "1 " + this.options.lang.units.minute; 
   } else if (dim >= 2 && dim <= 44) { 
    return "" + dim + " " + this.options.lang.units.minutes; 
   } else if (dim >= 45 && dim <= 89) { 
    return "" + this.options.lang.prefixes.about + " 1 " + this.options.lang.units.hour; 
   } else if (dim >= 90 && dim <= 1439) { 
    return "" + this.options.lang.prefixes.about + " " + (Math.round(dim / 60)) + " " + this.options.lang.units.hours; 
   } else if (dim >= 1440 && dim <= 2519) { 
    return "1 " + this.options.lang.units.day; 
   } else if (dim >= 2520 && dim <= 43199) { 
    return "" + (Math.round(dim / 1440)) + " " + this.options.lang.units.days; 
   } else if (dim >= 43200 && dim <= 86399) { 
    return "" + this.options.lang.prefixes.about + " 1 " + this.options.lang.units.month; 
   } else if (dim >= 86400 && dim <= 525599) { 
    return "" + (Math.round(dim / 43200)) + " " + this.options.lang.units.months; 
   } else if (dim >= 525600 && dim <= 655199) { 
    return "" + this.options.lang.prefixes.about + " 1 " + this.options.lang.units.year; 
   } else if (dim >= 655200 && dim <= 914399) { 
    return "" + this.options.lang.prefixes.over + " 1 " + this.options.lang.units.year; 
   } else if (dim >= 914400 && dim <= 1051199) { 
    return "" + this.options.lang.prefixes.almost + " 2 " + this.options.lang.units.years; 
   } else { 
    return "" + this.options.lang.prefixes.about + " " + (Math.round(dim / 525600)) + " " + this.options.lang.units.years; 
   } 
  }; 
  return TimeAgo; 
 })(); 
 $.fn.timeago = function(options) { 
  if (options == null) options = {}; 
  return this.each(function() { 
   var $this, data; 
   $this = $(this); 
   data = $this.data("timeago"); 
   if (!data) $this.data("timeago", new TimeAgo(this, options)); 
   if (typeof options === 'string') return data[options](); 
  }); 
 }; 
 $.fn.findAndSelf = function(selector) { 
  return this.find(selector).add(this.filter(selector)); 
 }; 
 $.fn.timeago.Constructor = TimeAgo; 
 $.fn.timeago.defaults = { 
  selector: 'time.timeago', 
  attr: 'datetime', 
  dir: 'up', 
  lang: { 
   units: { 
    second: "second", 
    seconds: "seconds", 
    minute: "minute", 
    minutes: "minutes", 
    hour: "hour", 
    hours: "hours", 
    day: "day", 
    days: "days", 
    month: "month", 
    months: "months", 
    year: "year", 
    years: "years" 
   }, 
   prefixes: { 
    lt: "less than a", 
    about: "about", 
    over: "over", 
    almost: "almost" 
   }, 
   suffix: ' ago' 
  } 
 }; 
}).call(this);

使用js插件:(改装版(简哟版)timeago.js)中文的


(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程序设计有所帮助。



最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务