整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          JavaScript倒計時怎么寫?

          JavaScript倒計時怎么寫?

          例:倒計時

          案例分析:

          1.這個倒計時是不斷變化的,因此需要定時器來自動變化(setInterval)

          2.三個黑色盒子里面分別存放時分秒

          3.三個黑色盒子利用innerHTML放入計算的小時分鐘秒數

          4.第一次執行也是間隔毫秒數,因此剛刷新頁面會有空白

          5.最好采取封裝函數的方式,這樣可以先調用一次這個函數,防止剛開始刷新頁面有空白問題。

          倒計時的算法:

          1.核心算法:輸入的時間減去現在的時間就是剩余的時間,即倒計時,但是不能拿著時分秒相減,比如05分減去25分,

          結果會是負數的

          2.用時間戳來做,用戶輸入時間總的毫秒數減去現在時間的總的毫秒數,得到的就是剩余時間的毫秒數.

          3.把剩余時間總的毫秒數轉換為天、時、分、秒、(時間戳轉換為時分秒)*/

          //轉換公式如下:

          /*d=parseInt(總秒數/60/60/24); //計算天數

          h=parseInt(總秒數/60/60%24); //計算小時

          m=parseInt(總秒數/60%24); //計算分鐘

          s=parseInt(總秒數%60); //計算當前秒數*/

          function conus(time){

          var dqtime=+new Date(time);

          var zqtime=+new Date();

          var times=(dqtime - zqtime) / 1000;

          var t=parseInt(times / 60 / 60 / 24);//天

          t=t < 10 ? '0' + t:t;

          var s=parseInt(times / 60 / 60 % 24);//時

          s=s < 10 ? '0' + s:s;

          var f=parseInt(times / 60 % 60);//分

          f=f < 10 ? '0' + f:f;

          var m=parseInt(times % 60);//秒

          m=m < 10 ? '0' + m:m;

          return t + '天' + s + '時' + f + '分' + m + '秒';

          }

          console.log(conus('2022-6-7 12:00:00'));

          源碼如下

          imeDown.js

          /*
          時間倒計時插件
          TimeDown.js
          */
          function TimeDown(id, endDateStr) {
          //結束時間
          var endDate=new Date(endDateStr);
          //當前時間
          var nowDate=new Date();
          //相差的總秒數
          var totalSeconds=parseInt((endDate - nowDate) / 1000);
          //天數
          var days=Math.floor(totalSeconds / (60 * 60 * 24));
          //取模(余數)
          var modulo=totalSeconds % (60 * 60 * 24);
          //小時數
          var hours=Math.floor(modulo / (60 * 60));
          modulo=modulo % (60 * 60);
          //分鐘
          var minutes=Math.floor(modulo / 60);
          //秒
          var seconds=modulo % 60;
          //輸出到頁面
          document.getElementById(id).innerHTML="還剩:" + days + "天" + hours + "小時" + minutes + "分鐘" + seconds + "秒";
          //延遲一秒執行自己
          setTimeout(function () {
          TimeDown(id, endDateStr);
          }, 1000)
          }

          html

          <!DOCTYPE html>
          <html>
          <head runat="server">
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
          <title>時間倒計時</title>
          <script src="TimeDown.js"></script>
          </head>
          <body>
          <form id="form1" runat="server">
          <div id="show">
          </div>
          <script type="text/javascript">
          TimeDown("show", "2024-03-9 8:00:45");
          </script>
          </form>
          </body>
          </html>

          顯示效果:

          還剩:2天19小時29分鐘5秒


          關于setTimeout與setInterval的區別:

          setTimeout只會執行一次, 在執行完成后, 重新啟動新的Timeout, 時間runtime計算設置為差時, 減少出現間隔越來越大的情況; 而setInterval()會導致間隔越來越大的情況, 而出現執行時間不準確的問題:

          1 Javascript會把執行的回調函數、瀏覽器的觸發事件、UI渲染事件,先放到隊列中, 隊列根據先進先出的規則, 依次執行他們, 當執行到隊列中的setInterval時很難保證其與setTimeout同步關系還保持。

          2 setInterval無視代碼錯誤:代碼報錯, 但是setInterval依舊會按時執行, 不會中斷。

          3 setInterval無視網絡延遲:如果調用ajax或其他服務, 他不會管是否返回回調, 會繼續按時執行。

          4 setInterval不保證執行:因為setInterval會定時執行, 如果函數邏輯很長, 間隔時間內執行不完, 后續方法會被拋棄。

          5 setInterval會受瀏覽器狀態影響、最小化、最大化、tab切換等外界因素的影響。

          • 然間想做一個倒計時的例子。
          • 用到的方法是setInterval()。
          • 更多文章請關注我的頭條號,落筆承冰

          一、先了解一下setInterval,AAAAA是執行函數,BBBBB是執行周期。

          二、創建一個盒子,在腳本中取得元素對象。

          三、開始用setinterval方法了。

          • F12打開控制臺,你可以看到,每秒一個log的刷新。

          四、創建一個變量t,用來倒計時用。

          • 確實可以倒計時了,但它會倒數到負數,無窮盡倒數。

          五、加個判斷,讓它只倒數十秒。


          主站蜘蛛池模板: 日本精品高清一区二区| 精品乱码一区二区三区在线| 国产主播在线一区| 一区二区国产精品| 无码人妻久久一区二区三区免费| 国产精品视频分类一区| 欧洲精品一区二区三区在线观看 | 精品少妇一区二区三区视频| 曰韩人妻无码一区二区三区综合部 | 插我一区二区在线观看| 无码少妇一区二区浪潮免费| 在线精品亚洲一区二区三区| 免费精品一区二区三区在线观看 | 国产高清一区二区三区| 久久精品国产第一区二区| 韩国资源视频一区二区三区| 免费精品一区二区三区第35| 精品在线一区二区| 无码人妻精品一区二区三区蜜桃| 日韩精品无码一区二区三区AV | 国产一区内射最近更新| 亚洲高清毛片一区二区| 人妻互换精品一区二区| 国产乱码精品一区二区三区中| 精品一区二区在线观看| 看电影来5566一区.二区| 中文字幕在线视频一区| 亲子乱av一区二区三区| 中文字幕永久一区二区三区在线观看| 日本国产一区二区三区在线观看 | 久久久不卡国产精品一区二区| 国产伦精品一区二区| 一区五十路在线中出| 亚洲AV永久无码精品一区二区国产| 国产精品伦子一区二区三区| 无码人妻一区二区三区免费视频 | 精品一区精品二区制服| 日韩精品一区二区三区中文精品| 3D动漫精品啪啪一区二区下载| 中文字幕乱码人妻一区二区三区| 欧美激情一区二区三区成人|