欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS動態(tài)顯示倒計時效果

 更新時間:2019年12月12日 09:17:36   作者:不要生病~  
這篇文章主要介紹了JS實現(xiàn)倒計時效果動態(tài)顯示倒計時功能,本文給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下

1.頁面布局

<h1 id="show">距離2020年元旦還有:<span></span>天<span></span>小時<span></span>分<span></span>秒</h1>

2.js動態(tài)顯示

getTime()獲得設定的時期與1970年1月1日時間相差的毫秒數(shù)

1)獲得插入數(shù)字的位置

var show=document.getElementById("show").getElementsByTagName("span");

2)聲明現(xiàn)在的時間和未來的時間

var timeing=new Date();
var time=new Date(2020,0,1,0,0,0);

3)獲得兩個時間差

var num=time.getTime()-timeing.getTime();

4)計算天數(shù)(24小時60分鐘60秒*1000毫秒) parseInt()取整

var day=parseInt(num/(24*60*60*1000));

5)獲得去除天數(shù)后剩余的毫秒數(shù)

num=num%(24*60*60*1000);

6)計算小時和獲得去除小時后剩余的毫秒數(shù)

var hour=parseInt(num/(60*60*1000));      
num=num%(60*60*1000);

7)計算分鐘和獲得去除分鐘后剩余的毫秒數(shù)

var minute=parseInt(num/(60*1000));
num=num%(60*1000);

8)計算秒

var seconde=parseInt(num/1000);

9)頁面上顯示

       show[0].innerHTML=day;
       show[1].innerHTML=hour;
       show[2].innerHTML=minute;
       show[3].innerHTML=seconde;

10)設置定時器每一秒獲取一次新的時間

3.源碼

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 </head>
 <body>
 
 <h1 id="show">距離2020年元旦還有:<span></span>天<span></span>小時<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動態(tài)顯示倒計時效果,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!

相關文章

最新評論