首页 > 代码库 > js倒计时
js倒计时
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>倒计时</title>
<style type="text/css">
*{margin:0px; padding:0px;}
body{background: url(img/body.gif); color:#fff;}
.box{width:600px;height:660px; background: url(img/miaov_bg.jpg) center center no-repeat; margin:50px auto; position:relative;}
input{outline: none; height:20px; text-align: center; line-height:20px; border:none; background: transparent; color:#000;}
.years,.months,.days,.time_has,.time_box{position:absolute; }
.years{width:60px; top:110px; left:205px;}
.months{width:30px; top:110px; left:322px;}
.days{width:30px; top:110px; left:395px;}
.time_has{width:100%;top:310px; left:0px; text-align:center; font-size:32px; font-weight: bold;}
.time_box{width:600px; top:400px; left:0px; right:0px; margin:auto;}
.reverse_day,.reverse_hour,.reverse_minite,.reverse_second{position:absolute; top:0px; font-size:40px; color:yellow;}
.reverse_day{left:100px;}
.reverse_hour{left:220px;}
.reverse_minite{left:350px;}
.reverse_second{left:450px;}
.active{width:151px; height:151px; position:absolute; top:155px; left:236px;}
.active img{width:100%; display:none; }
</style>
</head>
<body>
<div class="box">
<input type="text" class="years" value=http://www.mamicode.com/‘2016‘>
<input type=‘text‘ class="months" value=http://www.mamicode.com/‘12‘>
<input type="text" class="days" value=http://www.mamicode.com/‘30‘>
<p class="time_has">现在距离-<span style="color:orange">2016年12月30日</span>-还有</p>
<div class="time_box">
<p>
<b class=‘reverse_day‘>000</b>
<b class=‘reverse_hour‘>000</b>
<b class=‘reverse_minite‘>000</b>
<b class=‘reverse_second‘>000</b>
</p>
</div>
<div class="active"><img src="http://www.mamicode.com/img/btn_hover.jpg"></div>
</div>
<script type="text/javascript">
window.onload=function(){
var years=document.querySelector(‘.years‘);
var months=document.querySelector(‘.months‘);
var days=document.querySelector(‘.days‘);
var reverse_day=document.querySelector(‘.reverse_day‘);
var reverse_hour=document.querySelector(‘.reverse_hour‘);
var reverse_second=document.querySelector(‘.reverse_second‘);
var reverse_minute=document.querySelector(‘.reverse_minite‘);
var flag=false;
var timer=null;
document.querySelector(‘.active‘).addEventListener(‘click‘,function(){
document.querySelector(‘.time_has span‘).innerHTML=years.value+"年"+months.value+"月"+days.value+"日";
if(flag){
flag=false;
this.getElementsByTagName(‘img‘)[0].style.display=‘none‘;
clearInterval(timer);
}else{
flag=true;
this.getElementsByTagName(‘img‘)[0].style.display=‘block‘;
timer=setInterval(function(){
Time();
},1000)
}
})
function Time()
{
//设置时间
var NowDate=new Date();
var oDateEnd=new Date();
oDateEnd.setFullYear(parseInt(years.value));
oDateEnd.setMonth(parseInt(months.value)-1); //格式相差1，所以要减1
oDateEnd.setDate(parseInt(days.value));
oDateEnd.setHours(0);
oDateEnd.setMinutes(0);
oDateEnd.setSeconds(0);
var allTime=(oDateEnd.getTime()-NowDate.getTime())/1000; //计算相差的秒数
if(allTime<0){
alert(‘时间已过期‘);
return;
}
var oDay=parseInt(allTime/86400); //60*60*24
allTime%=86400;
var oHour=parseInt(allTime/3600); //60*60
allTime%=3600;
var oMinute=parseInt(allTime/60); //60
allTime%=60;
var oSecond=allTime;
if(oDay<10){
oDay=‘00‘+oDay;
}
if(oHour<10){
oHour=‘0‘+oHour;
}
if(oMinute<10){
oMinute=‘0‘+oMinute;
}
if(oSecond<10){
oSecond=‘0‘+oSecond;
}
reverse_day.innerHTML=oDay;
reverse_hour.innerHTML=oHour;
reverse_minute.innerHTML=oMinute;
reverse_second.innerHTML=oSecond;
}
}
</script>
</body>
</html>
js倒计时