js+html5 réalise un effet de compte à rebours actualisable sur la page-tutoriel HTML-php.cn

js+html5 réalise un effet de compte à rebours actualisable sur la page

不言

Libérer： 2018-06-05 14:38:20

original

1702 Les gens l'ont consulté

Cet article présente principalement l'effet de compte à rebours de js+html5 pour actualiser la page en détail. Il a une certaine valeur de référence.

Écrit un compte à rebours de 5 minutes Parfois, le code est nécessaire. pour être actualisé, puis le compte à rebours commence à partir de 4h59. Une solution à laquelle j'ai pensé est d'utiliser le cache, de définir le temps de démarrage du compte à rebours plus les 5 minutes du compte à rebours comme cache, puis d'utiliser directement ce temps de cache moins l'heure actuelle. continuez à compter à rebours. Peu importe ce que vous faites pendant le processus de compte à rebours, l'heure changera toujours, haha, c'est le principe.

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

Copier après la connexion

Recommandations associées :

Implémentation de JavaScript pour obtenir du HTML distant dans la page actuelle

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!