집 > 기사 > 웹 프론트엔드 > js+html5는 페이지 새로 고침이 가능한 카운트다운 효과를 실현합니다.

js+html5는 페이지 새로 고침이 가능한 카운트다운 효과를 실현합니다.

不言원래의: 2018-06-05 14:38:201756검색

이 글은 주로 js+html5를 이용한 페이지 새로고침 카운트다운 효과를 자세하게 소개하고 있습니다. 관심 있는 친구들은 참고하시면 됩니다.

때때로 코드를 새로고침해야 할 때도 있습니다. 그런 다음 4시 59분에 카운트다운이 다시 시작됩니다. 제가 생각한 한 가지 해결책은 캐시를 사용하고 시작 카운트다운 시간에 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는 페이지 새로 고침이 가능한 카운트다운 효과를 실현합니다.

관련 기사