前段时间利用vue实现数据在页面上的显示,我本人比较喜欢用谷歌浏览器,但是测试就是不用,用的360 ,说我页面上显示的时候时间存在问题
这个是在360 浏览器上显示出来的
看样子时间确实有点问题
我的代码是这样的:
这个是利用vue的前台
我们来看jsdateformat的定义:
var vu = new Vue({
el : '.table',
methods : {
dateFormat : function(time) {
var date = new Date(time);
var year = date.getFullYear();
var month = date.getMonth() + 1 < 10 ? "0"
+ (date.getMonth() + 1) : date.getMonth() + 1;
var day = date.getDate() < 10 ? "0" + date.getDate() : date
.getDate();
var hours = date.getHours() < 10 ? "0" + date.getHours() : date
.getHours();
var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes()
: date.getMinutes();
var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds()
: date.getSeconds();
return year + "-" + month + "-" + day + " " + hours + ":"
+ minutes + ":" + seconds;
}
},
data : {
data : []
}
});
利用这个方法在谷歌浏览器上显示真的是正常的
为什么会是这个样子
原来我们在后台返回的是从数据库中取出来的时间 util.Date 这种类型,但是谷歌浏览器的时间会转换为时间戳的形式 比如:16567777362632 形式
但是IE浏览器时间会格式是:2019-08-01T09:13:40.000+0000
这样也就是谷歌和IE我们后台返回的日期格式,前台要注意区分浏览器
所以:
var vu = new Vue({
el : '.table',
methods : {
dateFormat : function(time) {
if (!!window.ActiveXObject || "ActiveXObject" in window) {
var arr = time.split("T");
var d = arr[0];
var darr = d.split('-');
var t = arr[1];
var tarr = t.split('.000');
var marr = tarr[0].split(':');
time = parseInt(darr[0]) + "/" + parseInt(darr[1]) + "/"
+ parseInt(darr[2]) + " " + parseInt(marr[0]) + ":"
+ parseInt(marr[1]) + ":" + parseInt(marr[2]);
}
var date = new Date(time);
var year = date.getFullYear();
var month = date.getMonth() + 1 < 10 ? "0"
+ (date.getMonth() + 1) : date.getMonth() + 1;
var day = date.getDate() < 10 ? "0" + date.getDate() : date
.getDate();
var hours = date.getHours() < 10 ? "0" + date.getHours() : date
.getHours();
var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes()
: date.getMinutes();
var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds()
: date.getSeconds();
return year + "-" + month + "-" + day + " " + hours + ":"
+ minutes + ":" + seconds;
}
},
data : {
data : []
}
});
dataFormat上面我添加一个判断,如果是IE浏览器我先把时间转换为时间戳的形式
这样360上面时间显示就正常了
希望对你有所帮助