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高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
Aug 22 Javascript
浅析document.createDocumentFragment()与js效率
Jul 08 Javascript
javascript:文字不间断向左移动的实例代码
Aug 08 Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
May 23 Javascript
浏览器兼容的JS写法总结
Apr 27 Javascript
js中动态创建json,动态为json添加属性、属性值的实例
Dec 02 Javascript
node.js 和HTML5开发本地桌面应用程序
Dec 13 Javascript
webpack写jquery插件的环境配置
Dec 21 jQuery
js中时间格式化的几种方法
Jul 22 Javascript
vue-music 使用better-scroll遇到轮播图不能自动轮播问题
Dec 03 Javascript
cordova+vue+webapp使用html5获取地理位置的方法
Jul 06 Javascript
微信小程序 动态修改页面数据及参数传递过程详解
Sep 27 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
通过PHP CLI实现简单的数据库实时监控调度
2009/07/01 PHP
php中定时计划任务的实现原理
2013/01/08 PHP
php读取目录所有文件信息dir示例
2014/03/18 PHP
php上传文件常见问题总结
2015/02/03 PHP
php抽象类使用要点与注意事项分析
2015/02/09 PHP
php获取网页里所有图片并存入数组的方法
2015/04/06 PHP
php使用str_shuffle()函数生成随机字符串的方法分析
2017/02/17 PHP
Laravel框架中集成MongoDB和使用详解
2019/10/17 PHP
JavaScript 数组运用实现代码
2010/04/13 Javascript
JavaScript中document.forms[0]与getElementByName区别
2015/01/21 Javascript
jquery对dom节点的操作【推荐】
2016/04/15 Javascript
vue.js学习笔记之绑定style样式和class列表
2016/10/31 Javascript
JS实现的随机排序功能算法示例
2017/06/09 Javascript
Javascript 一些需要注意的细节(必看篇)
2017/07/08 Javascript
微信小程序分页加载的实例代码
2017/07/11 Javascript
详解使用angularjs的ng-options时如何设置默认值(初始值)
2017/07/18 Javascript
javascript将list转换成树状结构的实例
2017/09/08 Javascript
KOA+egg.js集成kafka消息队列的示例
2018/11/09 Javascript
实例详解vue中的$root和$parent
2019/04/29 Javascript
使用express来代理服务的方法
2019/06/21 Javascript
vue项目中全局引入1个.scss文件的问题解决
2019/08/01 Javascript
[01:10]DOTA2英雄背景故事第四期之混沌法则混沌骑士
2020/07/16 DOTA
Django集成百度富文本编辑器uEditor攻略
2014/07/04 Python
python入门之语句(if语句、while语句、for语句)
2015/01/19 Python
Python中的Descriptor描述符学习教程
2016/06/02 Python
pycharm远程linux开发和调试代码的方法
2018/07/17 Python
Python的高阶函数用法实例分析
2019/04/11 Python
Python直接赋值及深浅拷贝原理详解
2020/09/05 Python
美国购买汽车零件网站:Buy Auto Parts
2018/04/02 全球购物
职业教育毕业生求职信
2013/11/09 职场文书
农场厂长岗位职责
2013/12/28 职场文书
贵阳市党的群众路线教育实践活动党(工)委领导班子整改方案
2014/10/26 职场文书
2014年餐厅服务员工作总结
2014/11/18 职场文书
医院财务人员岗位职责
2015/04/14 职场文书
介绍信格式样本
2015/05/05 职场文书
飞屋环游记观后感
2015/06/08 职场文书