Javascript實(shí)現(xiàn)時(shí)間倒計(jì)時(shí)效果
本文實(shí)例為大家分享了js實(shí)現(xiàn)時(shí)間倒計(jì)時(shí)展示的具體代碼,供大家參考,具體內(nèi)容如下
這里使用的是Date日期類
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>日期類倒計(jì)時(shí)</title> <script type="text/javascript"> window.onload=function(){ var odiv=document.getElementById("time"); var obtn=document.getElementById("btn"); var omusic=document.getElementById("music"); obtn.onclick=function(){//按鈕點(diǎn)擊 音樂(lè)停止播放 omusic.pause(); } function totwo(e){ return e<10?"0"+e:""+e;//如果取得的數(shù)字為個(gè)數(shù)則在其前面增添一個(gè)0 } function go(){//把獲取時(shí)間的功能封裝到函數(shù)內(nèi) 注意 時(shí)間要向下取整避免小數(shù) var time1=new Date();//獲取當(dāng)前時(shí)間 獲取的市1970年1年1月日到現(xiàn)在的毫秒數(shù)(必須寫(xiě)在函數(shù)或者定時(shí)器內(nèi) 每一次變化都要重新獲取當(dāng)前時(shí)間) var time2=new Date(2017,9,27,17,20,10);//設(shè)置需要到達(dá)的時(shí)間 也是獲取的毫秒數(shù) var conS=Math.floor((time2.getTime()-time1.getTime())/1000);//獲得差值除以1000轉(zhuǎn)為秒 var day=totwo(Math.floor(conS/86400));// 差值/60/60/24獲取天數(shù) var hour=totwo(Math.floor(conS%86400/3600)); // 取余/60/60獲取時(shí)(取余是獲取conS對(duì)應(yīng)位置的小數(shù)位) var min=totwo(Math.floor(conS%86400%3600/60));// 取余/60獲取分 var s=totwo(Math.floor(conS%60)); //取總秒數(shù)的余數(shù) var html="倒計(jì)時(shí)"+day+"天"+hour+"時(shí)"+min+"分"+s+"秒"; odiv.innerHTML=html;//把字符串添加進(jìn)div中 if(conS<0){//倒計(jì)時(shí)完成 執(zhí)行功能,這里是播放MP3 clearInterval(time);//執(zhí)行功能時(shí)要清除時(shí)間函數(shù) omusic.play(); odiv.innerHTML="春節(jié)快樂(lè)!"; } } go();//調(diào)用函數(shù) var time=setInterval(go,1000);//設(shè)置定時(shí)器 每一秒執(zhí)行一次 } </script> </head> <body> <button id="btn">停止</button> <audio src="music.mp3" id="music"></audio> <div id="time"></div> </body> </html>
效果圖:
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- JS 倒計(jì)時(shí)實(shí)現(xiàn)代碼(時(shí)、分,秒)
- 簡(jiǎn)單易用的倒計(jì)時(shí)js代碼
- js幾秒以后倒計(jì)時(shí)跳轉(zhuǎn)示例
- js代碼實(shí)現(xiàn)點(diǎn)擊按鈕出現(xiàn)60秒倒計(jì)時(shí)
- javascript倒計(jì)時(shí)效果代碼,可以方便參數(shù)調(diào)用
- Javascript倒計(jì)時(shí)代碼
- 一個(gè)不錯(cuò)的js html頁(yè)面倒計(jì)時(shí)可精確到秒
- js實(shí)現(xiàn)點(diǎn)擊獲取驗(yàn)證碼倒計(jì)時(shí)效果
- javascript秒數(shù)倒計(jì)時(shí)自動(dòng)跳轉(zhuǎn)代碼
- js倒計(jì)時(shí)代碼
相關(guān)文章
uni-app中實(shí)現(xiàn)元素拖動(dòng)效果
這篇文章主要介紹了uni-app中實(shí)現(xiàn)元素拖動(dòng)效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-01-01JavaScript面試Module?Federation實(shí)現(xiàn)原理詳解
這篇文章主要為大家介紹了JavaScript面試Module?Federation實(shí)現(xiàn)原理詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10JavaScript數(shù)字?jǐn)?shù)組的13個(gè)實(shí)用小技巧
數(shù)組是JS最常見(jiàn)的一種數(shù)據(jù)結(jié)構(gòu),咱們?cè)陂_(kāi)發(fā)中也經(jīng)常用到,在這篇文章中,提供一些小技巧,幫助咱們提高開(kāi)發(fā)效率,這篇文章主要給大家分享介紹了關(guān)于JavaScript數(shù)字?jǐn)?shù)組的13個(gè)實(shí)用小技巧,需要的朋友可以參考下2023-11-11JS彈出層遮罩,隱藏背景頁(yè)面滾動(dòng)條細(xì)節(jié)優(yōu)化分析
下面小編就為大家?guī)?lái)一篇JS彈出層遮罩,隱藏背景頁(yè)面滾動(dòng)條細(xì)節(jié)優(yōu)化分析。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考2016-04-04使用layer彈窗提交表單時(shí)判斷表單是否輸入為空的例子
今天小編就為大家分享一篇使用layer彈窗提交表單時(shí)判斷表單是否輸入為空的例子,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09用JS簡(jiǎn)單實(shí)現(xiàn)九宮格抽獎(jiǎng)的示例代碼
在網(wǎng)上經(jīng)??匆?jiàn)一些抽獎(jiǎng)頁(yè)面,也玩過(guò)不同類型的抽獎(jiǎng)活動(dòng),但是一直沒(méi)有做過(guò)抽獎(jiǎng)的功能,所以今天來(lái)實(shí)現(xiàn)一個(gè)簡(jiǎn)單的九宮格抽獎(jiǎng)功能,文中有詳細(xì)的代碼示例供大家參考,感興趣的朋友可以自己動(dòng)手嘗試一下2023-12-12js彈性勢(shì)能動(dòng)畫(huà)之拋物線運(yùn)動(dòng)實(shí)例詳解
這篇文章主要為大家詳細(xì)介紹了js彈性勢(shì)能動(dòng)畫(huà)之拋物線運(yùn)動(dòng)的制作方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07