js倒计时

 <!--倒计时-->
    <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>  
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值