SoFunction
Updated on 2025-03-10

js+html5 realizes the countdown effect of page refreshable

I wrote a 5-minute countdown code. Sometimes the code needs to be refreshed, and the countdown starts from 4:59. One solution I thought of is to use cache, set the time to start countdown plus the 5 minutes to countdown as cache, and then use this cache time to subtract the current time, and you can count down all the time. No matter what you operated during the countdown process, the time is always changing, haha, this is the principle.

<!doctype html>
<html>

  <head>
    <meta charset="utf-8">
    <title>Simple and easy to use countdownjsCode</title>

  </head>

  <body>
    <div ></div>
    <script src="js/"></script>
    <script>
      ('start', new Date().getTime());
      countDown(('start'));

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

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

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

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

  </body>

</html>

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.