问题来源:
在一个倒计时功能中,时间显示在不同的浏览器出现差异,在Chrome正常而在IE,Firefox出现NaN(not a number)值
此处代码为:
function getDate() {
var closeTimes=$("#timeMax").val();
var endTimes = new Date(closeTimes);
var today = new Date();
var between =parseInt((endTimes - today) / 1000);
if(between <= 0)
{
$("#date").val('该时间段不能报名!');
$("#uploadData").attr("disabled", true);
$("#deleteData").attr("disabled", true);
window.clearInterval(int);
return;
}
var seconds = between % 60;
var minutes = parseInt(between / 60) % 60;
var hours = parseInt(between / 60 / 60) % 24;
var days = parseInt(between / 60 / 60 / 24);
var date = days + "天 ";
var time = twoDigits(hours) + ":" + twoDigits(minutes) + ":" + tws1Digits(seconds);
$("#date").val("剩余时间:"+date + time);
}
我在var endTimes = new Date(closeTimes);
加上alert(endTimes)
对endTimes 进行输出就会发现:
在Chrome中
在IE中
对比发现date()方法在不同的浏览器的兼容性不同,
代码中的closeTimes为从数据库中获得的时间格式为 2018-12-01 00:00:00 的字符串
显然在Chrome中date()能对这种格式的字符串进行处理,而IE不支持这种格式的字符串。
解决方法:
解决方法比较简单,就是对时间格式的字符串进行date()方法处理前,对字符串进行处理将不被兼容的2018-12-01格式转化为全部浏览器都适用的2018/12/01格式
var endTimes = new Date(closeTimes.replace(/-/g, "/"));
主要的变化是对默认的日期格式进行了转换, 基于’/’格式的日期字符串,才是被各个浏览器所广泛支持的,‘-’连接的日期字符串,则是只在chrome下可以正常工作。
总结:
产生这个问题的原因是Date构造函数接受的若干种参数中,如果你传入的是String,会被当成是一个Date.parse方法可以接受处理的符合RFC 2822标准的时间字符串来处理,所以时间戳是不行的
最后由于向parseInt()方法中传入invalid date(无效数据)被返回 NaN
详见 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date