js页面倒计时7天 java_JavaScript页面倒计时功能完整示例

本文实例讲述了JavaScript页面倒计时功能。分享给大家供大家参考，具体如下：

效果图：

源码：

www.jb51.net JS倒计时

h3{text-align:center;line-height:50px;height:50px;margin-top:100px;}

#timer{text-align:center;}

倒计时

00:00:00

var timeObj=document.getElementById("timer");

// var startTime=new Date();

// startTime=startTime.getTime();

// var endTime="2017-4-20 19:30:00";

// endTime=new Date(endTime.replace(/-/g,'/')).getTime();

// var diffTime = endTime-startTime;

var diffTime=400000;

//-----------------------------------倒计时start--------------------------------

function timeBack(){

var timer = setInterval(function(){

if(diffTime>=1000){

diffTime -= 1000;

timeObj.innerHTML = formatDate(diffTime);

}

},1000)

}

timeBack();

function formatDate(maxtime) {

var d = Math.floor(maxtime / (1000 * 60 * 60 * 24));

var h = Math.floor(maxtime / (1000*3600)) - (d * 24);

var m = Math.floor(maxtime / (1000*60)) - (d * 24 *60) - (h * 60);

var s = Math.floor(maxtime / (1000)) - (d * 24 *60*60) - (h * 60 * 60) - (m*60);

var hour=(d*24)+h,minutes=m,seconds=s;

if(hour>100){

hour=99

}

if(hour < 10){

hour="0"+hour;

}

if (m < 10 ) {

minutes = "0"+minutes

}if(s <10){

seconds = "0"+seconds;

}

return hour+":"+minutes+":"+seconds;

}

感兴趣的朋友还可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

PS：这里再为大家推荐几款时间及日期相关工具供大家参考使用：

希望本文所述对大家JavaScript程序设计有所帮助。