<!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了