JSFiddle - React, Tailwind, and code Playground
HTML
<p class="timer">60</p>
<p class="timer">100</p>
<p class="timer">150</p>
<p class="timer">200</p>
<p class="timer">300</p>
<button id="button1">скликать 1 секунду</button>
<button id="button2">скликать 10 секунд</button>
CSS
.timer {
border: 1px solid red;
}
.endtimer {
border: 1px solid green;
}
JavaScript
/**
* Наш класс кликера
*/
function Clicker(){
this.buttons = {};
this.elements = [];
this.isStarted = false;
}
/**
* метод позволяет установить кнопку, скликивающую время
* @param {string} id идентификатор кнопки
* @param {number} time время в секундах, которое будет скликиватся при нажатии на кнопку
*/
Clicker.prototype.setButton = function(id, time){
// если для кнопки уже установлен обработчик - удаляем его и его слушатель события click
if(this.buttons[id]){
this.buttons[id].element.removeEventListener("click", this.buttons[id].onclick);
delete this.buttons[id];
}
// запоминаем кнопку и ее обработчик события click
this.buttons[id] = {
element: document.getElementById(id),
onclick: ()=>{
this.timerDecrement(time);
}
};
// устанавливаем для кнопки слушатель события click
this.buttons[id].element.addEventListener("click", this.buttons[id].onclick);
}
/**
* метод позволяет добавить для обработки новые элементы
* @param {string} listenedclass имя класса, все элементы имеющие данный класс будут добавлены
* @param {Function} callback функция обратного вызова, вызывается для каждого отслеживаемого
* элемента всякий раз, когда происходит уменьшение его счетчика времени
* принимает параметры:
* - объект элемента
* - оставшееся время для элемента (в секундах)
*/
Clicker.prototype.setListenedElements = function(listenedclass, callback){
Array.from(document.getElementsByClassName(listenedclass)).forEach(element=>{
this.elements.push({
element: element,
timer: Number.parseInt(element.innerText),
callback: callback
});
});
}
/**
* метод уменьшает время всех отслеживаемых элементов на time секунд
* @param {number} time количество секунд, на которое будет уменьшено время таймеров
*/
Clicker.prototype.timerDecrement = function(time){
// выходим если таймеры еще не запущены
if(...