在项目中,遇到了倒计时时间失效的问题,趁中午忙里偷闲,总结一下。
有两种解决方案,第一种从后台拿到倒计时的截止时间然后在前端拿到当前日期,相减,分别取得时,分,秒来进行解决。代码如下。
1,从后台取得时间 end
2,得到当前时间now
var leftTime = end - now; //时间差
var h= "00";
var m = "00";
var s="00";
if(leftTime >= 0) {
h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
m = Math.floor(leftTime / 1000 / 60 % 60);
s = Math.floor(leftTime / 1000 % 60);
if(s < 10) {
s = "0" + s;
}
if(m < 10) {
m = "0" + m;
}
} else {
console.log('已截止')
}
//将倒计时赋值到div中
document.getElementById("_h").innerHTML = h ;
document.getElementById("_m").innerHTML = m ;
document.getElementById("_s").innerHTML = s ;
第二种方式,本着前端能解决就不给后台填更多麻烦的想法,自己对时间进行了处理。(前端本来就可以进行处理嘛,不是有Date对象么)。不多说,直接上代码。
function countTime() {
var date = new Date();
var now = date.getTime();
var dateTime = date.getDate();
var hoursTime = date.getHours();
var endDate = new Date("2018-06-02 09:00:00");
var end = endDate.getTime();
var leftTime = end - now; //时间差
if(dateTime<=26 && dateTime>=3){
var leftTime = -1;
}
if(dateTime == 26 && hoursTime >=9){
var leftTime = end - now; //时间差
}
var h= "00";
var m = "00";
var s="00";
if(leftTime >= 0) {
h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
m = Math.floor(leftTime / 1000 / 60 % 60);
s = Math.floor(leftTime / 1000 % 60);
if(s < 10) {
s = "0" + s;
}
if(m < 10) {
m = "0" + m;
}
} else {
console.log('已截止')
}
//将倒计时赋值到div中
document.getElementById("_h").innerHTML = h ;
document.getElementById("_m").innerHTML = m ;
document.getElementById("_s").innerHTML = s ;
setTimeout(countTime, 50);
}
countTime();
但是在项目运行到线上的时候,问题就出现了,发现在PC端,包括模拟都可以进行倒计时,但是在移动端显示的却是
00:00:00
但是在PC端却是可以的:
于是,进行查阅了资料,最后发现了原来是safari支持的问题。
safari中对于JavaScript的new Date函数的支持有一个比较奇怪的问题。
通常,由于习惯了SQL中的datetime格式,日期是打成yyyy-mm-dd的格式,然而,safari竟然不支持这样的格式,所以当你输入如下语句时,会返回空的时间。
var endDate = new Date("2018-06-02 09:00:00");
返回的是空的时间。所以就自然是00:00:00
啦。
Safari支持的格式是yyyy/mm/dd这样的,差别主要在于短横-与斜杠/,而斜杠这样的格式在其他常见的浏览器中也都是可以正常运行的,所以只需要都换成斜杠就可以了,转换函数如下所示:
new Date('2016-04-17'.replace(/-/g, "/"));
所以把上文中的代码改为:
var endDate = new Date("2018/06/02 09:00:00");
上传代码后。运行正常啦。完美解决BUG。