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

569 阅读3分钟

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

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

              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。