手机休眠,js倒计时停止

2018-11-07  本文已影响0人  八点半的星光1101

在接触到的项目中,有页面需要做倒计时的效果,原本以为很容易,做好之后就提交测试了,但是好巧不巧,测试人员手机屏幕在倒计时过程中熄灭,唤醒屏幕之后发现倒计时是接着黑屏时候的时间继续进行。

问题:手机屏幕熄灭之后,倒计时停止,手机屏幕亮起之后,倒计时接着之前的时间倒计时(即,黑屏这段时间倒计时没有减少)

解决方法:获取倒计时开始时间start_time,在调用countTime是获取一下当前时间end_time,两者的时间差即为休眠时间,使用倒计时总时间-时间差,即为新的倒计时时间


var $countTime = 15000;

var start_time = new Date();

start_time = start_time.getTime();
setInterval(countTime, 1000)

function countTime() {

      var end_time = new Date();

      end_time = end_time.getTime();

      var dtime = $countTime - Math.floor((end_time - start_time) / 1000);

      var minute = Math.floor(dtime / 60); //剩余的分

      var second = dtime % 60; //剩余的秒

      $('#product').find('.timeCount').text(minute + ' 分 ' + second + ' 秒');

      if (minute <= 0 && second <= 0) {

          clearInterval($countTimeFn);

          $countTimeFn = null;

          $('#product').find('.mask').fadeOut();

      }

 }

亲测有效,若有其他的好方法求告知

上一篇 下一篇

猜你喜欢

热点阅读