Таймер обратного отсчета для поста не зацикливается
Здравствуйте, у меня есть код, который показывает обратный отсчет будущего поста, как этот 7days 5hrs 3mins 4secs моя проблема в том, что когда я пытался добавить это в цикл while, он работает только с одним последним постом, а не с другим будущим постом. Как мне сделать так, чтобы это зацикливалось. Спасибо
JavaScript:
<script>
var end = new Date('<?php echo $date;?>');
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;
function showRemaining() {
var now = new Date();
var distance = end - now;
if (distance < 0) {
clearInterval(timer);
document.querySelector('.countdown').innerHTML = 'EXPIRED!';
return;
}
var days = Math.floor(distance / _day);
var hours = Math.floor((distance % _day) / _hour);
var minutes = Math.floor((distance % _hour) / _minute);
var seconds = Math.floor((distance % _minute) / _second);
document.querySelector('.countdown').innerHTML = days + 'days ';
document.querySelector('.countdown').innerHTML += hours + 'hrs ';
document.querySelector('.countdown').innerHTML += minutes + 'mins ';
document.querySelector('.countdown').innerHTML += seconds + 'secs';
}
timer = setInterval(showRemaining, 1000);
</script>
См. изображение для примера:
Обновление: мне удается показать таймер обратного отсчета в каждом сообщении, используя это:
document.querySelector(".countdown<?php echo ++$num1?>").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
теперь проблема в том, что он возвращает одно и то же значение обратного отсчета, как мне сделать его другим. Спасибо
@NicoHaase Я добавил изображение, которое показывает результат цикла while для публикации, так как вы можете видеть, что таймер показывает только одну строку, которая является последней публикацией. Я хочу показать таймер на каждом посте. Вы можете помочь мне?
также, что я должен сделать, чтобы он обрабатывал несколько экземпляров, я новичок в Javascript, я понятия не имею, что делать. пожалуйста помоги
используйте querSelectorAll для класса countdown, затем выполните цикл for для каждого узла, а внутри цикла используйте код обратного отсчета JS.
@VijayHardaha Я пытался использовать querySelectorAll, но это не работает. или я использовал это неправильно document.querySelectorAll('.countdown').innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s "; не могли бы вы помочь мне сделать ваше предложение?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Я не знаю, лучшее ли это решение, но оно работает для меня, я увеличил все классы и var в цикле, чтобы у него была функция для каждого увеличенного класса.
var end<?php echo ++$num3;?> = new Date('<?php echo $date;?>');
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;
function showRemaining() {
var now = new Date();
var distance = end<?php echo ++$num4;?> - now;
if (distance < 0) {
clearInterval(timer);
document.querySelector('.countdown<?php echo ++$num2;?>').innerHTML = 'COMPLETED!';
return;
}
var days = Math.floor(distance / _day);
var hours = Math.floor((distance % _day) / _hour);
var minutes = Math.floor((distance % _hour) / _minute);
var seconds = Math.floor((distance % _minute) / _second);
document.querySelector(".countdown<?php echo ++$num1;?>").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
}
timer = setInterval(showRemaining, 1000);
Где эта петля? Насколько я вижу, вы печатаете
<div class = "countdown"></div>только один раз. Кроме того, ваша функцияshowRemainingне может обрабатывать несколько экземпляров.