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 相关文章推荐
js 操作select与option(示例讲解)
Dec 20 Javascript
jQuery对val和atrr(&quot;value&quot;)赋值的区别介绍
Sep 26 Javascript
AngularJS入门教程之Hello World!
Dec 06 Javascript
使用js画图之圆、弧、扇形
Jan 12 Javascript
Javascript基础教程之JavaScript语法
Jan 18 Javascript
BootStrap点击下拉菜单项后显示一个新的输入框实现代码
May 16 Javascript
js实现炫酷的左右轮播图
Jan 18 Javascript
jQuery+PHP+Mysql实现抽奖程序
Apr 12 jQuery
JavaScript面向对象精要(下部)
Sep 12 Javascript
Angular4编程之表单响应功能示例
Dec 13 Javascript
react native 文字轮播的实现示例
Jul 27 Javascript
JavaScript实现简单音乐播放器
Apr 17 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
Protoss魔法科技
2020/03/14 星际争霸
PHP入门
2006/10/09 PHP
php split汉字
2009/06/05 PHP
使用Sphinx对索引进行搜索
2013/06/25 PHP
php 使用file_get_contents读取大文件的方法
2014/11/13 PHP
PHP中一些可以替代正则表达式函数的字符串操作函数
2014/11/17 PHP
PHP Filter过滤器全面解析
2016/08/09 PHP
PHP+JS实现的商品秒杀倒计时用法示例
2016/11/15 PHP
php微信公众平台开发(三)订阅事件处理
2016/12/06 PHP
javascript parseInt() 函数的进制转换注意细节
2013/01/08 Javascript
JavaScript:new 一个函数和直接调用函数的区别分析
2013/07/10 Javascript
提取jquery的ready()方法单独使用示例
2014/03/25 Javascript
javascript模拟评分控件实现方法
2015/05/13 Javascript
js点击文本框弹出可选择的checkbox复选框
2016/02/03 Javascript
JS对HTML表格进行增删改操作
2016/08/22 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
2016/10/10 Javascript
vue 中filter的多种用法
2018/04/26 Javascript
js利用递归与promise 按顺序请求数据的方法
2019/08/30 Javascript
jquery中attr、prop、data区别与用法分析
2019/09/25 jQuery
Vue实现菜单切换功能
2020/11/08 Javascript
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:EE凭借法力虚空拿下4杀
2017/03/30 DOTA
解读Python编程中的命名空间与作用域
2015/10/16 Python
python+selenium实现京东自动登录及秒杀功能
2017/11/18 Python
在Windows中设置Python环境变量的实例讲解
2018/04/28 Python
python基于C/S模式实现聊天室功能
2019/01/09 Python
详解Python循环作用域与闭包
2019/03/21 Python
Python爬虫实现爬取百度百科词条功能实例
2019/04/05 Python
详解Python图像处理库Pillow常用使用方法
2019/09/02 Python
详解HTML5 window.postMessage与跨域
2017/05/11 HTML / CSS
墨尔本最受欢迎的复古风格品牌:Princess Highway
2018/12/21 全球购物
Cult Gaia官网:美国生活方式品牌
2019/08/16 全球购物
办公自动化专业大学生职业规划书
2014/03/06 职场文书
优秀护士演讲稿
2014/04/30 职场文书
2016年寒假见闻
2015/10/10 职场文书
Java生成读取条形码和二维码的简单示例
2021/07/09 Java/Android
《火纹风花雪月无双》预告“神秘雇佣兵” 紫发剑客
2022/04/13 其他游戏