Home > Article > Web Front-end > js+html5 realizes page refreshable countdown effect

js+html5 realizes page refreshable countdown effect

不言Original: 2018-06-05 14:38:201702browse

This article mainly introduces the countdown effect of js html5 to achieve page refresh in detail. It has certain reference value. Interested friends can refer to it.

Written a 5-minute countdown Code, sometimes the code needs to be refreshed, and then the countdown starts from 4:59 again. One solution I thought of is to use cache, set the start countdown time plus the 5 minutes to countdown as cache, and then use this directly The cache time minus the current time will keep counting down. No matter what you do during the countdown process, the time will always change, haha, that's the principle.

<!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>

Related recommendations:

JavaScript implementation of getting remote html to the current page

The above is the detailed content of js+html5 realizes page refreshable countdown effect. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：JavaScript implements getting remote html to the current pageNext article：JavaScript implements getting remote html to the current page

See more

js+html5 realizes page refreshable countdown effect

Related articles