js實(shí)現(xiàn)精確到毫秒的倒計(jì)時(shí)效果
本文實(shí)例為大家分享了精確到毫秒的倒計(jì)時(shí)效果,供大家參考,具體內(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>毫秒的倒計(jì)時(shí)</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時(shí)間戳,得到倒計(jì)時(shí)
function changeTimeStamp(timeStamp){
var distancetime = new Date(timeStamp*1000).getTime() - new Date().getTime();
if(distancetime > 0){
//如果大于0.說明尚未到達(dá)截止時(shí)間
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)到截止時(shí)間了
return "已截止!"
}
}
}();
addTimer("timer1",1451923200);//1月5日00點(diǎn),unix時(shí)間戳自己去百度一下,就有的
addTimer("timer2",1451926800);//1月5日01點(diǎn)
addTimer("timer3",1451930400);//1月5日02點(diǎn)
addTimer("timer4",1452020400);//1月6日03點(diǎn)
</script>
</body>
</html>
更多關(guān)于倒計(jì)時(shí)的文章請(qǐng)查看專題:《倒計(jì)時(shí)功能》
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
微信小程序手機(jī)號(hào)碼驗(yàn)證功能的實(shí)例代碼
這篇文章主要介紹了微信小程序手機(jī)號(hào)碼驗(yàn)證功能的實(shí)例代碼及微信小程序正則判斷手機(jī)號(hào)的方法,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-08-08
javascript json對(duì)象小技巧之鍵名作為變量用法分析
這篇文章主要介紹了javascript json對(duì)象小技巧之鍵名作為變量用法,結(jié)合實(shí)例形式分析了json對(duì)象變量操作相關(guān)使用技巧,需要的朋友可以參考下2019-11-11
js實(shí)現(xiàn)內(nèi)容顯示并使用json傳輸數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)內(nèi)容顯示并使用json傳輸數(shù)據(jù)的方法,感興趣的小伙伴們可以參考一下2016-03-03
JavaScript中利用構(gòu)造器函數(shù)模擬類的方法
JavaScript中沒有類的概念,所以其在對(duì)象創(chuàng)建方面與面向?qū)ο笳Z言有所不同。這篇文章主要介紹了JavaScript中利用構(gòu)造器函數(shù)模擬類的方法,文中給出了詳細(xì)的示例代碼和介紹,需要的朋友可以參考下,下面一起看看吧。2017-02-02
webpack自動(dòng)打包功能實(shí)現(xiàn)
webpack是前端項(xiàng)目構(gòu)建工具打包工具,本文通過實(shí)例代碼給大家介紹webpack自動(dòng)打包功能實(shí)現(xiàn),感興趣的朋友跟隨小編一起看看吧2023-02-02
利用原生JS自動(dòng)生成文章標(biāo)題樹的實(shí)例
網(wǎng)上關(guān)于生成文章標(biāo)題樹的示例很多,這篇文章介紹的是利用原生JS實(shí)現(xiàn)自動(dòng)生成文章標(biāo)題樹,實(shí)現(xiàn)過程很簡單,有需要的可以參考借鑒。2016-08-08
詳解JavaScript如何實(shí)現(xiàn)異步并發(fā)任務(wù)控制器
實(shí)現(xiàn)一個(gè)控制并發(fā)數(shù)的任務(wù)隊(duì)列?、實(shí)現(xiàn)一個(gè)異步并發(fā)任務(wù)控制器,這已經(jīng)是非常經(jīng)典的手寫題目了,因?yàn)槠渲猩婕?異步?和?并發(fā)?的內(nèi)容,所以本文就來講講到底如何實(shí)現(xiàn)呢2023-05-05

