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 页面坐标相关知识整理
Jan 09 Javascript
再论Javascript下字符串连接的性能
Mar 05 Javascript
jquery的clone方法应用于textarea和select的bug修复
Jun 26 Javascript
jQuery源码解读之removeClass()方法分析
Feb 20 Javascript
JS实现下拉菜单赋值到文本框的方法
Aug 18 Javascript
浅谈javascript中的数据类型转换
Dec 27 Javascript
javascript history对象详解
Feb 09 Javascript
vue模板语法-插值详解
Mar 06 Javascript
Vue中使用Lodop插件实现打印功能的简单方法
Dec 19 Javascript
封装一下vue中的axios示例代码详解
Feb 16 Javascript
安装多版本Vue-CLI的实现方法
Mar 24 Javascript
详解JavaScript 的执行机制
Sep 18 Javascript
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
Yii查询生成器(Query Builder)用法实例教程
2014/09/04 PHP
php中Redis的应用--消息传递
2017/03/28 PHP
tp5.1 框架数据库常见操作详解【添加、删除、更新、查询】
2020/05/26 PHP
div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
2013/08/29 Javascript
nodejs通过phantomjs实现下载网页
2015/05/04 NodeJs
谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
2015/10/01 Javascript
js实现页面跳转的五种方法推荐
2016/03/10 Javascript
微信小程序 swiper组件轮播图详解及实例
2016/11/16 Javascript
jquery 多个radio的click事件实例
2016/12/03 Javascript
JS判断是否手机或pad访问实现方法
2016/12/09 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
2017/03/01 Javascript
微信小程序报错:this.setData is not a function的解决办法
2017/09/27 Javascript
微信小程序实现指定显示行数多余文字去掉用省略号代替
2018/07/25 Javascript
css配合JavaScript实现tab标签切换效果
2018/10/11 Javascript
CentOS7中源码编译安装NodeJS的完整步骤
2018/10/13 NodeJs
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
2018/10/22 Javascript
vue+iview 兼容IE11浏览器的实现方法
2019/01/07 Javascript
监控Nodejs的性能实例代码
2019/07/02 NodeJs
Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法
2019/09/16 Javascript
微信小程序制作扭蛋机代码实例
2019/09/24 Javascript
[01:56]无止竞 再出发——中国军团出征2017年DOTA2国际邀请赛
2017/07/05 DOTA
Django自定义manage命令实例代码
2018/02/11 Python
pandas数据框,统计某列数据对应的个数方法
2018/04/11 Python
详解numpy.meshgrid()方法使用
2019/08/01 Python
python性能测量工具cProfile使用解析
2019/09/26 Python
django正续或者倒序查库实例
2020/05/19 Python
CSS3制作精致的照片墙特效
2016/06/07 HTML / CSS
CSS3制作文字半透明倒影效果的两种实现方式
2014/08/08 HTML / CSS
使用Canvas操作像素的方法
2018/06/14 HTML / CSS
美国庭院家具购物网站:AlphaMarts
2019/04/10 全球购物
澳大利亚女装精品店:Alannah Hill
2020/07/29 全球购物
实用求职信范文分享
2013/12/25 职场文书
2014年商场国庆节活动策划方案
2014/09/16 职场文书
电信营业员岗位职责
2015/04/14 职场文书
爱岗敬业事迹材料
2019/06/20 职场文书
Nginx下SSL证书安装部署步骤介绍
2021/12/06 Servers