马上双十二了,各大电商平台的活动倒计时又要开启了。今天在做移动端倒计时的时候,遇到了ios兼容问题,特意在此记录,希望早看到的小伙伴可以少走弯路。
倒计时的实现
// 双十二倒计时
var endTime = '2019-12-12 00:00:00'; // 结束时间
var startTime = '2019-12-10 00:00:00'; // 开始时间
var et = new Date(endTime).getTime(); // 结束时间戳
var st = new Date(startTime).getTime(); // 开始时间戳
var ct = new Date().getTime(); // 当前时间戳
var val = et - ct; // 开始倒计时的时间戳
var res,timer; // 最终时间,定时器
var tDom = $('.count-down'); // 拿到倒计时的dom
// 拆分时间位数的函数----hh拆成 h h
function splitTime(time) {
var str1,str2,str;
var len = time.toString().length;
if(len === 2) {
str1 = time.toString().slice(0,1)
str2 = time.toString().slice(1)
str = '<span>' + str1 + '</span><span>' + str2 + '</span>'
}
return str
}
// 把时间戳转成时间格式
function transTime(t) {
var d = parseInt(t / (1000 * 60 * 60 * 24))
var h = parseInt(t % (1000 * 60 * 60 * 24) / (1000 * 60 * 60))
var m = parseInt(t % (1000 * 60 * 60 * 24) % (1000 * 60 * 60) / (1000 * 60))
var s = parseInt(t % (1000 * 60 * 60 * 24) % (1000 * 60 * 60) % (1000 * 60) / 1000)
d = d < 10 ? '0' + d : d;
h = h < 10 ? '0' + h : h;
m = m < 10 ? '0' + m : m;
s = s < 10 ? '0' + s : s;
var dd = splitTime(d);
var hh = splitTime(h);
var mm = splitTime(m);
var ss = splitTime(s);
return dd + '<em>天</em>' + hh + '<em>时</em>' + mm + '<em>分</em>' + ss + '<em>秒</em>'
}
// 如果当前时间戳大于开始时间,开启定时器,并让倒时器显示
if(ct > st) {
$('.count-down').show() // 倒计时显示
// 开启倒计时
timer = setInterval(() => {
val = val -1000;
if(new Date().getTime() >= et){
$('.count-down').hide();
clearInterval(timer);
}
res = transTime(val);
tDom.html(res); // 替换DOM内容
}, 1000);
} else {
$('.count-down').hide() // 倒计时隐藏
// 清除倒计时
clearInterval(timer);
}
实现效果
踩的坑
想要的效果实现了,但在真机测试的过程中发现,ios系统手机上的倒计时均无法正常显示。经调试发现,ios系统不支持我们定义的带有 “-” 符号的日期格式,比如:‘2019-12-12 00:00:00’,这种格式在ios设备上是不被识别的,我们可以把 “-” 改成 “/” .
例:
再次真机测试,发现无论安卓还是ios均无异常!