快捷導(dǎo)航

JS動(dòng)態(tài)顯示倒計(jì)時(shí)效果

更新時(shí)間：2019年12月12日 09:17:36 作者：不要生病~

這篇文章主要介紹了JS實(shí)現(xiàn)倒計(jì)時(shí)效果動(dòng)態(tài)顯示倒計(jì)時(shí)功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

1.頁面布局

<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）頁面上顯示

       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)注明出處，謝謝！

您可能感興趣的文章: