多用途和可重用JavaScript倒计时器

我正在尝试创建一个倒计时计时器，它可以在一个页面上进行大量的使用，并且我可以通过向一个名为“timer”的范围添加一个类来重用它

我有下面的倒计时计时器，它非常有用，但是我必须为我需要的每个计时器复制计时器的代码（这不是很好的编程），并且不可能重复使用我需要的次数

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

$（文档）.ready（函数（）{
定时器（）；
函数计时器（）{
var endTime=“”；
var timeinsectonds=Math.floor（Date.now（）/1000）；
var TIMESTAIN=结束时间-时间间隔；
var小时=数学下限（剩余时间/3600）；
var分钟=数学楼层（（剩余时间-（小时*3600））/60）；
var秒=剩余时间-（小时*3600）-（分钟*60）；
如果（秒<10）{seconds=“0”+秒；}否则{seconds=seconds；}
如果（分钟<10）{minutes=“0”+minutes；}否则{minutes=minutes；}
如果（小时数<10）{hours=“0”+hours；}否则{hours=hours；}
$（“#计时器”）.text（小时+”：“+分钟+”：“+秒）；
如果（endTime我希望它有帮助。
我使用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(); 
        }
      };

})

TIMERTEST

TIMERTEST

TIMERTEST

计时试验
$（函数（）{
$（'.countdown\u timer\u sm'）。每个（函数（）{
$endTime=$（this.attr（'endTime'）；
$span=$（此项）；
间隔（$endTime，$span）；
});
函数间隔（$endTime，$span）{
设定间隔(
函数（）{
计时器（$endTime，$span）；
}, 1000);
}
函数计时器（$endTime，$thisSpan）{
var timeinsectonds=Math.floor（Date.now（）/1000）；
var timeRemaining=$endTime-timeinsonds；
var小时=数学下限（剩余时间/3600）；
var分钟=数学楼层（（剩余时间-（小时*3600））/60）；
var秒=剩余时间-（小时*3600）-（分钟*60）；
如果（秒<10）{seconds=“0”+秒；}否则{seconds=seconds；}
如果（分钟<10）{minutes=“0”+minutes；}否则{minutes=minutes；}
如果（小时数<10）{hours=“0”+hours；}否则{hours=hours；}
//log（$thisSpan）；
$thisSpan.html（小时+“：“+分钟+”：“+秒）；
如果（$endTime）每个span标记都有相同的id属性。id属性对于DOM中的每个元素都必须是唯一的。这正是我所需要的，非常感谢您的帮助！
<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(); 
        }
      };

})