Как на страницу поместить несколько таймеров?

Question

[Артур]

В обмщем есть у меня скриптец, оный парсит значение с поля и делает отсчет. Однако, при использовании его в таблице значения иных полей принимают его цифру (понятно почему - поле парсинга имеет одинаковый id & class). Вот голову ломаю как сделать его рабочим для множества полей (не заданного изначально будь то 10 или 2).

Собственно код таймера:

Таймер

$(document).ready(function(){
    var blockIpIt = 
    setInterval(function(){
        var day = $('#timer .TD').html(), hours = $('#timer .TH').html(), minutes = $('#timer .TI').html(), seconds = $('#timer .TS').html();
		
hours = hours < 1 ? '00' : hours;
minutes = minutes < 1 ? '00' : minutes;
seconds = seconds < 1 ? '00' : seconds;

        if(seconds == '00'){
            seconds = '59';
            if(minutes == '00'){
                minutes = '59';
                if(hours == '00'){
                    if(day == '00'){
                        location.reload();
                    }
                    else{
                        day = (parseInt(day)); day = day < 10 ? '0' + day : day;
                    }
                }
                else{
                    hours = (parseInt(hours) - 1); hours = hours < 10 ? '0'+ hours : hours;
                }
            }
            else{
                minutes = (parseInt(minutes) - 1); minutes = minutes < 10 ? '0'+ minutes : minutes;
            }
        }
        else{
            seconds = (parseInt(seconds) - 1); seconds = seconds < 10 ? '0'+ seconds : seconds;
			//minutes = 00;
			//hours = 00;
        }

        $('#timer .TD').html(day);
        $('#timer .TH').html(hours);
        $('#timer .TI').html(minutes);
        $('#timer .TS').html(seconds);
    }, 1000);
});

Скрин со страницы


И доп вопрос: как при его значении 00:00:00 (у какого-то из полей сделать ajax запрос или же просто reload страницы)

ajax запрос

// ajax отправка запроса
function update_time(){	
$.ajax({
  url: '/ajax/process.php?p=1',
  type: 'post',
  data: {'upd':1},
  success: function(result) {
	//alert(x); // для проверки отправляемого
    //$('.results').html(result);
	
	//setTimeout('location.replace("/account/dep")',2000); 
  }
});
}

В общем основное - это вопрос о таймерах (их множестве в таблице) например как привязать к id'шникам и парсить

Answer 1

[Stalker_RED]

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

Definition and Usage
The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).

The id attribute is most used to point to a style in a style sheet, and by JavaScript (via the HTML DOM) to manipulate the element with the specific id.

https://www.w3schools.com/tags/att_global_id.asp

Все элементы id="timer" меням на class="timer", и дальше как-то так:

$('.timer').each(function(){
  $timer = $(this)
  setInterval(function(){
    let day = $timer.find('.TD').text(),
        hours = $timer.find('.TH').text(),
        minutes = $timer.find('.TI').text(),
        seconds = $timer.find('.TS').text();
        // ...
  }, 1000)
})

UPD: лучше вообще ничего не парсить, целевое время хранить в переменной, текущее считать через new Date(), и только писать в целевой блок как-то так

Comments

[Артур]

я в курсе. я не знаю как спарсить тогды множество id. Т.е запустить функцию без метода onload, onclick. Да и с парсингом тогда не выходит у меня. Однако если по циклу раскидать id_N, то как в функции таймера это считать и верно отдать?

О понимании уникальности я же указал в топике (дабы избежать этих уведомлений);

[Stalker_RED]

Rich, никак не нужно "парсить тогды множество id". И вообще, вся идея с парсингом по setInterval как-то странно выглядит. Что вы пытаетесь сделать?

[Артур]

Stalker_RED, динамичный отсчет таймера

Answer 2

[Артур]

Спасибо, Stalker_RED

решил свое действо стырив с чужого сайта скрипт.
PS весьма похож по исполнению на твой вариант (однако не смог твой настроить)

Тебе + за составление кода и за то что это заставило меня прогуглить некоторые методы