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

biyaooo · 发表于 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();
      };

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

// Copyright 2012, Terry Tai, Pragmatic.ly
// https://pragmatic.ly/
// Licensed under the MIT license.
// https://github.com/pragmaticly/smart-time-ago/blob/master/LICENSE
//
// Generated by CoffeeScript 1.5.0
(function() {
var TimeAgo;
TimeAgo = (function() {
function TimeAgo(element, options) {
this.startInterval = 60000;
this.init(element, options);
}
TimeAgo.prototype.init = function(element, options) {
this.$element = $(element);
this.options = $.extend({}, $.fn.timeago.defaults, options);
this.updateTime();
return this.startTimer();
};
TimeAgo.prototype.startTimer = function() {
var self;
self = this;
return this.interval = setInterval((function() {
return self.refresh();
}), this.startInterval);
};
TimeAgo.prototype.stopTimer = function() {
return clearInterval(this.interval);
};
TimeAgo.prototype.restartTimer = function() {
this.stopTimer();
return this.startTimer();
};
TimeAgo.prototype.refresh = function() {
this.updateTime();
return this.updateInterval();
};
TimeAgo.prototype.updateTime = function() {
var self;
self = this;
return this.$element.findAndSelf(this.options.selector).each(function() {
var timeAgoInWords;
timeAgoInWords = self.timeAgoInWords($(this).attr(self.options.attr));
return $(this).html(timeAgoInWords);
});
};
TimeAgo.prototype.updateInterval = function() {
var filter, newestTime, newestTimeInMinutes, newestTimeSrc;
if (this.$element.findAndSelf(this.options.selector).length > 0) {
if (this.options.dir === "up") {
filter = ":first";
} else if (this.options.dir === "down") {
filter = ":last";
}
newestTimeSrc = this.$element.findAndSelf(this.options.selector).filter(filter).attr(this.options.attr);
newestTime = this.parse(newestTimeSrc);
newestTimeInMinutes = this.getTimeDistanceInMinutes(newestTime);
if (newestTimeInMinutes >= 0 && newestTimeInMinutes <= 44 && this.startInterval !== 60000) {
this.startInterval = 60000;
return this.restartTimer();
} else if (newestTimeInMinutes >= 45 && newestTimeInMinutes <= 89 && this.startInterval !== 60000 * 22) {
this.startInterval = 60000 * 22;
return this.restartTimer();
} else if (newestTimeInMinutes >= 90 && newestTimeInMinutes <= 2519 && this.startInterval !== 60000 * 30) {
this.startInterval = 60000 * 30;
return this.restartTimer();
} else if (newestTimeInMinutes >= 2520 && this.startInterval !== 60000 * 60 * 12) {
this.startInterval = 60000 * 60 * 12;
return this.restartTimer();
}
}
};
TimeAgo.prototype.timeAgoInWords = function(timeString) {
var absolutTime;
absolutTime = this.parse(timeString);
return "" + this.options.lang.prefixes.ago + (this.distanceOfTimeInWords(absolutTime)) + this.options.lang.suffix;
};
TimeAgo.prototype.parse = function(iso8601) {
var timeStr;
timeStr = $.trim(iso8601);
timeStr = timeStr.replace(/\.\d\d\d+/, "");
timeStr = timeStr.replace(/-/, "/").replace(/-/, "/");
timeStr = timeStr.replace(/T/, " ").replace(/Z/, " UTC");
timeStr = timeStr.replace(/([\+\-]\d\d)\:?(\d\d)/, " $1$2");
return new Date(timeStr);
};
TimeAgo.prototype.getTimeDistanceInMinutes = function(absolutTime) {
var timeDistance;
timeDistance = new Date().getTime() - absolutTime.getTime();
return Math.round((Math.abs(timeDistance) / 1000) / 60);
};
TimeAgo.prototype.distanceOfTimeInWords = function(absolutTime) {
var dim;
dim = this.getTimeDistanceInMinutes(absolutTime);
if (dim === 0) {
return "几秒钟";//+ this.options.lang.prefixes.lt + " " + this.options.lang.units.minute
} else if (dim === 1) {
return "1 " + this.options.lang.units.minute;
} else if (dim >= 2 && dim <= 44) {
return "" + dim + " " + this.options.lang.units.minutes;
} else if (dim >= 45 && dim <= 89) {
return "" + this.options.lang.prefixes.about + " 1 " + this.options.lang.units.hour;
} else if (dim >= 90 && dim <= 1439) {
return "" + this.options.lang.prefixes.about + " " + (Math.round(dim / 60)) + " " + this.options.lang.units.hours;
} else if (dim >= 1440 && dim <= 2519) {
return "1 " + this.options.lang.units.day;
} else if (dim >= 2520 && dim <= 43199) {
return "" + (Math.round(dim / 1440)) + " " + this.options.lang.units.days;
} else if (dim >= 43200 && dim <= 86399) {
return "" + this.options.lang.prefixes.about + " 1 " + this.options.lang.units.month;
} else if (dim >= 86400 && dim <= 525599) {
return "" + (Math.round(dim / 43200)) + " " + this.options.lang.units.months;
} else if (dim >= 525600 && dim <= 655199) {
return "" + this.options.lang.prefixes.about + " 1 " + this.options.lang.units.year;
} else if (dim >= 655200 && dim <= 914399) {
return "" + this.options.lang.prefixes.over + " 1 " + this.options.lang.units.year;
} else if (dim >= 914400 && dim <= 1051199) {
return "" + this.options.lang.prefixes.almost + " 2 " + this.options.lang.units.years;
} else {
return "" + this.options.lang.prefixes.about + " " + (Math.round(dim / 525600)) + " " + this.options.lang.units.years;
}
};
return TimeAgo;
})();
$.fn.timeago = function(options) {
if (options == null) {
options = {};
}
return this.each(function() {
var $this, data;
$this = $(this);
data = $this.data("timeago");
if (!data) {
return $this.data("timeago", new TimeAgo(this, options));
} else if (typeof options === 'string') {
return data[options]();
}
});
};
$.fn.findAndSelf = function(selector) {
return this.find(selector).add(this.filter(selector));
};
$.fn.timeago.Constructor = TimeAgo;
$.fn.timeago.defaults = {
selector: 'span.timeago',
attr: 'datetime',
dir: 'up',
lang: {
units:{
second: "秒",
seconds: "秒",
minute: "分钟",
minutes: "分钟",
hour: "小时",
hours: "小时",
day: "天",
days: "天",
month: "月",
months: "月",
year: "年",
years: "年"
},
prefixes: {
lt: "",
about: "",
over: "",
almost: "",
ago: ""
},
suffix: "前"
}
};
}).call(this);

复制代码

ecoolper · 发表于 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");

document.getElementById('demo_now').innerHTML = timeago().format(new Date());
document.getElementById('demo_20160907').innerHTML = timeago().format("2016-09-07", 'zh_CN');
document.getElementById('demo_timestamp').innerHTML = timeago().format(1473245023718);

复制代码

biyaooo · 发表于 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 ...

大家都推荐多些，以后做东西就快了

		自动登录	找回密码
密码			注册