ストップウォッチクラス

by mahny

HTML

<div id="stopwatch">00:00:00.000</div>
<button onclick="clickStartAndStopHandler(event)">START/STOP</button>
<button onclick="clickResetHandler(event)">RESET</button>

JavaScript

/**
 * ストップウォッチクラス
 * @auther mahny
 * @copyright mahny
 * @license MIT License
 */
class StopWatch {
  /**
   * 指定したIDを持つタグに対してストップウォッチ処理を行う
   *
   * @params {string} displayId
   *   時間表示を行うタグのID
   * @params {number} interval
   *   タイマー表示の更新間隔(ms)
   * @throws 指定したIDを持つタグが見つからない時
   * @throws 指定した更新間隔が正の数値以外の時
   */
  constructor(displayId, interval = 100) {
    this._displayElement = document.getElementById(displayId);
    if (!this._displayElement) {
    	throw "指定したIDを持つタグが見つからない。 / displayId=[" + displayId + "]";
    }
    if ((typeof(interval) !== 'number') || interval < 1) {
    	throw "指定した更新間隔は正の数値ではない。 / interval=[" + interval + "]";
    }
    this._interval = Math.floor(interval);
    this._startTime = 0;
    this._totalTime = 0;
  }

  /**
   * ストップウォッチの状態を取得する
   *
   * @returns {string} ストップウォッチの状態
   */
  getStatus() {
    if (0 < this._startTime) {
      return 'start';
    } else if (0 < this._totalTime) {
      return 'stop';
    } else {
      return 'init';
    }
  }

  /**
   * 時間表示タグの表示時間を現在値に更新する
   */
	_refresh() {
  	if (!this._displayElement) {
      return;
    }
    let result = '00:00:00.000';
    let restTotalTime = 0;

    switch (this.getStatus()) {
      case 'start':
        restTotalTime = this._totalTime + (new Date().getTime() - this._startTime);
        break;
      case 'stop':
        restTotalTime = this._totalTime;
        break;
      default:
        // nop
    }
    
    let hour = Math.floor(restTotalTime / 3600000);
    let min = Math.floor(restTotalTime / 60000) % 3600;
    let sec = Math.floor(restTotalTime / 1000) % 60;
    let msec = restTotalTime % 1000;
    result = ('0' + hour).slice(-2) +
      ':' + ('0' + min).slice(-2) +
      ':' + ('0' + sec).slice(-2) +
      '.' + ('00' + msec).slice(-3);
    this._displayElement.innerHTML = result;
  }

  /**
   * 計測を開始または再開する
   */
  _start() {
    // 画面更新用関数（ループ）
    let self = this;
    let masureTimeFunc = function() {
      if (self.getStatus() === 'start')...