手机休眠,js倒计时停止

JavaScript026

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

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

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

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

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

这个就是一个定时器和点击事件结合就行。

思路:

1、首先添加一个定时器实现多久显示出提示显示出来,然后清除定时器;

2、然后点击关闭再次执行这个定时器;

实例:

我给你我的代码,你参考一下,把这些放在<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>