Javascript實(shí)現(xiàn)時(shí)間倒計(jì)時(shí)效果

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

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

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

這里使用的是Date日期類(lèi)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>日期類(lèi)倒計(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>

效果圖：