как реализовать несколько отсчетов на одном элементе DOM - PullRequest
Новая
       13

как реализовать несколько отсчетов на одном элементе DOM

0 голосов
/ 10 октября 2019

У меня есть элемент DOM, который содержит значения (миллисекунды) из моей базы данных, и я хочу реализовать обратный отсчет для значений. Например, у меня может быть 4 сделки с продуктом в разделе, с разной продолжительностью в миллисекундах, и я хочу динамически создавать различные обратные отсчеты (ЧЧ: мм: сс) для каждой сделки в соответствии с ее продолжительностью. В настоящее время значения длительности (в миллисекундах) хранятся в скрытом поле ввода для каждой сделки в разделе. 

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

Большое спасибо:)

Ответы [ 2 ]

1 голос
/ 10 октября 2019 

$(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>
0 голосов
/ 10 октября 2019

Добавить еще один ответ на этот вопрос ...

Нет зависимостей (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>
...