2

Есть код в котором с нуля создается простой секундомер через классы, я немного не понимаю как в классах назначать события, чтобы при создании секундомера события назначались на кнопки управления секундомером, так в будущем можно будет создавать несколько независимых секундомеров, пытался разными способами но не получалось, похоже что-то делаю не так. Классы только учу, код кривоват)

jsfiddle: https://jsfiddle.net/8jv9ce26/

class Timer {
  constructor(callBack) {
    this.callBack = callBack;
    this.timerId = null;
    this.value = 0;
  }

  start() {
    this.timerId = setInterval(() => {
      this.print();
      this.value++;
    }, 10);
  }

  stop() {
    clearInterval(this.timerId);
  }

  reset() {
    this.stop();
    this.value = 0;
    this.print();
  }

  print() {
    this.callBack(this.value);
  }
}

class timerUI extends Timer {
  constructor(tag, classes, content) {
    super(() => this.render());
    this.timerElement = document.createElement(tag);
    this.timerElement.className = classes;
    this.timerElement.append(content);
  }
  show() {
    document.querySelector('.container').append(this.timerElement);
  }
  render() {
    let centiseconds = ("0" + (Math.floor(this.value / 1) % 100)).slice(-2);
    let seconds = ("0" + (Math.floor(this.value / 100) % 60)).slice(-2);
    let minutes = ("0" + (Math.floor(this.value / 6000) % 60)).slice(-2);
    let hours = ("0" + Math.floor(this.value / 36000)).slice(-2);
    this.timerElement.innerText = `${hours}:${minutes}:${seconds}:${centiseconds}`;
  }
}

const start = new timerUI('button', 'start', 'Start');
const stop = new timerUI('button', 'stop', 'Stop');
const reset = new timerUI('button', 'reset', 'Reset');
const remove = new timerUI('button', 'remove', 'X');
const timeOutput = new timerUI('div', 'time', '00:00:00');


timeOutput.show();
start.show();
stop.show();
reset.show();
remove.show();

timeOutput.start();

//setTimeout(() => timeOutput.stop(), 3000);
//setTimeout(() => timeOutput.start(), 6000);
setTimeout(() => timeOutput.reset(), 10000);
<button id="createTimer">Create timer</button>
<div class="container"></div>

1
  • this.value / 1?
    – Grundy
    31 авг 2020 в 2:01

1 ответ 1

0

Не стоит создавать timerUI много раз, это же 1 таймер.

А вот this.resetElement = можно.

this.resetElement.addEventListener("click", ev => this.reset())


this.value++ считает попугаев.

setInterval, запускает что-то примерно с определенным интервалом.

Есть requestAnimationFrame, который адаптируется (как fps) под устройство. Если цель -- именно показать бегущее время -- можно запомнить время старта и использовать его для показа разницы.


Если хочется изучать ООП -- лучше брать язык со строгой статической типизацией.

Если хочется делать компоненты UI вроде этого, можно взять React с hook-ами, и будет замечательно и без ООП.

1
  • Спасибо большое
    – Romanches
    3 сен 2020 в 21:23

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.