JavaScript頁面倒計時功能完整示例
本文實例講述了JavaScript頁面倒計時功能。分享給大家供大家參考,具體如下:
效果圖:

源碼:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>www.dbjr.com.cn JS倒計時</title>
<style>
h3{text-align:center;line-height:50px;height:50px;margin-top:100px;}
#timer{text-align:center;}
</style>
</head>
<body>
<h3>倒計時</h3>
<p id="timer">00:00:00</p>
<script>
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;
}
</script>
</body>
</html>
感興趣的朋友還可以使用在線HTML/CSS/JavaScript代碼運行工具:http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。
PS:這里再為大家推薦幾款時間及日期相關(guān)工具供大家參考使用:
在線秒表工具:
http://tools.jb51.net/bianmin/miaobiao
在線日期/天數(shù)計算器:
http://tools.jb51.net/jisuanqi/date_jisuanqi
在線日期計算器/相差天數(shù)計算器:
http://tools.jb51.net/jisuanqi/datecalc
Unix時間戳(timestamp)轉(zhuǎn)換工具:
http://tools.jb51.net/code/unixtime
更多關(guān)于JavaScript相關(guān)內(nèi)容還可查看本站專題:《JavaScript時間與日期操作技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
JavaScript數(shù)據(jù)結(jié)構(gòu)yocto queue隊列鏈表代碼分析
這篇文章主要為大家介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)yocto queue隊列鏈表代碼分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-12-12
淺談javascript中的數(shù)據(jù)類型轉(zhuǎn)換
本文主要對javascript中的數(shù)據(jù)類型轉(zhuǎn)換進行介紹,具有一定的參考價值,下面跟著小編一起來看下吧2016-12-12
JavaScript cookie與session的使用及區(qū)別深入探究
這篇文章主要介紹了Java中Cookie和Session詳解,文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價值,感興趣的小伙伴可以參考一下2022-10-10
深入理解requestAnimationFrame的動畫循環(huán)
這篇文章先給大家介紹了什么是requestAnimationFrame,而后才深入講述關(guān)于requestAnimationFrame的動畫循環(huán),文章介紹的非常詳細(xì),相信對大家學(xué)習(xí)requestAnimationFrame具有一定的參考借鑒價值,有需要的朋友下面來一起看看吧。2016-09-09
解決uni-app報錯Error:?read?EBADF?at?Pipe?.?onStreamRead...
這篇文章主要介紹了uni-app報錯Error:?read?EBADF?at?Pipe?.?onStreamRead...解決方法,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08
Javascript iframe交互并兼容各種瀏覽器的解決方法
這篇文章主要介紹了Javascript iframe交互并兼容各種瀏覽器的解決方法的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-07-07

