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

Question

[grenline123123]

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

var countDownDate = new Date("July 1, 2021 04:00:00").getTime();

    var x = setInterval(function() {

    var now = new Date().getTime();
        
    var distance = countDownDate - now;
        
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);
        
    document.getElementById("demo").innerHTML = days + "д " + hours + "ч "
    + minutes + "м " + seconds + "с ";
        
    if (distance < 0) {
        clearInterval(x);
    }
    }, 1000);

Comments

[WapSter]

Функция

[grenline123123]

WapSter, ?

[WapSter]

grenline123123, создай функцию или класс и предавай туда нужные тебе значения

[grenline123123]

WapSter, можно пример?

[WapSter]

grenline123123, боюсь он тебе не поможет, но держи https://codepen.io/wapster92/pen/RwVwPNN

Answer 1

[AleksMedovnik]

let countDownDate_1 = new Date("July 1, 2021 04:00:00").getTime();
		let countDownDate_2 = new Date("July 1, 2021 04:00:00").getTime();
		let countDownDate_3 = new Date("July 1, 2021 04:00:00").getTime();


		const timer = (date) => {
			let now = Date.now();

			let distance = date - now;

			let days = Math.floor(distance / (1000 * 60 * 60 * 24));
			let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
			let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
			let seconds = Math.floor((distance % (1000 * 60)) / 1000);

			document.getElementById("demo").innerHTML = days + "д " + hours + "ч "
				+ minutes + "м " + seconds + "с ";

			if (distance < 0) {
				clearInterval(x);
			}
		}

		let x = setInterval(function () {
			timer(countDownDate_1);
			timer(countDownDate_2);
			timer(countDownDate_3);
		}, 1000);

Также, можно, чтобы не запускать много раз timer, сделать это с помощью цикла. Т.е., пройти циклом по всем товарам и запустить timer.

Comments

[grenline123123]

90 таймеров на одной странице это норма?

[AleksMedovnik]

grenline123123, Он будет только один. Ведь, он запускается один раз!

[AleksMedovnik]

grenline123123, В смысле, самих таймеров много, но setInterval один. Так что, норм

[grenline123123]

AlexMedovnik, попробую отпишу

[grenline123123]

AlexMedovnik,
Можете помочь сделать правильно? Нужно так как я и хотел для каждого таймера установить дату которая есть в атрибуте data-time, то есть сделать переменные через цикл все (я о let countDownDate_1)

$('.project-manager p.time').each(function(e) {
        var countDownDate[e] = new Date("July 1, 2021 04:00:00").getTime();
        $(this).text('date set');
    });

[AleksMedovnik]

grenline123123, не совсем понял суть вопроса. Вам нужно объявить переменные в цикле или вызвать функцию timer в цикле?