javasctipt如何显示几分钟前、几天前等


Posted in Javascript onApril 30, 2014

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 
* 创建时间: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 相关文章推荐
javascript loadScript异步加载脚本示例讲解
Nov 14 Javascript
jquery解析xml字符串示例分享
Mar 25 Javascript
Javascript基础知识(一)核心基础语法与事件模型
Sep 29 Javascript
JavaScript常用的弹出广告及背投广告实现方法
Feb 06 Javascript
javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法
May 14 Javascript
测试IE浏览器对JavaScript的AngularJS的兼容性
Jun 19 Javascript
js格式化输入框内金额、银行卡号
Feb 01 Javascript
jQuery图片拖动组件Dropzone用法示例
Jan 17 Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
Mar 30 Javascript
微信小程序实现移动端滑动分页效果(ajax)
Jun 13 Javascript
IScroll那些事_当内容不足时下拉刷新的解决方法
Jul 18 Javascript
vue使用wavesurfer.js解决音频可视化播放问题
Apr 04 Vue.js
jquery实现更改表格行顺序示例
Apr 30 #Javascript
使用原生js写的一个简单slider
Apr 29 #Javascript
js判断横竖屏及禁止浏览器滑动条示例
Apr 29 #Javascript
使用jquery写个更改表格行顺序的小功能
Apr 29 #Javascript
百度移动版的url编码解码示例
Apr 29 #Javascript
通过url查找a元素应用案例
Apr 29 #Javascript
jquery实现的图片点击滚动效果
Apr 29 #Javascript
You might like
在PHP3中实现SESSION的功能(一)
2006/10/09 PHP
PHP面向对象程序设计高级特性详解(接口,继承,抽象类,析构,克隆等)
2016/12/02 PHP
JavaScript中的new的使用方法与注意事项
2007/05/16 Javascript
jQuery live
2009/05/15 Javascript
jquery imgareaselect 使用利用js与程序结合实现图片剪切
2009/07/30 Javascript
js 强制弹出窗口代码研究-又一款代码
2010/03/20 Javascript
JS清空多文本框、文本域示例代码
2014/02/24 Javascript
JavaScript中document.forms[0]与getElementByName区别
2015/01/21 Javascript
基于javascript代码检测访问网页的浏览器呈现引擎、平台、Windows操作系统、移动设备和游戏系统
2015/12/03 Javascript
javascript正则表达式之分组概念与用法实例
2016/06/16 Javascript
bootstrap组件之按钮式下拉菜单小结
2017/01/19 Javascript
jquery 实时监听输入框值变化的完美方法(必看)
2017/01/26 Javascript
微信小程序tabbar不显示解决办法
2017/06/08 Javascript
AngularJS通过ng-Img-Crop实现头像截取的示例
2017/08/17 Javascript
Node.js 使用axios读写influxDB的方法示例
2018/10/26 Javascript
JavaScript创建防篡改对象的方法分析
2018/12/30 Javascript
nodejs中实现修改用户路由功能
2019/05/24 NodeJs
15 分钟掌握vue-next响应式原理
2019/10/13 Javascript
[01:18:33]Secret vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
部署Python的框架下的web app的详细教程
2015/04/30 Python
Python中shutil模块的常用文件操作函数用法示例
2016/07/05 Python
Python算术运算符实例详解
2017/05/31 Python
利用python查看数组中的所有元素是否相同
2021/01/08 Python
css3简单练习实现遨游浏览器logo的绘制
2013/01/30 HTML / CSS
用HTML5制作视频拼图的教程
2015/05/13 HTML / CSS
英国最大的手表网站:The Watch Hut
2017/03/31 全球购物
潘多拉珠宝美国官方网站:Pandora US
2020/06/18 全球购物
如何用Python来进行查询和替换一个文本字符串
2014/01/02 面试题
采购员的工作职责
2013/12/26 职场文书
股东授权委托书
2014/10/15 职场文书
同事去世追悼词
2015/06/23 职场文书
2015年学校总务工作总结
2015/07/20 职场文书
婚礼伴郎致辞
2015/07/28 职场文书
2016暑期校本培训心得体会
2016/01/08 职场文书
创业计划书之奶茶店开店方案范本!
2019/08/06 职场文书
上手简单,功能强大的Python爬虫框架——feapder
2021/04/27 Python