ホームページ > 記事 > ウェブフロントエンド > js+html5でページ更新可能なカウントダウン効果を実現

js+html5でページ更新可能なカウントダウン効果を実現

不言オリジナル: 2018-06-05 14:38:201703ブラウズ

この記事では主にjs+html5を使用したページ更新可能なカウントダウン効果を詳しく紹介します。興味のある方は参考にしてください。

コードを更新する必要がある場合があります。その後、カウントダウンが再び 4:59 に始まります。私が考えた解決策の 1 つは、キャッシュを使用し、カウントダウンの開始時間にカウントダウンする 5 分を加えた時間をキャッシュとして設定し、このキャッシュ時間を直接使用して現在の時間を減算することです。カウントダウン中は何をしても時間は常に変わります (笑)、それが原則です。

<!doctype html>
<html>

  <head>
    <meta charset="utf-8">
    <title>简单易用的倒计时js代码</title>

  </head>

  <body>
    <p id="time"></p>
    <script src="js/jquery-git.js"></script>
    <script>
      localStorage.setItem(&#39;start&#39;, new Date().getTime());
      countDown(localStorage.getItem(&#39;start&#39;));

      function countDown(startTime) {
        var time = setInterval(function() {
          var currentTime = new Date();
          var second = 59 - parseInt(((currentTime.getTime() - startTime) / 1000) % 60);
          var min = 4 - parseInt((currentTime.getTime() - startTime) / 60000);

          if(min < 10) {
            min = "0" + min;
          }
          if(second < 10) {
            second = "0" + second;
          }

          var countDown = min + ":" + second;
          $(&#39;#time&#39;).html(countDown);

          if(second == 0 && min == 0) {
            clearInterval(time);
          }
        }, 1000)
      }
    </script>

  </body>

</html>

js+html5でページ更新可能なカウントダウン効果を実現

関連記事