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

這篇文章主要為大家展示了“JS如何動態(tài)顯示倒計時效果”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“JS如何動態(tài)顯示倒計時效果”這篇文章吧。

創(chuàng)新互聯(lián)在網(wǎng)站設(shè)計、網(wǎng)站制作、成都app軟件開發(fā)公司、網(wǎng)站運營等方面均有出色的表現(xiàn)，憑借多年豐富的經(jīng)驗，我們會仔細(xì)了解各客戶的需求而做出多方面的分析、設(shè)計、整合，為客戶設(shè)計出具風(fēng)格及創(chuàng)意性的商業(yè)解決方案，我們更提供一系列全網(wǎng)營銷推廣，網(wǎng)站制作和網(wǎng)站推廣的服務(wù)，以推動各中小企業(yè)全面信息化，并利用創(chuàng)新技術(shù)幫助各行業(yè)提升企業(yè)形象和運營效率。

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

1.頁面布局

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

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

getTime()獲得設(shè)定的時期與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）設(shè)置定時器每一秒獲取一次新的時間

3.源碼

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 </head>
 <body>
 
 <h2 id="show">距離2020年元旦還有：<span></span>天<span></span>小時<span></span>分<span></span>秒</h2>
 
 <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>

以上是“JS如何動態(tài)顯示倒計時效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享文章：JS如何動態(tài)顯示倒計時效果
網(wǎng)站URL：http://aaarwkj.com/article12/jpoodc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、外貿(mào)網(wǎng)站建設(shè)、標(biāo)簽優(yōu)化、響應(yīng)式網(wǎng)站、網(wǎng)站建設(shè)、微信小程序

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

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