如何在同一个DOM元素上实现多次倒计时

Question

我有一个DOM元素，其中包含数据库中的值（毫秒），我想为这些值实现倒计时。例如，我可以在一个部分中进行4个产品交易，持续时间以毫秒为单位，并且我想根据交易的持续时间为每个交易动态创建不同的倒计时（HH：mm：ss）。当前，持续时间值（毫秒）存储在该部分中每个交易的隐藏输入字段中。

<input type="hidden" name="" id='duration' value="{{this.deals.duration}}">

我尝试过（仅适用于一项产品交易，效果很好）。我在持续时间内使用moment.js。以及此处的倒计时：

<script type="text/javascript">
  $(document).ready(function(){
    console.log($('#duration').val());
    var interval = 1000;
    var durations = $('#duration').val();
    setInterval(function(){
      durations = moment.duration(durations - interval, 'milliseconds');
       // console.log(durations);
      $('#countdown').text(durations.hours() + ":" + durations.minutes() + ":" + durations.seconds())
    }, interval);
  })


</script>

非常感谢：）

Answer 1

$(document).ready(function(){
  var interval = 1000;
  setInterval(function(){
    $('.duration').each(function () {
      var t = Number($(this).val()) - interval;
      if (t>=0) {
        var d = moment.duration(t, 'milliseconds');
        $(this).next('.countdown').text([
          String(d.hours()).padStart(2,'0'),
          String(d.minutes()).padStart(2,'0'),
          String(d.seconds()).padStart(2,'0')
        ].join(':'));
        $(this).val(t);
      }
    });
  }, interval);
})

input + span {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js"></script>

<input type="hidden" name="a" class='duration' value="5000"><span class="countdown"></span>

<input type="hidden" name="b" class='duration' value="15000"><span class="countdown"></span>

<input type="hidden" name="c" class='duration' value="20000"><span class="countdown"></span>