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
* 创建时间: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;
}

}

时间: 2014-04-27

iOS实现时间显示几分钟前,几小时前以及刚刚的方法示例

前言 本文实现的效果类似于QQ空间里的好友发表的动态,会显示好友发表的时间,这里是处理显示几小时前,几分钟前,刚刚,昨天,前天这样的格式,下面来一起看看吧. 一:刚刚,几分钟前,几小时前 //时间 NSString *createdTimeStr = @"2017-01-01 21:05:10"; //把字符串转为NSdate NSDateFormatter *dateFormatter = [[NSDateFormatter alloc] init]; [dateFormatter

Android编程实现将时间转化成几分钟前、几天前等形式的工具类

本文实例讲述了Android编程实现将时间转化成几分钟前.几天前等形式的工具类.分享给大家供大家参考,具体如下: 描述: 在Android开发客户端的时候,是在会显示时间是多久之前,比如10分钟前,8小时前,一月前等等.下面提供一个工具类. 代码: public class TimeUtil { private final static long minute = 60 * 1000;// 1分钟 private final static long hour = 60 * minute;// 1

php格式化时间戳显示友好的时间实现思路及代码

在项目中时间一律显示为2014-10-20 10:22显得很呆板.在微博.QQ空间等网站通常会显示为几秒前,几分钟前,几小时前等容易阅读的时间,我们称之为友好的时间格式.那么用php怎么实现呢? 大体思路如下: 如果是跨年并且大于3天就显示为具体的时间 如果是今天的 如果是一分钟内则显示几秒之前 如果是一小时内则显示几分钟前 如果是当天且大于一小时则显示为几小时前 如果是昨天则显示为昨天几点 如果是前天则显示为前天几点 如果大于三天(没有跨年)则显示为几月几号 根据以上思路就不难写出实现代码了:

php时间戳格式化显示友好的时间函数分享

在项目中时间一律显示为2014-10-20 10:22显得很呆板.在微博.QQ空间等网站通常会显示为几秒前,几分钟前,几小时前等容易阅读的时间,我们称之为友好的时间格式.那么用php怎么实现呢? 大体思路如下: 如果是跨年并且大于3天就显示为具体的时间 如果是今天的           如果是一分钟内则显示几秒之前           如果是一小时内则显示几分钟前           如果是当天且大于一小时则显示为几小时前 如果是昨天则显示为昨天几点 如果是前天则显示为前天几点 如果大于三天(没

一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)

松哥的书里边,其实有涉及到 Vue,但是并没有详细说过,原因很简单,Vue 的资料都是中文的,把 Vue.js 官网的资料从头到尾浏览一遍该懂的基本就懂了,个人感觉这个是最好的 Vue.js 学习资料 ,因此在我的书里边就没有多说.但是最近总结小伙伴遇到的问题,感觉很多人对前后端分离开发还是两眼一抹黑,所以今天松哥想和大家聊一下前后端分离以及 Vue.js 的一点事,算是一个简单的入门科普吧. 前后端不分 后端模板:Jsp.FreeMarker.Velocity 前端模板:Thymeleaf 前

jQuery使用prepend()方法在元素前添加内容用法实例

本文实例讲述了jQuery使用prepend()方法在元素前添加内容的用法.分享给大家供大家参考.具体分析如下: 下面的代码可实现在文本前和列表前添加新的元素 <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#btn1"

PHP时间戳与日期之间转换的实例介绍

1.php中时间转换函数 strtotime("today") date("Y-m-d H:i",$unixtime) 2.php中获得今天零点的时间戳 要获得零点的unix时间戳,可以使用$todaytime=strtotime("today"), 然后再使用date("Y-m-d H:i",$todaytime)转换为日期. 3.php中时间戳转换为日期,并按照时间显示不同的内容,如刚刚,分钟前,小时前,今天,昨天等 /*

php实现倒计时效果

现在很多的团购网站上都有剩余时间的显示.显示剩余时间可以使用Javascript来实现,但是我们会发现使用Javascript来实现的话不安全,因为Javascript获取的是客户端的时间.比方说,这次团购已经结束了,但是懂技术的访客只要修改他客户端电脑的时间就又显示该商品还可以购买.很明显,这不是我们网站设计的初衷.团购结束了就不可以再购买啦.这里写了一个考试系统剩余时间倒计时的显示代码和大家一起探讨. 实现原理: PHP获取的是服务器端的时间,我们只要设置考试的开始时间和结束时间及当前时间.

微信和qq时间格式模板实例详解

直接上代码,代码中有注释,大家好好看! /** * 将一个时间戳转换成提示性时间字符串,如 * 2分钟内 无显示 * 2分钟-24小时 HH:mm * 昨天 昨天 HH:mm * 前天 前天 HH:mm * 一年内 MM:DD HH:mm * 去年 去年 MM:DD HH:mm * 前年 前年 MM:DD HH:mm * 更远 yyyy:MM:DD HH:mm * 毫秒计算 * @param charttime * @return */ public static String convertC