怎麼讓鏈式調用setTimeout中止

時間 2019-11-11
原文原文鏈接
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>倒計時</title>
    <style> body,html{ margin: 0; padding: 0; width:100%; height: 100%;
                    
        } .wrapper{ width:100%; height:100%; background: url(images/body.gif) no-repeat; background-repeat: repeat-x; padding-top:20px;
        } .logo{ width:150px; height:150px; position:absolute; top:175px; left:612px; opacity: 0; background: url(images/btn_hover.jpg) no-repeat; transition:1s;
          
           

        } .logo:hover{ opacity:1; transition:1s;

        } .countDown{ width:600px; height: 660px; background: url(images/miaov_bg.jpg) no-repeat; margin:0 auto; position:relative;
        } .countDown .timeUp{ position: absolute; top:93px; width:100%;

        } .countDown .timeUp span{ color:white; font-size:14px; position:absolute; display: inline-block;
           

        } .countDown .timeUp span:nth-child(1){ left:144px;

         } .countDown .timeUp span:nth-child(2){ left:286px;

         } .countDown .timeUp span:nth-child(3){ left:365px;

         } .countDown .timeUp span:nth-child(4){ left:450px;

         } .countDown .timeUp input{ height:16px; line-height:16px; background: none; position:absolute; width:70px; font-weight:bold; outline-style: none; border:0; text-align:center; color:#666;

         } .countDown .timeUp .inputYear{ left:200px; top:2px;
           } .countDown .timeUp .inputMath{ left:300px; top:3px;
           } .countDown .timeUp .inputDay{ left:380px; top:3px;
           } .countDown .timeCenter{ position:absolute; width:100%; top:312px; text-align:center; color:white; font-size:20px;
                 
           } .countDown .timeCenter span{ color:orange;
           } .countDown .timeDown{ position:absolute; top:388px; width:100%;

          } .countDown .timeDown span { position:absolute; color:orange; font-size:30px;

          } .countDown .timeDown span:nth-child(1){ left:100px;

           } .countDown .timeDown span:nth-child(2){ left:222px;
               
           } .countDown .timeDown span:nth-child(3){ left:352px;
                
           } .countDown .timeDown span:nth-child(4){ left:458px;
               
           }

    </style>
</head>
<body>
       <div class="wrapper">

           <div class="countDown" >

                <p class="timeUp" id="timeUp">
                     <span id="days">請輸入:</span>
                     <span id="hours">年</span>
                     <span id="minutes">月</span>
                     <span id="seconds">日</span>
                     <input type="text" class="inputYear" value="2018">
                     <input type="text" class="inputMath" value="12">
                     <input type="text" class="inputDay" value="22">
                </p>

                <p class="timeCenter" id="timeCenter"> 如今距離 - <span>2018年12月22日</span> - 還剩: </p>

                <p class="timeDown" id="timeDown">
                  
                     <span>000</span>
                     <span>00</span>
                     <span>00</span>
                     <span>00</span>

                </p>
                
           </div>

           <div id="logo" class="logo"></div>
           
       </div>

     <script>

         var start=document.getElementById("logo"); var timeUp=document.getElementById("timeUp"); var timeCenter=document.getElementById("timeCenter"); var timeDown=document.getElementById("timeDown"); var timer=null; var end=false; delay=1000; start.onclick=function(){ var curFn=arguments.callee; var timeUp_input=timeUp.getElementsByTagName("input"); var timeDown_span=timeDown.getElementsByTagName("span"); var timeCenter_span= timeCenter.getElementsByTagName("span")[0]; var year=timeUp_input[0].value || 2018; var month=timeUp_input[1].value || 12; var day=timeUp_input[2].value || 22; timeCenter_span.innerHTML=year+"年"+month+"月"+day+"日"; var willTime=new Date(year,month-1,day,0,0,0); //var months=[12,1,2,3,4,5,6,7,8,9,10,11];
 timer=setTimeout(function(){ var curTime=new Date(); if(curTime>=willTime || willTime<=curTime ){ alert("活動時間已經結束!!!"); for(var i=0,len=timeDown_span.length;i<len;i++){ timeDown_span[i].innerHTML="000"; } end=true; clearTimeout(timer); return; } var milliseconds=willTime.getTime()-curTime.getTime(); var days=milliseconds/1000/3600/24; //天數

                  var hours=milliseconds/1000/3600%24; //剩餘的小時

                  var minute=milliseconds/1000/60%60; //剩餘分鐘數

                  var seconds=milliseconds/1000%60; //剩餘秒數

                   //總結 XXX%什麼 剩下的仍是XXX
                   //因此 就須要 分鐘%60 剩下的纔是分鐘
 timeDown_span[0].innerHTML=addZero(days); timeDown_span[1].innerHTML=addZero(hours); timeDown_span[2].innerHTML=addZero(minute); timeDown_span[3].innerHTML=addZero(seconds); if(!end){ timer=setTimeout(arguments.callee,delay); } else{ for(var i=0,len=timeDown_span.length;i<len;i++){ timeDown_span[i].innerHTML="000"; } end=false; } }); }; function addZero(num){ num=parseInt(num); if(num<100 && num>=10){ return "0"+num; } else if(num<10){ return "00"+num; } else{ return num; } } </script>
</body>
</html>