Javascript實現(xiàn)時間倒計時效果

更新時間：2017年07月15日 10:03:18 投稿：lijiao

這篇文章主要為大家詳細介紹了Javascript實現(xiàn)時間倒計時效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js實現(xiàn)時間倒計時展示的具體代碼，供大家參考，具體內(nèi)容如下

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

效果圖：