javascript - 多用途和可重用的 JavaScript 倒数计时器

Question

我正在尝试创建一个倒数计时器，该计时器可用于页面上的无限次使用，并且我可以通过将一个类添加到名为“计时器”的跨度来重用它。

我有以下倒数计时器，但我必须为我需要的每个计时器复制计时器代码(这不是很好的编程)，并且无法根据需要重复使用多次。

<script>

    $(document).ready(function() {

        timer();

        function timer() {
            var endTime = "<?php echo $planet->constructionarray[$i]['end_time']; ?>";
            var timeInSeconds = Math.floor(Date.now() / 1000);
            var timeRemaining = endTime - timeInSeconds; 

            var hours   = Math.floor(timeRemaining / 3600);
            var minutes = Math.floor((timeRemaining - (hours * 3600)) / 60);
            var seconds = timeRemaining - (hours * 3600) - (minutes * 60);

            if(seconds < 10) { seconds = "0" + seconds; } else { seconds = seconds; }
            if(minutes < 10) { minutes = "0" + minutes; } else { minutes = minutes; }
            if(hours < 10) { hours = "0" + hours; } else { hours = hours; }

            $("#timer<?php echo $i; ?>").text(hours + ":" + minutes + ":" + seconds);

            if(endTime <= timeInSeconds) { clearInterval(interval); location.reload(); }

         };

    interval = setInterval(timer, 1000);

      })(jQuery);

</script>

我已尝试使用以下代码创建一个新计时器，这有效，但仅适用于页面上的第一个跨度。

<span id="countdown_timer_sm" endtime="1567425139">TIMERTEST</span><br/>
<span id="countdown_timer_sm" endtime="1567425139">TIMERTEST</span><br/>
<span id="countdown_timer_sm" endtime="1567425139">TIMERTEST</span><br/>
<span id="countdown_timer_sm" endtime="1567925139">TIMERTEST</span>

$(document).ready(function() {
    timer();

    function timer() {

            var endTime = document.getElementById('countdown_timer_sm').getAttribute("endtime");        
            var timeInSeconds = Math.floor(Date.now() / 1000);
            var timeRemaining = endTime - timeInSeconds; 

            var hours   = Math.floor(timeRemaining / 3600);
            var minutes = Math.floor((timeRemaining - (hours * 3600)) / 60);
            var seconds = timeRemaining - (hours * 3600) - (minutes * 60);

            if(seconds < 10) { seconds = "0" + seconds; } else { seconds = seconds; }
            if(minutes < 10) { minutes = "0" + minutes; } else { minutes = minutes; }
            if(hours < 10) { hours = "0" + hours; } else { hours = hours; }

            document.getElementById('countdown_timer_sm').innerHTML = (hours + ":" + minutes + ":" + seconds);

            if(endTime <= timeInSeconds) { clearInterval(interval); location.reload(); }

    };

        interval = setInterval(timer, 1000);            

})(jQuery);

谁能给我一些指导吗？

Answer 1

希望对你有所帮助。我使用 Jquery 和类而不是 ID。请注意，您不能使用相同的 ID，它只呈现 1 个 ID。

<span class="countdown_timer_sm" endtime="4567425139">TIMERTEST</span><br/>
<span class="countdown_timer_sm" endtime="1567425139">TIMERTEST</span><br/>
<span class="countdown_timer_sm" endtime="3567425139">TIMERTEST</span><br/>
<span class="countdown_timer_sm" endtime="2567425139">TIMERTEST</span>

<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>

$(function(){

$('.countdown_timer_sm').each(function(){
    $endTime = $(this).attr('endtime');
    $span = $(this);
    interval($endTime,$span);
  });

  function interval($endTime,$span){
    setInterval(
      function(){
        timer($endTime, $span);
      }, 1000);
  }

    function timer($endTime, $thisSpan){
      var timeInSeconds = Math.floor(Date.now() / 1000);
      var timeRemaining = $endTime - timeInSeconds; 
      var hours   = Math.floor(timeRemaining / 3600);
      var minutes = Math.floor((timeRemaining - (hours * 3600)) / 60);
      var seconds = timeRemaining - (hours * 3600) - (minutes * 60);
      if(seconds < 10) { seconds = "0" + seconds; } else { seconds = seconds; }
      if(minutes < 10) { minutes = "0" + minutes; } else { minutes = minutes; }
      if(hours < 10) { hours = "0" + hours; } else { hours = hours; }
      //console.log($thisSpan);
      $thisSpan.html(hours + ":" + minutes + ":" + seconds);

        if($endTime <= timeInSeconds) { 
          clearInterval(); location.reload(); 
        }
      };

})