如何在同一個 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>

Answer 2

要為這個問題添加另一個答案......

沒有依賴項（jQuery、Moment.js）並且僅持續 24 小時（不計算天、月、年）。

 function countDown(elClass) { let labels = document.querySelectorAll(elClass); let now = Date.now(); labels.forEach((label,key) => { let duration = document.getElementById(label.getAttribute('for')).value; if(duration <= 86400000) { let futureDate = now + parseInt(duration); let counterInterval = setInterval(() => { let diff = futureDate - Date.now(); if(diff <= 0) { clearInterval(counterInterval); return; } if(diff > 0) { let milliseconds = diff%1000; let seconds = parseInt(diff/1000)%60; let minutes = parseInt(diff/(60*1000))%60; let hours = parseInt(diff/(60*60*1000))%24; label.innerHTML = hours.toString().padStart(2, '0')+':'+minutes.toString().padStart(2, '0')+':'+seconds.toString().padStart(2, '0')+'<br>'; } },1000); } }); } countDown('.countdown');

 <input type="hidden" name="a" id="a" class='duration' value="5000"><label for="a" class="countdown"></label> <input type="hidden" name="b" id="b" class='duration' value="15000"><label for="b" class="countdown"></label> <input type="hidden" name="c" id="c" class='duration' value="190000"><label for="c" class="countdown"></label> <input type="hidden" name="d" id="d" class='duration' value="2003200"><label for="d" class="countdown"></label> <input type="hidden" name="e" id="e" class='duration' value="20067100"><label for="e" class="countdown"></label> <input type="hidden" name="f" id="f" class='duration' value="86023104"><label for="f" class="countdown"></label>