Как сделать индивидуальный таймер для каждой записи?

Question

[andrew-corput]

До окончания:<br>
<div class="timer">
	<div id="timer" class="black">
		<b>
			<span class="days"></span> :
			<span class="hours"></span> :
			<span class="minutes"></span> :
			<span class="seconds"></span>
		</b>
	</div>
</div>

<script>
	function getTimeRemaining(endtime) {
		var t = Date.parse(endtime) - Date.parse(new Date());
		var seconds = Math.floor((t / 1000) % 60);
		var minutes = Math.floor((t / 1000 / 60) % 60);
		var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
		var days = Math.floor(t / (1000 * 60 * 60 * 24));
		return {
			'total': t,
			'days': days,
			'hours': hours,
			'minutes': minutes,
			'seconds': seconds
		};
	}
	function initializeClock(id, endtime) {
		var clock = document.getElementById(id);
		var daysSpan = clock.querySelector('.days');
		var hoursSpan = clock.querySelector('.hours');
		var minutesSpan = clock.querySelector('.minutes');
		var secondsSpan = clock.querySelector('.seconds');
		function updateClock() {
			var t = getTimeRemaining(endtime);
			daysSpan.innerHTML = t.days;
			hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
			minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
			secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
			if (t.total <= 0) {
				clearInterval(timeinterval);
				clock.innerHTML = "<p>Аукцион завершен</p>";
				if ({{$lot->status}} == 2) {
					document.getElementById("timer").classList.add("green");
					clock.innerHTML = "<p>Проведен, на подтверждении</p>";
				}
				if ({{$lot->status}} == 3) {
					document.getElementById("timer").classList.add("green");
					clock.innerHTML = "<p>Продан</p>";
				}
				// var audio = new Audio("{{ asset('audio/2.mp3') }}");
				// audio.play();
			}
		}
		updateClock();
		var timeinterval = setInterval(updateClock, 1000);
	}
	var deadline = "{{$lot->end_at}}";
	initializeClock('timer', deadline);
</script>

{{$lot->end_at}} - время окончания

Как реализовать отображение нескольких таймеров на одной странице?

Answer 1

[Andrew]

<div class="timer">
  <div id="timer" class="black">
    <b>
      <span class="days"></span> :
      <span class="hours"></span> :
      <span class="minutes"></span> :
      <span class="seconds"></span>
    </b>
  </div>
  <div id="timer2" class="black">
    <b>
      <span class="days"></span> :
      <span class="hours"></span> :
      <span class="minutes"></span> :
      <span class="seconds"></span>
    </b>
  </div>
</div>

//... в самый низ.
  var deadline = "{{$lot->end_at}}";
  var deadline2 = "{{$lot->end_at}}";

  initializeClock('timer', deadline); 
  initializeClock('timer2', deadline2);

deadline2 передайте другое значение, если конечная дата должна быть другая

Comments

[andrew-corput]

нужно сделать чтобы они имели автоматическую привязку, так как на странице может быть как 2, так и 20 записей имеющих свой таймер

[Andrew]

andrew-corput, по какому принципу таймеры должны связываться?
тут написан для id, если не хотите трогать код таймера, ищите все div#timer$
и раскидывайте им each'ом инициализацию.

<div id="timer1"></div>
<div id="timer2"></div>
<div id="timer3"></div>
<div id="timer4"></div>
<div id="timer5"></div>

var matches = document.querySelectorAll("div[id^='timer']");
matches.forEach(function(el){
    initializeClock(el, deadline); 

});