首页 > Js开发 > javasctipt显示几分钟前、几天前等

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

jsp页面:

[html]

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  2. <html>  
  3.   <head>  
  4.     <base href="<%=basePath%>">  
  5.       
  6.     <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>  
  7.     <script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>  
  8.     <script type="text/javascript" src="<%=basePath%>/js/timeago.js" ></script>  
  9.     
  10.   </head>  
  11.     
  12.   <body>  
  13.     This is my JSP page. <br>  
  14.      <p>${time}</p>  
  15.     <span class="time timeago" title="2014-4-29 15:23"></span>  
  16.       
  17.   </body>  
  18. </html>  
  19.   
  20.  <script type="text/javascript">  
  21.      jQuery("span.timeago").timeago();  
  22.  </script>  


timeago.js代码

[javascript]

  1. (function (factory) {  
  2.   if (typeof define === 'function' && define.amd) {  
  3.     // AMD. Register as an anonymous module.  
  4.     define(['jquery'], factory);  
  5.   } else {  
  6.     // Browser globals  
  7.     factory(jQuery);  
  8.   }  
  9. }(function ($) {  
  10.   $.timeago = function(timestamp) {  
  11.     if (timestamp instanceof Date) {  
  12.       return inWords(timestamp);  
  13.     } else if (typeof timestamp === "string") {  
  14.       return inWords($.timeago.parse(timestamp));  
  15.     } else if (typeof timestamp === "number") {  
  16.       return inWords(new Date(timestamp));  
  17.     } else {  
  18.       return inWords($.timeago.datetime(timestamp));  
  19.     }  
  20.   };  
  21.   var $t = $.timeago;  
  22.   
  23.   $.extend($.timeago, {  
  24.     settings: {  
  25.       refreshMillis: 60000,  
  26.       allowFuture: false,  
  27.       localeTitle: false,  
  28.       cutoff: 0,  
  29.       strings: {  
  30.         prefixAgo: null,  
  31.         prefixFromNow: null,  
  32.         suffixAgo: "前",  
  33.         suffixFromNow: "from now",  
  34.         seconds: "1分钟",  
  35.         minute: "1分钟",  
  36.         minutes: "%d分钟",  
  37.         hour: "1小时",  
  38.         hours: "%d小时",  
  39.         day: "1天",  
  40.         days: "%d天",  
  41.         month: "1月",  
  42.         months: "%d月",  
  43.         year: "1年",  
  44.         years: "%d年",  
  45.         wordSeparator: "",  
  46.         numbers: []  
  47.       }  
  48.     },  
  49.     inWords: function(distanceMillis) {  
  50.       var $l = this.settings.strings;  
  51.       var prefix = $l.prefixAgo;  
  52.       var suffix = $l.suffixAgo;  
  53.       if (this.settings.allowFuture) {  
  54.         if (distanceMillis < 0) {  
  55.           prefix = $l.prefixFromNow;  
  56.           suffix = $l.suffixFromNow;  
  57.         }  
  58.       }  
  59.   
  60.       var seconds = Math.abs(distanceMillis) / 1000;  
  61.       var minutes = seconds / 60;  
  62.       var hours = minutes / 60;  
  63.       var days = hours / 24;  
  64.       var years = days / 365;  
  65.   
  66.       function substitute(stringOrFunction, number) {  
  67.         var string = $.isFunction(stringOrFunction) ? stringOrFunction(number, distanceMillis) : stringOrFunction;  
  68.         var value = ($l.numbers && $l.numbers[number]) || number;  
  69.         return string.replace(/%d/i, value);  
  70.       }  
  71.   
  72.       var words = seconds < 45 && substitute($l.seconds, Math.round(seconds)) ||  
  73.         seconds < 90 && substitute($l.minute, 1) ||  
  74.         minutes < 45 && substitute($l.minutes, Math.round(minutes)) ||  
  75.         minutes < 90 && substitute($l.hour, 1) ||  
  76.         hours < 24 && substitute($l.hours, Math.round(hours)) ||  
  77.         hours < 42 && substitute($l.day, 1) ||  
  78.         days < 30 && substitute($l.days, Math.round(days)) ||  
  79.         days < 45 && substitute($l.month, 1) ||  
  80.         days < 365 && substitute($l.months, Math.round(days / 30)) ||  
  81.         years < 1.5 && substitute($l.year, 1) ||  
  82.         substitute($l.years, Math.round(years));  
  83.   
  84.       var separator = $l.wordSeparator || "";  
  85.       if ($l.wordSeparator === undefined) { separator = " "; }  
  86.       return $.trim([prefix, words, suffix].join(separator));  
  87.     },  
  88.     parse: function(iso8601) {  
  89.       var s = $.trim(iso8601);  
  90.       s = s.replace(/\.\d+/,""); // remove milliseconds  
  91.       s = s.replace(/-/,"/").replace(/-/,"/");  
  92.       s = s.replace(/T/," ").replace(/Z/," UTC");  
  93.       s = s.replace(/([\+\-]\d\d)\:?(\d\d)/," $1$2"); // -04:00 -> -0400  
  94.       return new Date(s);  
  95.     },  
  96.     datetime: function(elem) {  
  97.       var iso8601 = $t.isTime(elem) ? $(elem).attr("datetime") : $(elem).attr("title");  
  98.       return $t.parse(iso8601);  
  99.     },  
  100.     isTime: function(elem) {  
  101.       // jQuery's `is()` doesn't play well with HTML5 in IE  
  102.       return $(elem).get(0).tagName.toLowerCase() === "time"// $(elem).is("time");  
  103.     }  
  104.   });  
  105.   
  106.   // functions that can be called via $(el).timeago('action')  
  107.   // init is default when no action is given  
  108.   // functions are called with context of a single element  
  109.   var functions = {  
  110.     init: function(){  
  111.       var refresh_el = $.proxy(refresh, this);  
  112.       refresh_el();  
  113.       var $s = $t.settings;  
  114.       if ($s.refreshMillis > 0) {  
  115.         setInterval(refresh_el, $s.refreshMillis);  
  116.       }  
  117.     },  
  118.     update: function(time){  
  119.       $(this).data('timeago', { datetime: $t.parse(time) });  
  120.       refresh.apply(this);  
  121.     },  
  122.     updateFromDOM: function(){  
  123.       $(this).data('timeago', { datetime: $t.parse( $t.isTime(this) ? $(this).attr("datetime") : $(this).attr("title") ) });  
  124.       refresh.apply(this);  
  125.     }  
  126.   };  
  127.   
  128.   $.fn.timeago = function(action, options) {  
  129.     var fn = action ? functions[action] : functions.init;  
  130.     if(!fn){  
  131.       throw new Error("Unknown function name '"+ action +"' for timeago");  
  132.     }  
  133.     // each over objects here and call the requested function  
  134.     this.each(function(){  
  135.       fn.call(this, options);  
  136.     });  
  137.     return this;  
  138.   };  
  139.   
  140.   function refresh() {  
  141.     var data = prepareData(this);  
  142.     var $s = $t.settings;  
  143.   
  144.     if (!isNaN(data.datetime)) {  
  145.       if ( $s.cutoff == 0 || distance(data.datetime) < $s.cutoff) {  
  146.         $(this).text(inWords(data.datetime));  
  147.       }  
  148.     }  
  149.     return this;  
  150.   }  
  151.   
  152.   function prepareData(element) {  
  153.     element = $(element);  
  154.     if (!element.data("timeago")) {  
  155.       element.data("timeago", { datetime: $t.datetime(element) });  
  156.       var text = $.trim(element.text());  
  157.       if ($t.settings.localeTitle) {  
  158.         element.attr("title", element.data('timeago').datetime.toLocaleString());  
  159.       } else if (text.length > 0 && !($t.isTime(element) && element.attr("title"))) {  
  160.         element.attr("title", text);  
  161.       }  
  162.     }  
  163.     return element.data("timeago");  
  164.   }  
  165.   
  166.   function inWords(date) {  
  167.     return $t.inWords(distance(date));  
  168.   }  
  169.   
  170.   function distance(date) {  
  171.     return (new Date().getTime() - date.getTime());  
  172.   }  
  173.   
  174.   // fix for IE6 suckage  
  175.   document.createElement("abbr");  
  176.   document.createElement("time");  
  177. }));  


controller层:

[java]

  1. package com.spring.controller;  
  2.   
  3. import java.io.IOException;  
  4. import java.io.PrintWriter;  
  5. import java.util.Date;  
  6.   
  7. import javax.servlet.http.HttpServletRequest;  
  8. import javax.servlet.http.HttpServletResponse;  
  9.   
  10. import net.sf.json.JSONArray;  
  11.   
  12. import org.springframework.stereotype.Controller;  
  13. import org.springframework.web.bind.annotation.RequestMapping;  
  14. import org.springframework.web.bind.annotation.RequestMethod;  
  15. import org.springframework.web.servlet.ModelAndView;  
  16.   
  17. import com.spring.model.JsonMoel;  
  18. import com.sun.org.apache.bcel.internal.generic.NEW;  
  19.   
  20. /** 
  21.  * @author Qixuan.Chen 
  22.  * 创建时间:2014-4-29 
  23.  */  
  24. @Controller  
  25. public class TimeAgoController {  
  26.       
  27.   
  28.     /** 
  29.      * @param request 
  30.      * @param response 
  31.      * @return 
  32.      * @throws IOException 
  33.      */  
  34.     @RequestMapping(value="time/show", method = {RequestMethod.POST,RequestMethod.GET})  
  35.     public ModelAndView PostJsonTest(HttpServletRequest request,HttpServletResponse response) throws IOException{  
  36.           
  37.         ModelAndView mav=new ModelAndView();  
  38.         mav.addObject("time"new Date());  
  39.         mav.setViewName("time/timeago");  
  40.         return mav;  
  41.     }  
  42.   
  43. }  

本文固定链接: http://www.devba.com/index.php/archives/5503.html | 开发吧

javasctipt显示几分钟前、几天前等:目前有1 条留言

  1. 沙发
    小小的坏:

    前来学习一下

    2015-04-16 下午 5:33