<!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>
不断的调用setTimeout 让时间显示为最先时间
当输入的时间比当前时间小的时候 或者 当前时间比输入时间大的时候 都会不再运行setTimeout了