移动端倒计时(坑) · JayLee

记今天遇到的bug,倒计时在移动端(微信页面)上运行的时候，当页面被打开，手机锁屏的时候，倒计时的Js代码会滞后甚至停止

之前的代码:

123456789101112131415161718192021222324

<body><span></span>分<span></span>秒<script>    function (val1,val2){        var min = document.getElementsByTagName("span")[0];        var sec = document.getElementsByTagName("span")[1];        var t = setInterval(function(){            val2--;            if(val2<0){                val2==59;                val1 --;            }else if(val1==0&&val2==0){                clearInterval(t)            }            min.innerText = val1;            sec.innerText = val2;        },1000)    }    time(0,10);</script></body>

之后的代码：

1234567891011121314151617181920212223242526

<body><span></span>分<span></span>秒<script>    function (val1,val2){        var min = document.getElementsByTagName("span")[0];        var sec = document.getElementsByTagName("span")[1];        var a = parseInt(val1*60+val2);         var render = parseInt(new Date().getTime()/1000)+a;//倒计时停止的秒数        var t = setInterval(function(){            var new_val = render-parseInt(new Date().getTime()/1000);//实时的时间差            var num1 = parseInt(new_val/60);//获得分钟数            var num2 = parseInt(new_val%60);//获得秒数            if(num1==0&&num2==-1){                clearInterval(t)            }else{                min.innerText = num1;                sec.innerText = num2;            }        },1000)    }    time(0,10);</script></body>

前后的代码差别就是，之前的代码时间逻辑自己书写，包括秒数的跳动和时间单位的转化，后面的是将逻辑让程序换算。导致在移动端手机锁屏的时候出现时间误差，后面则不会，因为时间都是实时获取到的。

来源：https://www.cnblogs.com/liuzhongrong/p/12289431.html

标签

var

移动互联网终端