js實現(xiàn)精確到秒的倒計時效果
更新時間：2016年05月29日 10:21:10 作者：透筆度
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)精確到秒的倒計時效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了兩種倒計時效果，供大家參考，具體內(nèi)容如下
效果圖：
1.倒計時效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>倒計時</title>
<link rel="stylesheet" href="css/common.css" type="text/css" charset="utf-8"/>
<style type="text/css">
*{ margin:0; padding:0;}
.dtime{ margin:10px;}
.dtime span{ color:#C30;}
</style>
</head>
<body>
<div class="dtime" id="a1"></div>
<div class="dtime" id="a2"></div>
<div class="dtime" id="a3"></div>
<div class="dtime" id="a4"></div>
<div class="dtime" id="a5"></div>
</body>
<script>
function tbdTimeCountdown(args){//倒計時函數(shù)
var ele=document.getElementById(args.id);
var alltime=args.alltime;
var arr=[];
var t=Math.floor(alltime/(24*60*60));
var yt=alltime%(24*60*60);
var s=Math.floor(yt/(60*60));
var ys=yt%(60*60);
var f=Math.floor(ys/(60));
var yf=ys%(60);
var m=yf;
arr[0]=[t,"天"];
arr[1]=[s,"小時"];
arr[2]=[f,"分"];
arr[3]=[m,"秒結(jié)束"];
var s=ce(arr,0);
ele.innerHTML=s;
var dong;
dong=setInterval(function(){
alltime-=1;
if(alltime<=0){
clearInterval(dong);
ele.innerHTML="<span>0</span>秒";
args.end();
}else{
t=Math.floor(alltime/(24*60*60));
yt=alltime%(24*60*60);
s=Math.floor(yt/(60*60));
ys=yt%(60*60);
f=Math.floor(ys/(60));
yf=ys%(60);
m=yf;
arr[0]=[t,"天"];
arr[1]=[s,"小時"];
arr[2]=[f,"分"];
arr[3]=[m,"秒結(jié)束"];
var s=ce(arr,0);
ele.innerHTML=s;
};
},1000);
function ce(arr,sta){
var i=sta;
if(i<arr.length){
if(arr[i][0]!=0){
var s="";
for(var j=i;j<arr.length;j++){
s+="<span>"+arr[j][0]+"</span>"+arr[j][1];
};
return s;
}else{
return ce(arr,i+1);
};
};
};
};//倒計時end
//效果1
//86402 3602 62
tbdTimeCountdown({id:"a1",//含有倒計時容器
alltime:3,//倒計時總秒數(shù)
end:function(){//倒計時結(jié)束，時間為0是調(diào)用的函數(shù)
//alert("倒計時結(jié)束才會執(zhí)行！");
},
});
//效果2
tbdTimeCountdown({id:"a2",//含有倒計時容器
alltime:62,//倒計時總秒數(shù)
end:function(){//倒計時結(jié)束，時間為0是調(diào)用的函數(shù)
},
});
//效果3
tbdTimeCountdown({id:"a3",//含有倒計時容器
alltime:3602,//倒計時總秒數(shù)
end:function(){//倒計時結(jié)束，時間為0是調(diào)用的函數(shù)
},
});
//效果4
tbdTimeCountdown({id:"a4",//含有倒計時容器
alltime:86402,//倒計時總秒數(shù)
end:function(){//倒計時結(jié)束，時間為0是調(diào)用的函數(shù)
},
});
//效果4
tbdTimeCountdown({id:"a5",//含有倒計時容器
alltime:154789,//倒計時總秒數(shù)
end:function(){//倒計時結(jié)束，時間為0是調(diào)用的函數(shù)
},
});
</script>
</html>
2.倒計時2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>倒計時</title>
<link rel="stylesheet" href="css/common.css" type="text/css" charset="utf-8"/>
<style type="text/css">
*{ margin:0; padding:0;}
.dtime{ margin:10px;}
.dtime span{ color:#C30;}
</style>
</head>
<body>
<div class="dtime" id="a1" alltime="3"></div>
<div class="dtime" id="a2" alltime="62"></div>
<div class="dtime" id="a3" alltime="3605"></div>
<div class="dtime" id="a4" alltime="48605"></div>
<div class="dtime" id="a5" alltime="123456"></div>
</body>
<script>
function tbdTimeCountdown(args){//倒計時函數(shù)
var ele=document.getElementById(args.id);
var alltime=Number(ele.getAttribute(args.alltime));
var arr=[];
var t=Math.floor(alltime/(24*60*60));
var yt=alltime%(24*60*60);
var s=Math.floor(yt/(60*60));
var ys=yt%(60*60);
var f=Math.floor(ys/(60));
var yf=ys%(60);
var m=yf;
arr[0]=[t,"天"];
arr[1]=[s,"小時"];
arr[2]=[f,"分"];
arr[3]=[m,"秒結(jié)束"];
var s=ce(arr,0);
ele.innerHTML=s;
var dong;
dong=setInterval(function(){
alltime-=1;
ele.setAttribute(args.alltime,alltime);
if(alltime<=0){
clearInterval(dong);
ele.innerHTML="<span>0</span>秒";
args.end();
}else{
t=Math.floor(alltime/(24*60*60));
yt=alltime%(24*60*60);
s=Math.floor(yt/(60*60));
ys=yt%(60*60);
f=Math.floor(ys/(60));
yf=ys%(60);
m=yf;
arr[0]=[t,"天"];
arr[1]=[s,"小時"];
arr[2]=[f,"分"];
arr[3]=[m,"秒結(jié)束"];
var s=ce(arr,0);
ele.innerHTML=s;
};
},1000);
function ce(arr,sta){
var i=sta;
if(i<arr.length){
if(arr[i][0]!=0){
var s="";
for(var j=i;j<arr.length;j++){
s+="<span>"+arr[j][0]+"</span>"+arr[j][1];
};
return s;
}else{
return ce(arr,i+1);
};
};
};
};//倒計時end
//效果1
//86402 3602 62
tbdTimeCountdown({id:"a1",//含有倒計時容器
alltime:"alltime",//倒計時總秒數(shù)
end:function(){//倒計時結(jié)束，時間為0是調(diào)用的函數(shù)
alert("倒計時結(jié)束才會執(zhí)行！");
},
});
//效果2
tbdTimeCountdown({id:"a2",//含有倒計時容器
alltime:"alltime",//倒計時總秒數(shù)
end:function(){//倒計時結(jié)束，時間為0是調(diào)用的函數(shù)
},
});
//效果3
tbdTimeCountdown({id:"a3",//含有倒計時容器
alltime:"alltime",//倒計時總秒數(shù)
end:function(){//倒計時結(jié)束，時間為0是調(diào)用的函數(shù)
},
});
//效果4
tbdTimeCountdown({id:"a4",//含有倒計時容器
alltime:"alltime",//倒計時總秒數(shù)
end:function(){//倒計時結(jié)束，時間為0是調(diào)用的函數(shù)
},
});
//效果4
tbdTimeCountdown({id:"a5",//含有倒計時容器
alltime:"alltime",//倒計時總秒數(shù)
end:function(){//倒計時結(jié)束，時間為0是調(diào)用的函數(shù)
},
});
</script>
</html>
大家可以參考專題 《js倒計時功能匯總》 進(jìn)行深入學(xué)習(xí)。
以上就是本文的全部內(nèi)容，希望對大家學(xué)習(xí)JavaScript程序設(shè)計有所幫助。
相關(guān)文章
javascript實現(xiàn)輸出指定行數(shù)正方形圖案的方法
這篇文章主要介紹了javascript實現(xiàn)輸出指定行數(shù)正方形圖案的方法,可實現(xiàn)javascript獲取用戶輸入及根據(jù)輸入?yún)?shù)打印圖形的功能,需要的朋友可以參考下2015-08-08
使用JS在瀏覽器中判斷當(dāng)前網(wǎng)絡(luò)連接狀態(tài)的幾種方法
本篇文章主要介紹了使用JS在瀏覽器中判斷當(dāng)前網(wǎng)絡(luò)狀態(tài)的幾種方法，非常具有實用價值，需要的朋友可以參考下2017-05-05
這篇文章主要介紹js過濾輸入框中非數(shù)字的字符，很簡單，但很實用，需要的朋友可以參考下2014-09-09
js基礎(chǔ)之DOM中document對象的常用屬性方法詳解
下面小編就為大家?guī)硪黄猨s基礎(chǔ)之DOM中document對象的常用屬性方法詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
JavaScript實現(xiàn)一個簡易的計算器實例代碼
這篇文章主要介紹了JavaScript實現(xiàn)一個簡易的計算器實例代碼，具有很好的參考價值，希望對大家有所幫助，一起跟隨小編過來看看吧2018-05-05
關(guān)于JavaScript中的this指向問題總結(jié)篇
在小編面試過程中經(jīng)常會遇到j(luò)avascript中this指向問題，可以說是前端面試必問，下面小編給大家總結(jié)了一下js中this的指向，感興趣的朋友一起學(xué)習(xí)吧2017-07-07
JavaScript必看的10道面試題總結(jié)（推薦）
JavaScript 已經(jīng)成為全棧開發(fā)技能的基石，在全棧開發(fā)面試中都會不可避免地涉及到與 JavaScript 有關(guān)的問題。這篇文章主要給大家介紹了關(guān)于JavaScript必看的10道面試題,需要的朋友可以參考下2021-05-05
JS.findElementById()想必大家并不陌生吧，下面有個不錯的示例，感興趣的朋友可以參考下2013-09-09
這篇文章主要介紹了JS簡單獲得節(jié)點元素的方法,結(jié)合實例形式分析了javascript獲取頁面節(jié)點元素及修改元素屬性相關(guān)操作技巧,需要的朋友可以參考下2018-02-02
Valerio 發(fā)布了 Mootools...2006-09-09