JS動(dòng)態(tài)顯示倒計(jì)時(shí)效果
1.頁(yè)面布局
<h1 id="show">距離2020年元旦還有:<span></span>天<span></span>小時(shí)<span></span>分<span></span>秒</h1>
2.js動(dòng)態(tài)顯示
getTime()獲得設(shè)定的時(shí)期與1970年1月1日時(shí)間相差的毫秒數(shù)
1)獲得插入數(shù)字的位置
var show=document.getElementById("show").getElementsByTagName("span");
2)聲明現(xiàn)在的時(shí)間和未來的時(shí)間
var timeing=new Date(); var time=new Date(2020,0,1,0,0,0);
3)獲得兩個(gè)時(shí)間差
var num=time.getTime()-timeing.getTime();
4)計(jì)算天數(shù)(24小時(shí)60分鐘60秒*1000毫秒) parseInt()取整
var day=parseInt(num/(24*60*60*1000));
5)獲得去除天數(shù)后剩余的毫秒數(shù)
num=num%(24*60*60*1000);
6)計(jì)算小時(shí)和獲得去除小時(shí)后剩余的毫秒數(shù)
var hour=parseInt(num/(60*60*1000)); num=num%(60*60*1000);
7)計(jì)算分鐘和獲得去除分鐘后剩余的毫秒數(shù)
var minute=parseInt(num/(60*1000)); num=num%(60*1000);
8)計(jì)算秒
var seconde=parseInt(num/1000);
9)頁(yè)面上顯示
show[0].innerHTML=day; show[1].innerHTML=hour; show[2].innerHTML=minute; show[3].innerHTML=seconde;
10)設(shè)置定時(shí)器每一秒獲取一次新的時(shí)間
3.源碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h1 id="show">距離2020年元旦還有:<span></span>天<span></span>小時(shí)<span></span>分<span></span>秒</h1> <script> var show=document.getElementById("show").getElementsByTagName("span"); setInterval(function(){ var timeing=new Date(); var time=new Date(2020,0,1,0,0,0); var num=time.getTime()-timeing.getTime(); var day=parseInt(num/(24*60*60*1000)); num=num%(24*60*60*1000); var hour=parseInt(num/(60*60*1000)); num=num%(60*60*1000); var minute=parseInt(num/(60*1000)); num=num%(60*1000); var seconde=parseInt(num/1000); show[0].innerHTML=day; show[1].innerHTML=hour; show[2].innerHTML=minute; show[3].innerHTML=seconde; },100) </script> </body> </html>
總結(jié)
以上所述是小編給大家介紹的JS動(dòng)態(tài)顯示倒計(jì)時(shí)效果,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
如果你覺得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
- JavaScript仿京東秒殺倒計(jì)時(shí)
- JS實(shí)現(xiàn)秒殺倒計(jì)時(shí)特效
- JS實(shí)現(xiàn)動(dòng)態(tài)倒計(jì)時(shí)功能(天數(shù)、時(shí)、分、秒)
- js實(shí)現(xiàn)時(shí)分秒倒計(jì)時(shí)
- js實(shí)現(xiàn)指定時(shí)間倒計(jì)時(shí)效果
- js實(shí)現(xiàn)頁(yè)面多個(gè)日期時(shí)間倒計(jì)時(shí)效果
- javascript實(shí)現(xiàn)5秒倒計(jì)時(shí)并跳轉(zhuǎn)功能
- JS倒計(jì)時(shí)兩種實(shí)現(xiàn)方式代碼實(shí)例
相關(guān)文章
JavaScript中實(shí)現(xiàn)最高效的數(shù)組亂序方法
這篇文章主要介紹了JavaScript中實(shí)現(xiàn)最高效的數(shù)組亂序方法,數(shù)組亂序的意思是,把數(shù)組內(nèi)的所有元素排列順序打亂,需要的朋友可以參考下2014-10-10js操作二級(jí)聯(lián)動(dòng)實(shí)現(xiàn)代碼
網(wǎng)上二級(jí)(多級(jí))聯(lián)動(dòng)的例子也不少,有各種不同的操作方法。我所采用的方法網(wǎng)上也應(yīng)該有的,不過我還沒有看到過。2010-07-07JavaScript防抖與節(jié)流超詳細(xì)全面講解
在開發(fā)中我們經(jīng)常會(huì)遇到一些高頻操作,比如:鼠標(biāo)移動(dòng),滑動(dòng)窗口,鍵盤輸入等等,節(jié)流和防抖就是對(duì)此類事件進(jìn)行優(yōu)化,降低觸發(fā)的頻率,以達(dá)到提高性能的目的。本文就教大家如何實(shí)現(xiàn)一個(gè)讓面試官拍大腿的防抖節(jié)流函數(shù),需要的可以參考一下2022-10-10微信小程序頁(yè)面調(diào)用自定義組件內(nèi)的事件詳解
這篇文章主要介紹了微信小程序頁(yè)面調(diào)用自定義組件內(nèi)的事件詳解,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09JavaScript實(shí)戰(zhàn)之帶收放動(dòng)畫效果的導(dǎo)航菜單
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)戰(zhàn)之帶收放動(dòng)畫效果的導(dǎo)航菜單,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-08-08javascript代碼在ie8里報(bào)錯(cuò) document.getElementById(...) 為空或不是對(duì)象的解決方
今天更升級(jí)了ie8,發(fā)現(xiàn)原來在ie7下可以運(yùn)行的代碼,不能運(yùn)行了,發(fā)現(xiàn)了一些細(xì)節(jié),附臨時(shí)修改辦法。2009-11-11關(guān)于微信公眾號(hào)開發(fā)無(wú)法支付的問題解決
這篇文章主要介紹了關(guān)于微信公眾號(hào)開發(fā)無(wú)法支付的問題解決,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12純js實(shí)現(xiàn)頁(yè)面返回頂部的動(dòng)畫(超簡(jiǎn)單)
下面小編就為大家?guī)硪黄僯s實(shí)現(xiàn)頁(yè)面返回頂部的動(dòng)畫(超簡(jiǎn)單)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08javascript笛卡爾積算法實(shí)現(xiàn)方法
這篇文章主要介紹了javascript笛卡爾積算法實(shí)現(xiàn)方法,實(shí)例分析了笛卡爾積算法的javascript實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-04-04