关于移动端倒计时失效的问题

在项目中，遇到了倒计时时间失效的问题，趁中午忙里偷闲，总结一下。

有两种解决方案，第一种从后台拿到倒计时的截止时间然后在前端拿到当前日期，相减，分别取得时，分，秒来进行解决。代码如下。

              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。

                                                                      

 

转载于:https://juejin.im/post/5b0b8ae26fb9a009f74be74d