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> 

復制代碼代碼如下:

 
(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層：

復制代碼代碼如下:

 
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; 
} 

} 

JavaScript訪問CSS屬性的幾種方式介紹
要通過元素訪問樣式表，那么就應該先確定是哪個元素。直接訪問樣式表在該樣式塊里找相應的樣式規(guī)則，最后在該樣式規(guī)則里找相應的樣式
2014-07-07
Javascript實現(xiàn)跨域后臺設置攔截的方法詳解
這篇文章主要給大家介紹了關于Javascript實現(xiàn)跨域后臺設置攔截的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面跟著小編來一起學習學習吧。
2017-08-08
JS驗證碼實現(xiàn)代碼
本文通過實例代碼給大家分享基于javascript實現(xiàn)的驗證碼功能，非常不錯，具有參考借鑒價值，需要的朋友參考下吧
2017-09-09
利用原生js模擬直播彈幕滾動效果
彈幕是一個很常見的功能,這篇文章主要給大家介紹了關于如何利用原生js模擬直播彈幕滾動效果的相關資料,文章通過示例代碼介紹的非常詳細,需要的朋友可以參考下
2021-07-07
javascript-表格排序(降序/反序)實現(xiàn)介紹(附圖)
使用了Array方法、sort:降序、reverse:反序完成了基本功能，對于聯(lián)合排序沒有實現(xiàn)，感興趣的朋友可以參考下哈
2013-05-05
JavaScript實現(xiàn)電燈開關小案例
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)電燈開關小案例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-03-03
js將列表組裝成樹結構的兩種實現(xiàn)方式分享
最近做的任務提了新的需求,需要實現(xiàn)一個樹形結構,所以下面這篇文章主要給大家介紹了關于js將列表組裝成樹結構的兩種實現(xiàn)方式,需要的朋友可以參考下
2022-01-01
JS開發(fā)中基本數(shù)據(jù)類型具體有哪幾種
JS的數(shù)據(jù)類型包括基本數(shù)據(jù)類型、復雜數(shù)據(jù)類型和特殊數(shù)據(jù)類型，今天我們主要先講解一下基本數(shù)據(jù)類型。感興趣的朋友一起看看吧
2017-10-10
JavaScript通過this變量快速找出用戶選中radio按鈕的方法
這篇文章主要介紹了JavaScript通過this變量快速找出用戶選中radio按鈕的方法,涉及javascript中this變量的使用技巧,非常具有實用價值,需要的朋友可以參考下
2015-03-03
如何在CocosCreator中使用http和WebSocket
這篇文章主要介紹了在Cocos Creator中使用的Http和WebSocket，對websocket感興趣的同學，一定要看下
2021-04-04