手机休眠，js倒计时停止

JavaScript013

手机休眠，js倒计时停止,第1张

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

问题：手机屏幕熄灭之后，倒计时停止，手机屏幕亮起之后，倒计时接着之前的时间倒计时（即，黑屏这段时间倒计时没有减少）

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

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

我给你我的代码，你参考一下，把这些放在<head>和</head>之间

<span id="clock">00:00:05:00</span>

<input id="startB" type="button" value="start countdown!" onclick="run()">

<input id="endB" type="button" value="stop countdown!" onclick="stop()">

<br>

<input id="diff" type="text">

<input id="next" type="text">

<script language="Javascript">

var normalelapse = 100

var nextelapse = normalelapse

var counter

var startTime

var start = clock.innerText

var finish = "00:00:00:00"

var timer = null

// 开始运行

function run() {

startB.disabled = true

endB.disabled = false

counter = 0

// 初始化开始时间

startTime = new Date().valueOf()

// nextelapse是定时时间, 初始时为100毫秒

// 注意setInterval函数: 时间逝去nextelapse(毫秒)后, onTimer才开始执行

timer = window.setInterval("onTimer()", nextelapse)

}

// 停止运行

function stop() {

startB.disabled = false

endB.disabled = true

window.clearTimeout(timer)

}

window.onload = function() {

endB.disabled = true

}

// 倒计时函数

function onTimer()

{

if (start == finish)

{

window.clearInterval(timer)

alert("time is up!")

return

}

var hms = new String(start).split(":")

var ms = new Number(hms[3])

var s = new Number(hms[2])

var m = new Number(hms[1])

var h = new Number(hms[0])

ms -= 1

if (ms <0)

{

ms = 9

s -= 1

if (s <0)

{

s = 59

m -= 1

}

if (m <0)

{

m = 59

h -= 1

}

}

var ms = ms <10 ? ("0" + ms) : ms

var ss = s <10 ? ("0" + s) : s

var sm = m <10 ? ("0" + m) : m

var sh = h <10 ? ("0" + h) : h

start = sh + ":" + sm + ":" + ss + ":" + ms

clock.innerText = start

// 清除上一次的定时器

window.clearInterval(timer)

// 自校验系统时间得到时间差, 并由此得到下次所启动的新定时器的时间nextelapse

counter++

var counterSecs = counter * 100

var elapseSecs = new Date().valueOf() - startTime

var diffSecs = counterSecs - elapseSecs

nextelapse = normalelapse + diffSecs

//diff.value = counterSecs + "-" + elapseSecs + "=" + diffSecs

//next.value = "nextelapse = " + nextelapse

if (nextelapse <0) nextelapse = 0

// 启动新的定时器

timer = window.setInterval("onTimer()", nextelapse)

}

</script>