1.关于移动端倒计时锁屏没有效果的解决办法如下: <!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Title</title> <style> .count-down{ margin: 0 auto; background: #f90; height: 100px; line-height: 100px; text-align: center; color:#fff; font-size: 30px; } </style> </head> <body> <div class="count-down"></div> </body> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script>
var start = 60,
preDiff = 0;
var startTime = Date.now();
var t1 = setInterval(function() {
var tempTime = Date.now();
var diff = (tempTime - startTime) / 1000 >> 0;
console.log((tempTime - startTime)/1000 >> 0);
if(diff >= start) {
clearInterval(t1);
show(0);
$(".count-down").html("时间到了!");
return;
}
if(preDiff === diff) return;
preDiff = diff;
show(start - diff);
}, 200);
function show(counts) {
var d = 0;
var h = 0;
var m = 0;
var s = 0;
if(n >= 0) {
d = Math.floor(counts / 60 / 60 / 24);
h = Math.floor(counts / 60 / 60 % 24);
m = Math.floor(counts / 60 % 60);
s = Math.floor(counts % 60);
}
if(d <= 9) d = '0' + d;
if(h <= 9) h = '0' + h;
if(m <= 9) m = '0' + m;
if(s <= 9) s = '0' + s;
$(".count-down").html(`倒计时 <span id="count">${h}:${m}:${s}</span>`);
}
</script> </html>