html+css布局：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title> 倒计时2</title> <style> /* reset css 样式重置 */ body,p,pre,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,tr,td,div,img,form,fieldset,select,textarea,input{ margin: 0; padding: 0; } body{font-size:16px;} table{border-collapse: collapse;} select,textarea,input{outline:none; border: none; background:#fff; } textarea{ resize: none; overflow: auto} a{ text-decoration: none;} li{ list-style: none; vertical-align: top} img{ border:none; vertical-align: top} /* end reset css */ .wrap{ padding: 20px; 400px; height:450px; margin:100px auto 0; background: black; color: white; font-size: 22px; } .wrap h3{ padding: 30px 0; text-align: center; } .wrap p{ text-align: center;} .wrap input{ 50px; height: 25px;} .wrap .start{ margin: 30px auto; 200px; height: 200px; font-size: 32px; text-align: center; line-height: 200px; } </style> </head> <body> <div class="wrap" style="background: black"> <h3>倒计时效果</h3> <p class="input"> <input type="text" name="" id="year" value="2016"/>年 <input type="text" name="" id="mon" value="8"/> 月 <input type="text" name="" id="day" value="29"/> 日 </p> <div class="start"style="background: red"> 点击开始倒计 </div> <div class="showResult">
倒计时：<!--<span class="re_year"> </span>年 <span class="re_mon"> </span>月-->
<span class="re_day">0</span>天
<span class="re_hour"> </span>时 <span class="re_min"> </span>分 <span class="second"> </span>秒
</div> </div> </body> </html>
一、倒计时：天数时分秒
jqury - 元素.get(0) - js :
<script src="../jquery-3.0.0.js"></script>
<script>
$( function(){
var countTimer = null;
$(".wrap .start").get(0).onclick = function () {
var nowTime = new Date();
var y = $(".input input").get(0).value ;
var m = $(".input input").get(1).value ;
var d= $(".input input").get(2).value ;
var futureTime = new Date( parseInt(y ), parseInt(m )-1 , parseInt(d ) ,0,0,0 ); //注意：月份参数0-11代表1-12.
if( countTimer != null ){
window.clearInterval( countTimer );
}
countTimer= window.setInterval( function(){
oTime = getTimeCount(futureTime,nowTime );
$(".showResult span").get(0).innerHTML = oTime.day;
$(".showResult span").get(1).innerHTML = oTime.hour;
$(".showResult span").get(2).innerHTML = oTime.minute;
$(".showResult span").get(3).innerHTML = oTime.second;
}, 1000)
}
//自定义函数
function getTimeCount(futureTime,nowTime ){
/* if( futureTime-nowTime<=0 ) return { "day":0 ,
"hour":0 , "minute":0 , "second":0};*/
var t = Math.floor( ( futureTime - nowTime ) /1000 );
var day = Math.floor(t/86400) ;
var h = Math.floor(t%86400/3600) ;
var m =Math.floor(t%86400%3600/60) ;
var s= t%60 ;
return { "day":day ,
"hour":h , "minute":m , "second":s
};
}
});
</script>
二、倒计时：年月日时分秒
jqury - 元素.get(0) - js :
<script src="../jquery-3.0.0.js"></script>
<script>
$( function(){
var countTimer = null;
$(".wrap .start").get(0).onclick = function () {
var y1 = $(".input input").get(0).value ;
var m1 = $(".input input").get(1).value ;
var d1= $(".input input").get(2).value ;
//注意：月份参数0-11代表1-12.
var futureTime = new Date( parseInt(y1 ), parseInt(m1 )-1 , parseInt(d1 ) ,0,0,0 );
var oTime={ "year":0 , "month":0 , "day":0 ,
"hour":0 , "minute":0 , "second":0};
if( countTimer != null ){
window.clearInterval( countTimer );
}
countTimer=window.setInterval( function(){
var nowTime = new Date();
oTime = getTimeCount(futureTime,nowTime );
$(".showResult span").get(0).innerHTML = oTime.year ;
$(".showResult span").get(1).innerHTML = oTime.month;
$(".showResult span").get(2).innerHTML = oTime.day;
$(".showResult span").get(3).innerHTML = oTime.hour;
$(".showResult span").get(4).innerHTML = oTime.minute;
$(".showResult span").get(5).innerHTML = oTime.second;
}, 1000);
}
//自定义函数
function getTimeCount(futureTime,nowTime ){
/* if( futureTime-nowTime<=0 ) return { "year":0 , "month":0 , "day":0 ,
"hour":0 , "minute":0 , "second":0};*/
var year = futureTime.getFullYear() -nowTime.getFullYear() ;
var mon = futureTime.getMonth() -nowTime.getMonth() ;
var day = futureTime.getDate() -nowTime.getDate() ;
var h = futureTime.getHours() -nowTime.getHours() ;
var m = futureTime.getMinutes() -nowTime.getMinutes() ;
var s= futureTime.getSeconds() -nowTime.getSeconds() ;
if( mon<0){ //注意：月份参数0-11代表1-12.
year--;
mon=12+mon;
}
if( day<0){
mon--;
day=day+ getLastDay(nowTime.getFullYear() , nowTime.getMonth() ); // 28 29 30 31
}
if( h<0){
day--;
h=h+24;
}
if(m<0){
h--;
m=m+60;
}
if(s<0){
m--;
s=s+60;
}
return { "year":year , "month":mon , "day":day ,
"hour":h , "minute":m , "second":s
};
}
//自定义函数-获取某月天数(最后一天不固定): 获取当月最后一天日期 :下个月的第一天减去一天
function getLastDay(date)
{
var new_year = date.getFullYear(); //取当前的年份
var new_month =(date.getMonth) ;//取下一个月的第一天，方便计算（最后一天不固定）
var new_date = new Date(new_year,++new_month,1); //取当年当月中的第一天
return (new Date(new_date.getTime()-1000*60*60*24)).getDate();//获取当月最后一天
}
});
</script>
