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均無異常！