js實現(xiàn)精確到毫秒的倒計時效果
更新時間:2016年08月05日 16:21:52 作者:helloxiaoliang
這篇文章主要為大家詳細介紹了js實現(xiàn)精確到毫秒的倒計時效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了精確到毫秒的倒計時效果,供大家參考,具體內(nèi)容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title></title>
<style>
div{
width: 100%;
height: 50px;
margin-bottom: 5px;
background: yellowgreen;
}
</style>
</head>
<body>
<h2>毫秒的倒計時</h2>
<div id="timer1"></div>
<div id="timer2"></div>
<div id="timer3"></div>
<div id="timer4"></div>
<script>
var addTimer = function(){
var list = [],
interval;
return function(id,timeStamp){
if(!interval){
interval = setInterval(go,1);
}
list.push({ele:document.getElementById(id),time:timeStamp});
}
function go() {
for (var i = 0; i < list.length; i++) {
list[i].ele.innerHTML = changeTimeStamp(list[i].time);
if (!list[i].time)
list.splice(i--, 1);
}
}
//傳入unix時間戳,得到倒計時
function changeTimeStamp(timeStamp){
var distancetime = new Date(timeStamp*1000).getTime() - new Date().getTime();
if(distancetime > 0){
//如果大于0.說明尚未到達截止時間
var ms = Math.floor(distancetime%1000);
var sec = Math.floor(distancetime/1000%60);
var min = Math.floor(distancetime/1000/60%60);
var hour =Math.floor(distancetime/1000/60/60%24);
if(ms<100){
ms = "0"+ ms;
}
if(sec<10){
sec = "0"+ sec;
}
if(min<10){
min = "0"+ min;
}
if(hour<10){
hour = "0"+ hour;
}
return hour + ":" +min + ":" +sec + ":" +ms;
}else{
//若否,就是已經(jīng)到截止時間了
return "已截止!"
}
}
}();
addTimer("timer1",1451923200);//1月5日00點,unix時間戳自己去百度一下,就有的
addTimer("timer2",1451926800);//1月5日01點
addTimer("timer3",1451930400);//1月5日02點
addTimer("timer4",1452020400);//1月6日03點
</script>
</body>
</html>
更多關(guān)于倒計時的文章請查看專題:《倒計時功能》
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
javascript json對象小技巧之鍵名作為變量用法分析
這篇文章主要介紹了javascript json對象小技巧之鍵名作為變量用法,結(jié)合實例形式分析了json對象變量操作相關(guān)使用技巧,需要的朋友可以參考下2019-11-11
js實現(xiàn)內(nèi)容顯示并使用json傳輸數(shù)據(jù)
這篇文章主要為大家詳細介紹了js實現(xiàn)內(nèi)容顯示并使用json傳輸數(shù)據(jù)的方法,感興趣的小伙伴們可以參考一下2016-03-03
JavaScript中利用構(gòu)造器函數(shù)模擬類的方法
JavaScript中沒有類的概念,所以其在對象創(chuàng)建方面與面向?qū)ο笳Z言有所不同。這篇文章主要介紹了JavaScript中利用構(gòu)造器函數(shù)模擬類的方法,文中給出了詳細的示例代碼和介紹,需要的朋友可以參考下,下面一起看看吧。2017-02-02
詳解JavaScript如何實現(xiàn)異步并發(fā)任務(wù)控制器
實現(xiàn)一個控制并發(fā)數(shù)的任務(wù)隊列?、實現(xiàn)一個異步并發(fā)任務(wù)控制器,這已經(jīng)是非常經(jīng)典的手寫題目了,因為其中涉及?異步?和?并發(fā)?的內(nèi)容,所以本文就來講講到底如何實現(xiàn)呢2023-05-05

