Javascript實現時間倒計時功能

2019-11-19 12:30:18

字體：大中小

來源：轉載

供稿：網友

本文實例為大家分享了js實現時間倒計時的具體代碼，供大家參考，具體內容如下

這里使用的是Date日期類

<!DOCTYPE html><html>  <head>    <meta charset="utf-8" />    <title>日期類倒計時</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(){//按鈕點擊 音樂停止播放          omusic.pause();        }        function totwo(e){          return e<10?"0"+e:""+e;//如果取得的數字為個數則在其前面增添一個0        }        function go(){//把獲取時間的功能封裝到函數內    注意 時間要向下取整避免小數            var time1=new Date();//獲取當前時間 獲取的市1970年1年1月日到現在的毫秒數(必須寫在函數或者定時器內 每一次變化都要重新獲取當前時間)            var time2=new Date(2017,9,27,17,20,10);//設置需要到達的時間 也是獲取的毫秒數            var conS=Math.floor((time2.getTime()-time1.getTime())/1000);//獲得差值除以1000轉為秒            var day=totwo(Math.floor(conS/86400));// 差值/60/60/24獲取天數            var hour=totwo(Math.floor(conS%86400/3600)); //  取余/60/60獲取時(取余是獲取conS對應位置的小數位)            var min=totwo(Math.floor(conS%86400%3600/60));// 取余/60獲取分            var s=totwo(Math.floor(conS%60)); //取總秒數的余數            var html="倒計時"+day+"天"+hour+"時"+min+"分"+s+"秒";             odiv.innerHTML=html;//把字符串添加進div中            if(conS<0){//倒計時完成 執行功能，這里是播放MP3              clearInterval(time);//執行功能時要清除時間函數              omusic.play();              odiv.innerHTML="春節快樂！";            }                  }        go();//調用函數        var time=setInterval(go,1000);//設置定時器 每一秒執行一次      }    </script>  </head>  <body>    <button id="btn">停止</button>    <audio src="music.mp3" id="music"></audio>    <div id="time"></div>  </body> </html>

效果圖：