快捷導(dǎo)航

javasctipt如何顯示幾分鐘前、幾天前等

更新時間：2014年04月30日 10:47:40 作者：

這篇文章主要介紹了javasctipt如何顯示幾分鐘前、幾天前等,需要的朋友可以參考下

jsp頁面：

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<base href="<%=basePath%>"> 

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 
<script type="text/javascript" src="<%=basePath%>/js/timeago.js" ></script> 

</head> 

<body> 
This is my JSP page. <br> 
<p>${time}</p> 
<span class="time timeago" title="2014-4-29 15:23"></span> 

</body> 
</html> 

<script type="text/javascript"> 
jQuery("span.timeago").timeago(); 
</script> 

復(fù)制代碼代碼如下:

 
(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"); 
})); 

controller層：

復(fù)制代碼代碼如下:

 
package com.spring.controller; 

import java.io.IOException; 
import java.io.PrintWriter; 
import java.util.Date; 

import javax.servlet.http.HttpServletRequest; 
import javax.servlet.http.HttpServletResponse; 

import net.sf.json.JSONArray; 

import org.springframework.stereotype.Controller; 
import org.springframework.web.bind.annotation.RequestMapping; 
import org.springframework.web.bind.annotation.RequestMethod; 
import org.springframework.web.servlet.ModelAndView; 

import com.spring.model.JsonMoel; 
import com.sun.org.apache.bcel.internal.generic.NEW; 

/** 
* @author Qixuan.Chen 
* 創(chuàng)建時間：2014-4-29 
*/ 
@Controller 
public class TimeAgoController { 


/** 
* @param request 
* @param response 
* @return 
* @throws IOException 
*/ 
@RequestMapping(value="time/show", method = {RequestMethod.POST,RequestMethod.GET}) 
public ModelAndView PostJsonTest(HttpServletRequest request,HttpServletResponse response) throws IOException{ 

ModelAndView mav=new ModelAndView(); 
mav.addObject("time", new Date()); 
mav.setViewName("time/timeago"); 
return mav; 
} 

} 