<!--倒计时-->
<div class="setTimeout">
<div class="time">
<p>
<span id="_h">00</span>
<span>:</span>
<span id="_m">00</span>
<span>:</span>
<span id="_s">00</span>
</p>
<p>剩余时间</p>
<button class="overBtn">结束</button>
</div>
</div>
var setTime = setInterval(function() {
//声明时、分、秒
var hour = document.querySelector(".overTime").innerHTML.split(":")[0]
var minute = document.querySelector(".overTime").innerHTML.split(":")[1]
var second = document.querySelector(".overTime").innerHTML.split(":")[2]
hour = parseInt(hour)
minute = parseInt(minute)
second = parseInt(second)
if(second > 0){
second--
}
else if(minute > 0){
minute--
second = 59
}
else if(hour > 0){
hour--
minute = 59
second = 59
}
else{
clearInterval(setTime)
}
hour = hour < 10 ? "0" + hour : hour
minute = minute < 10 ? "0" + minute : minute
second = second < 10 ? "0" + second : second
document.querySelector(".overTime").innerHTML = hour + ":" + minute + ":" + second
$('.overBtn').click(function(){
clearInterval(setTime)
})
},1000)
解决移动端由于用户锁屏导致的倒计时不准,正确的倒计时写法
var remainingTime = parseInt($("#remainingTime").val())*1000; //剩余秒数
//获取当前用户系统时间
var date2 = new Date();
var now = date2.getTime();
//设置截止时间
var end = now + remainingTime;
$(function(){
$("body").on("load",countTime());
function countTime(){
//时间差
var date3 = new Date();
var now3 = date3.getTime();
var leftTime = end - now3;
if (leftTime < 0) {
clearInterval(countTime);
window.location.href = "home/serviceOver?token="+$("#token").val();
}
//定义变量 h,m,s保存倒计时的时间
var h,m,s;
if (leftTime > 0) {
h = Math.floor(leftTime/1000/60/60%24);
m = Math.floor(leftTime/1000/60%60);
s = Math.floor(leftTime/1000%60);
h = h < 10 ? '0' + h : h;
m = m < 10 ? "0" + m : m;
s = s < 10 ? '0' + s : s;
//将倒计时赋值到div中
document.getElementById("_h").innerHTML = h;
document.getElementById("_m").innerHTML = m;
document.getElementById("_s").innerHTML = s;
//递归每秒调用countTime方法,显示动态时间效果
setTimeout(countTime,1000);
}else{
clearInterval(countTime);
window.location.href = "home/serviceOver?token="+$("#token").val();
}
}
//结束按摩
$('.overBtn').on('click',function(){
$('.weui-mask').hide();
$.confirm({
title: '确认取消体验',
text: '主动结束后按摩椅将停止运行,支付费用不退还',
onOK: function () {
clearInterval(countTime)
window.location.href = "home/serviceOver?token="+$("#token").val();
},
onCancel: function () {
return;
}
})
})
})
第二种写法:
function countTime() {
7 //获取当前时间
8 var date = new Date();
9 var now = date.getTime();
10 //设置截止时间
11 var str="2017/5/17 00:00:00";
12 var endDate = new Date(str);
13 var end = endDate.getTime();
14
15 //时间差
16 var leftTime = end-now;
17 //定义变量 d,h,m,s保存倒计时的时间
18 var d,h,m,s;
19 if (leftTime>=0) {
20 d = Math.floor(leftTime/1000/60/60/24);
21 h = Math.floor(leftTime/1000/60/60%24);
22 m = Math.floor(leftTime/1000/60%60);
23 s = Math.floor(leftTime/1000%60);
24 }
25 //将倒计时赋值到div中
26 document.getElementById("_d").innerHTML = d+"天";
27 document.getElementById("_h").innerHTML = h+"时";
28 document.getElementById("_m").innerHTML = m+"分";
29 document.getElementById("_s").innerHTML = s+"秒";
30 //递归每秒调用countTime方法,显示动态时间效果
31 setTimeout(countTime,1000);
33 }
<body onload="countTime()" >
37 <div>
38 <span id="_d">00</span>
39 <span id="_h">00</span>
40 <span id="_m">00</span>
41 <span id="_s">00</span>
42 </div>
43 </body>