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.說(shuō)明尚未到達(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í)功能》
以上就是本文的全部?jī)?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-08javascript json對(duì)象小技巧之鍵名作為變量用法分析
這篇文章主要介紹了javascript json對(duì)象小技巧之鍵名作為變量用法,結(jié)合實(shí)例形式分析了json對(duì)象變量操作相關(guān)使用技巧,需要的朋友可以參考下2019-11-11js實(shí)現(xiàn)內(nèi)容顯示并使用json傳輸數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)內(nèi)容顯示并使用json傳輸數(shù)據(jù)的方法,感興趣的小伙伴們可以參考一下2016-03-03JavaScript中利用構(gòu)造器函數(shù)模擬類的方法
JavaScript中沒(méi)有類的概念,所以其在對(duì)象創(chuàng)建方面與面向?qū)ο笳Z(yǔ)言有所不同。這篇文章主要介紹了JavaScript中利用構(gòu)造器函數(shù)模擬類的方法,文中給出了詳細(xì)的示例代碼和介紹,需要的朋友可以參考下,下面一起看看吧。2017-02-02webpack自動(dòng)打包功能實(shí)現(xiàn)
webpack是前端項(xiàng)目構(gòu)建工具打包工具,本文通過(guò)實(shí)例代碼給大家介紹webpack自動(dòng)打包功能實(shí)現(xiàn),感興趣的朋友跟隨小編一起看看吧2023-02-02利用原生JS自動(dòng)生成文章標(biāo)題樹(shù)的實(shí)例
網(wǎng)上關(guān)于生成文章標(biāo)題樹(shù)的示例很多,這篇文章介紹的是利用原生JS實(shí)現(xiàn)自動(dòng)生成文章標(biāo)題樹(shù),實(shí)現(xiàn)過(guò)程很簡(jiǎ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)典的手寫(xiě)題目了,因?yàn)槠渲猩婕?異步?和?并發(fā)?的內(nèi)容,所以本文就來(lái)講講到底如何實(shí)現(xiàn)呢2023-05-05