JS实现倒计时---处理ios兼容问题

马上双十二了,各大电商平台的活动倒计时又要开启了。今天在做移动端倒计时的时候,遇到了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均无异常!

发布了54 篇原创文章 · 获赞 22 · 访问量 7215

猜你喜欢

转载自blog.csdn.net/Riona_cheng/article/details/103478279