Показать сообщение отдельно
  #4 (permalink)  
Старый 11.04.2018, 13:49
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,723

goofy1337, setInterval лучше заменить на setTimeout.
<div>Минуты: <span id="minutes">10</span></div>
<div>Секунды: <span id="seconds">00</span></div>
<button id="start">Start</button>
<script>
	class Timer {
			constructor(seconds) {
					this.__startValue = 0;
					this.__currentValue;
					this.__state = false;
					this.__listeners = {
							count: []
					};


					this.__startValue = this.__currentValue = seconds;
			}

			__countdown() {
					if (!this.__state || !this.__currentValue)
							return this;

					this.__currentValue--;
					this.__trigger('count');

					setTimeout(this.__countdown.bind(this), 1000);

					return this;
			}

			start() {
					this.__state = true;
					this.__countdown();

					return this;
			}

			stop() {
					this.__state = false;

					return this;
			}

			reset() {
					this.__currentValue = this.__startValue;

					return this;
			}

			getSeconds() {
					return this.__currentValue;
			}

			onCount(callback) {
					this.__listeners.count.push(callback);

					return this;
			}

			__trigger(event) {
					if (!this.__listeners[event])
							return;

					var timer = this,
							list = this.__listeners[event];

					list.filter(function(callback, i) {
							try {
									callback(timer);

									return true;
							} catch (e) {
									return false;
							}
					});

					this.__listeners[event] = list;

					return this;
			}
	}


	var timer;
	start.onclick = () => {
			if (!!timer)
					return;

			timer = (new Timer(
				+minutes.textContent.trim()*60 + +seconds.textContent.trim()
			)).start().onCount($timer => {
					let sec = $timer.getSeconds(),
							min = Math.floor(sec / 60);

					sec = sec - min * 60;

					minutes.textContent = min;
					seconds.textContent = sec;
			});
	};
</script>
Ответить с цитированием