起步软件技术论坛
搜索
 找回密码
 注册

QQ登录

只需一步,快速开始

查看: 2536|回复: 2

[分享]X5中用于转换时间戳的插件time_ago.js

  [复制链接]

33

主题

213

帖子

1158

积分

金牌会员

Rank: 6Rank: 6

积分
1158
QQ
发表于 2016-9-11 17:18:24 | 显示全部楼层 |阅读模式
本帖最后由 biyaooo 于 2016-9-11 22:23 编辑

把下面的代码保存命名为timeago.js 。然后在需要的地方引用

一些参数需知晓
$.fn.timeago.defaults = {
selector: 'span.timeago',  //选择器 X5建立一个span , class命名为timeago。
attr: 'datetime'}              //属性为datetime,X5中获得数据库的值,赋给这个属性。


源码写法如下:
     <span bind-attr-datetime='justep.Date.fromString(val("fDateTime"),"yyyy-MM-dd hh:mm:ss")' class="timeago" xid="span23"></span>


我用了ScrollView和List , 加载的JS代码如下:
        Model.prototype.list3AfterRender = function(event){
                //写在别处,scrollView刷新会导致时间转换无法显示,需要重新渲染。
               //这样写目前没有发现问题,如有更好的麻烦告知
                $(".timeago").timeago();
        };


页面在不刷新的时候会自动刷新时间显示


  1. // Copyright 2012, Terry Tai, Pragmatic.ly
  2. // https://pragmatic.ly/
  3. // Licensed under the MIT license.
  4. // https://github.com/pragmaticly/smart-time-ago/blob/master/LICENSE
  5. //
  6. // Generated by CoffeeScript 1.5.0

  7. (function() {
  8.   var TimeAgo;

  9.   TimeAgo = (function() {

  10.     function TimeAgo(element, options) {
  11.       this.startInterval = 60000;
  12.       this.init(element, options);
  13.     }

  14.     TimeAgo.prototype.init = function(element, options) {
  15.       this.$element = $(element);
  16.       this.options = $.extend({}, $.fn.timeago.defaults, options);
  17.       this.updateTime();
  18.       return this.startTimer();
  19.     };

  20.     TimeAgo.prototype.startTimer = function() {
  21.       var self;
  22.       self = this;
  23.       return this.interval = setInterval((function() {
  24.         return self.refresh();
  25.       }), this.startInterval);
  26.     };

  27.     TimeAgo.prototype.stopTimer = function() {
  28.       return clearInterval(this.interval);
  29.     };

  30.     TimeAgo.prototype.restartTimer = function() {
  31.       this.stopTimer();
  32.       return this.startTimer();
  33.     };

  34.     TimeAgo.prototype.refresh = function() {
  35.       this.updateTime();
  36.       return this.updateInterval();
  37.     };

  38.     TimeAgo.prototype.updateTime = function() {
  39.       var self;
  40.       self = this;
  41.       return this.$element.findAndSelf(this.options.selector).each(function() {
  42.         var timeAgoInWords;
  43.         timeAgoInWords = self.timeAgoInWords($(this).attr(self.options.attr));
  44.         return $(this).html(timeAgoInWords);
  45.       });
  46.     };

  47.     TimeAgo.prototype.updateInterval = function() {
  48.       var filter, newestTime, newestTimeInMinutes, newestTimeSrc;
  49.       if (this.$element.findAndSelf(this.options.selector).length > 0) {
  50.         if (this.options.dir === "up") {
  51.           filter = ":first";
  52.         } else if (this.options.dir === "down") {
  53.           filter = ":last";
  54.         }
  55.         newestTimeSrc = this.$element.findAndSelf(this.options.selector).filter(filter).attr(this.options.attr);
  56.         newestTime = this.parse(newestTimeSrc);
  57.         newestTimeInMinutes = this.getTimeDistanceInMinutes(newestTime);
  58.         if (newestTimeInMinutes >= 0 && newestTimeInMinutes <= 44 && this.startInterval !== 60000) {
  59.           this.startInterval = 60000;
  60.           return this.restartTimer();
  61.         } else if (newestTimeInMinutes >= 45 && newestTimeInMinutes <= 89 && this.startInterval !== 60000 * 22) {
  62.           this.startInterval = 60000 * 22;
  63.           return this.restartTimer();
  64.         } else if (newestTimeInMinutes >= 90 && newestTimeInMinutes <= 2519 && this.startInterval !== 60000 * 30) {
  65.           this.startInterval = 60000 * 30;
  66.           return this.restartTimer();
  67.         } else if (newestTimeInMinutes >= 2520 && this.startInterval !== 60000 * 60 * 12) {
  68.           this.startInterval = 60000 * 60 * 12;
  69.           return this.restartTimer();
  70.         }
  71.       }
  72.     };

  73.     TimeAgo.prototype.timeAgoInWords = function(timeString) {
  74.       var absolutTime;
  75.       absolutTime = this.parse(timeString);
  76.       return "" + this.options.lang.prefixes.ago + (this.distanceOfTimeInWords(absolutTime)) + this.options.lang.suffix;
  77.     };

  78.     TimeAgo.prototype.parse = function(iso8601) {
  79.       var timeStr;
  80.       timeStr = $.trim(iso8601);
  81.       timeStr = timeStr.replace(/\.\d\d\d+/, "");
  82.       timeStr = timeStr.replace(/-/, "/").replace(/-/, "/");
  83.       timeStr = timeStr.replace(/T/, " ").replace(/Z/, " UTC");
  84.       timeStr = timeStr.replace(/([\+\-]\d\d)\:?(\d\d)/, " $1$2");
  85.       return new Date(timeStr);
  86.     };

  87.     TimeAgo.prototype.getTimeDistanceInMinutes = function(absolutTime) {
  88.       var timeDistance;
  89.       timeDistance = new Date().getTime() - absolutTime.getTime();
  90.       return Math.round((Math.abs(timeDistance) / 1000) / 60);
  91.     };

  92.     TimeAgo.prototype.distanceOfTimeInWords = function(absolutTime) {
  93.       var dim;
  94.       dim = this.getTimeDistanceInMinutes(absolutTime);
  95.       if (dim === 0) {
  96.         return "几秒钟";//+ this.options.lang.prefixes.lt + " " + this.options.lang.units.minute
  97.       } else if (dim === 1) {
  98.         return "1 " + this.options.lang.units.minute;
  99.       } else if (dim >= 2 && dim <= 44) {
  100.         return "" + dim + " " + this.options.lang.units.minutes;
  101.       } else if (dim >= 45 && dim <= 89) {
  102.         return "" + this.options.lang.prefixes.about + " 1 " + this.options.lang.units.hour;
  103.       } else if (dim >= 90 && dim <= 1439) {
  104.         return "" + this.options.lang.prefixes.about + " " + (Math.round(dim / 60)) + " " + this.options.lang.units.hours;
  105.       } else if (dim >= 1440 && dim <= 2519) {
  106.         return "1 " + this.options.lang.units.day;
  107.       } else if (dim >= 2520 && dim <= 43199) {
  108.         return "" + (Math.round(dim / 1440)) + " " + this.options.lang.units.days;
  109.       } else if (dim >= 43200 && dim <= 86399) {
  110.         return "" + this.options.lang.prefixes.about + " 1 " + this.options.lang.units.month;
  111.       } else if (dim >= 86400 && dim <= 525599) {
  112.         return "" + (Math.round(dim / 43200)) + " " + this.options.lang.units.months;
  113.       } else if (dim >= 525600 && dim <= 655199) {
  114.         return "" + this.options.lang.prefixes.about + " 1 " + this.options.lang.units.year;
  115.       } else if (dim >= 655200 && dim <= 914399) {
  116.         return "" + this.options.lang.prefixes.over + " 1 " + this.options.lang.units.year;
  117.       } else if (dim >= 914400 && dim <= 1051199) {
  118.         return "" + this.options.lang.prefixes.almost + " 2 " + this.options.lang.units.years;
  119.       } else {
  120.         return "" + this.options.lang.prefixes.about + " " + (Math.round(dim / 525600)) + " " + this.options.lang.units.years;
  121.       }
  122.     };

  123.     return TimeAgo;

  124.   })();

  125.   $.fn.timeago = function(options) {
  126.     if (options == null) {
  127.       options = {};
  128.     }
  129.     return this.each(function() {
  130.       var $this, data;
  131.       $this = $(this);
  132.       data = $this.data("timeago");
  133.       if (!data) {
  134.         return $this.data("timeago", new TimeAgo(this, options));
  135.       } else if (typeof options === 'string') {
  136.         return data[options]();
  137.       }
  138.     });
  139.   };

  140.   $.fn.findAndSelf = function(selector) {
  141.     return this.find(selector).add(this.filter(selector));
  142.   };

  143.   $.fn.timeago.Constructor = TimeAgo;

  144.   $.fn.timeago.defaults = {
  145.     selector: 'span.timeago',
  146.     attr: 'datetime',
  147.     dir: 'up',
  148.     lang: {
  149.       units:{
  150.           second: "秒",
  151.           seconds: "秒",
  152.           minute: "分钟",
  153.           minutes: "分钟",
  154.           hour: "小时",
  155.           hours: "小时",
  156.           day: "天",
  157.           days: "天",
  158.           month: "月",
  159.           months: "月",
  160.           year: "年",
  161.           years: "年"
  162.         },
  163.         prefixes: {
  164.           lt: "",
  165.           about: "",
  166.           over: "",
  167.           almost: "",
  168.           ago: ""
  169.         },
  170.         suffix: "前"
  171.     }
  172.   };

  173. }).call(this);
复制代码








997

主题

4326

帖子

1万

积分

论坛元老

Rank: 8Rank: 8

积分
10696
QQ
发表于 2016-9-11 19:35:46 | 显示全部楼层
本帖最后由 ecoolper 于 2016-9-11 19:40 编辑

来推荐个:https://github.com/hustcc/timeago.js/blob/master/demo/index.js
timeago.js 是一个非常简洁、轻量级、小于 2kb 的很简洁的Javascript库,用来将datetime时间转化成类似于 "***时间前"的描述字符串,例如:“3小时前”。

官网地址:http://timeago.org/
格式之后的效果为:
  • just now
  • 12 seconds ago
  • 3 minutes ago
  • 2 hours ago
  • 24 days ago
  • 6 months ago
  • 2 years ago
  • in 12 seconds
  • in 3 minutes
  • in 2 hours
  • in 24 days
  • in 6 months
  • in 2 years

特点:
1. 本地化语言,默认支持中文和英文,一般够用;
2. 支持 几x前,几x后 两种方式;
3. npm和浏览器script均支持;
4. 完善的自动化测试case;
5. 非常非常小,2kb,gzip之后更小;
X5中引用:var timeago = require("timeago.js");
  1. document.getElementById('demo_now').innerHTML = timeago().format(new Date());
  2. document.getElementById('demo_20160907').innerHTML = timeago().format("2016-09-07", 'zh_CN');
  3. document.getElementById('demo_timestamp').innerHTML = timeago().format(1473245023718);
复制代码


孤舟蓑笠翁,独钓寒江雪。
X5牛刀交流民间第一群:30057529
提供有偿服务,联系WX:18332024
bex5疑难问题解决方案
回复 支持 反对

使用道具 举报

33

主题

213

帖子

1158

积分

金牌会员

Rank: 6Rank: 6

积分
1158
QQ
 楼主| 发表于 2016-9-11 21:11:59 | 显示全部楼层
ecoolper 发表于 2016-9-11 19:35
来推荐个:https://github.com/hustcc/timeago.js/blob/master/demo/index.js

官网地址:http://timeago.o ...

大家都推荐多些,以后做东西就快了
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

小黑屋|手机版|X3技术论坛|Justep Inc.    

GMT+8, 2024-3-29 20:03 , Processed in 0.109836 second(s), 23 queries .

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表