有明确结束时间的倒计时

<body>
    <div id="hxtime" style="padding:5px 0 0 0;"></div>
    <script language="JavaScript">
     var hxtime=document.getElementById("hxtime");
   var timer=null; 
//console.log(hxtime); function ShowTimes(){ var endtime=new Date("2017/10/19 11:32:00"); var nowtime=new Date(); var LeaveTime=endtime-nowtime; //Math.floor向下取整 var LeaveDays=Math.floor(LeaveTime/(1000*60*60*24))// var LeaveHours=Math.floor(LeaveTime/(1000*60*60)%24);//小时 var LeaveMinutes=Math.floor(LeaveTime/(1000*60)%60);// var LeaveSeconds=Math.floor(LeaveTime/(1000)%60);// if(LeaveTime<0){ hxtime.innerHTML="抢购已结束"; clearInterval(timer); }else{ hxtime.innerHTML="距离相见的日子还有<font color=red>" + LeaveDays + "</font>天<font color=red>" + LeaveHours + "</font>时<font color=red>" + LeaveMinutes + "</font>分<font color=red>" + LeaveSeconds + "</font>秒<font color=red>"; } } timer=setInterval(ShowTimes,1000); </script> </body>

 点击发送验证码60秒倒计时

<body>
    <input type="text" id="txt">
    <button id="btn">点击发送短信验证码</button>
    <script language="JavaScript">
     var btn=document.getElementById('btn');
     var countdown=60;
     var timer=null;
     btn.onclick=settime; 
     function settime(){
        if(countdown==0){
            clearTimeout(timer)
            btn.removeAttribute("disabled");
            btn.innerHTML="免费获取验证码";
            countdown=60;
            return;
        }else{
            btn.setAttribute("disabled",true); 
            btn.innerHTML="重新发送("+countdown+")";
            countdown--;
        }
        timer=setTimeout(function() { 
            settime() 
        },1000) 
     }   

    </script>
</body>

 5秒倒计时跳转页面

<body>
    <div id="btn">欢迎</div>
    <script language="JavaScript">
    var countdown=5;
    var btn=document.getElementById("btn")
    var timer=null;
    setTime();
    function setTime(){
        if(countdown==0){
            clearTimeout(timer);
            window.location="http://www.baidu.com";
        }else{
            btn.innerHTML="倒计时"+countdown+"s";
            countdown--;
        }
        setTimeout(function(){
            setTime()
        },1000);
    }
    </script>
</body>

 

posted on 2017-10-19 11:32  执候  阅读(226)  评论(0编辑  收藏  举报