JavaScriptでタイマーを作成しました。カウントがされタイマーが00:00になったとき、というのはどのように記述するのでしょうか。

Question

タイマーをJavaScriptで作成しました。
リセット時や初期値を除いて、タイマーのカウントが０になったとき、という条件定義はどのようにすれば
いいのでしょうか。

下記がコードになります。

よろしくお願いします。

window.onload = function(){
    
  var sound = document.getElementById("sound");

  var timer = document.getElementById('timer')
  var set = document.getElementById('set')
  var reset = document.getElementById('reset')
  var start = document.getElementById('start')

  // クリック時の時間を取得する
  var startTime;

  var timeLeft;
  var timeToCountDown = 0;
  var timerId;
  var isRunning = false;

  // 残り時間を表示させる
  function updateTimer(t) {
    var d = new Date(t);
    var m = d.getMinutes();
    var s = d.getSeconds();
    m = ('0' + m).slice(-2);
    s = ('0' + s).slice(-2);
    timer.textContent = m + ':' + s;
  }

  function countDown() {
    timerId = setTimeout(function() {
      timeLeft = timeToCountDown - (Date.now() - startTime);
      if (timeLeft < 0) {
        isRunning = false;
        start.textContent = 'Start';
        clearTimeout(timerId);
        timeLeft = 0;
        timeToCountDown = 0;
        updateTimer(timeLeft);
        return;
      }
      updateTimer(timeLeft);
      countDown();
    }, 100);
  }

  start.addEventListener('click', function() {
    // タイマーが0のときはストップと表示するようにする
    if (isRunning === false) {
      isRunning = true;
      start.textContent = 'Stop'
      startTime = Date.now();
      countDown();
    } else {
      // タイマーがstopのときはstartと表示する
      isRunning = false;
      start.textContent = 'Start';
      timeToCountDown = timeLeft;
      clearTimeout(timerId);
    }
  });

  // Setを押した時の処理
  set.addEventListener('click', function() {
    // タイマーが動いているときは操作できないようにする
    if (isRunning === true){
      return;
    }
    // timeToCountDownを25分にセットする処理を書いていく
    timeToCountDown += 1500 * 1000;
    // 25分を超えても
    if (timeToCountDown >= 60 * 26 * 1000) {
    // 25分になるように設定
      timeToCountDown = 1500 * 1000;
    }
    // timeToCountDownをタイマーに反映
    updateTimer(timeToCountDown);
  });

    reset.addEventListener('click', function() {
      // timeToCountDownを0にする処理を書いていく
      timeToCountDown = 0;
      // timeToCountDownをタイマーに反映
      updateTimer(timeToCountDown);
    });
}();

Comments

[hentaiman]

キッチンタイマーみたいなタイマー？

[kikikinoki]

左様でございます。Setを押すと25分にセットされ、Startを押すと00:00に向かってカウントダウンを開始します。

[yutampp]

このコード動きます？　聞きたいことは条件定義だけで大丈夫ですか？
① 'use scrict';　→　"use strict"（厳格モード）のスペルミスですね。
②var time = new Date;　→　なんでかエラーにならずに動きますが、普通new Date();とします。
③hour.innerHTML = select_option;　→　hourとselect_optionが未定義です。
④select_option = "";　→　宣言されていない変数への代入は非厳格モードだと動きますが、厳格モードだとエラーになります。
⑤minute.innerHTML = select_option; →　minuteが未定義です。
⑥function updateTimer(t) 　→　厳格モードだとエラーになります。

Answer 1

1. 10秒にセットしてスタート押したら、押した時点＋10秒のDateを作る（timerDateとする）
2. 現在時刻がtimerDateを超えるまで判定し続ける（setTimeoutかsetIntervalで）
3. 超えたらtimer処理を止める

Answer 2

タイマーなので
現在日時から指定のタイマー時間後をゴールに設定し、「その日時を過ぎたら(>=その日時)」で良いと思います

Comments

[hentaiman]

イコールだと止まらない可能性が

[m.ts10806]

あ、確かに。

Answer 3

ツッコミどころの多いコードについてはそっとしておくこととして、カスタムイベントを作ることでclickイベントやloadイベントと同じように、「00:00になったとき」をイベントとして定義することが可能です。
カスタムイベントの作り方は簡単で以下のようなコードで作成できます。

// イベントの定義
var event=new Event("CustomEventHogehoge");
// イベントターゲットを作成
var eventTarget = new EventTarget();

CustomEventHogehogeがイベントの名前になります。これは任意の文字列で構いません。
イベントターゲットはElement および document、window などでもOKです。
要はどの実体に、イベントを発生させるかという話です。
イベントターゲットについて詳しくは以下を参照してください。
https://developer.mozilla.org/ja/docs/Web/API/EventTarget

あとは、loadイベントや、clickイベントと同じようにリスナーを登録すればOKです。

// イベントターゲットにイベントリスナーを登録
eventTarget.addEventListener("CustomEventHogehoge",()=>{/*発火したときの処理*/});

これだけだと、いつまでたってもイベントが発火しません。
発火させるには任意のタイミングで以下のコードを実行する必要があります。

eventTarget.dispatchEvent(event);
// →　イベントリスナーに登録した関数が実行される。

eventは先ほど「//イベントの定義」で、作成した変数です。

以上を活用して、キッチンタイマーをモダンっぽい書き方をしてみましょう。
まずキッチンタイマーのクラスを作成します。

class Piyo extends EventTarget
{
	constructor(func)
	{
		super();
		this.event=new Event("TimeOut");
		this.addEventListener("TimeOut",func);
		// デフォルト5秒
		this.time=5*1000;
		this.timeoutId=0;
	}

	start()
	{
		this.timeoutId = setTimeout
		(
			()=>{this.dispatchEvent(this.event)}
			,this.time
		)
	}
	stop()
	{
		clearTimeout(this.timeoutId);
	}	
}

このクラスを使って、例として、5秒後アラートが表示されるインスタンスを生成してみました。

var piyopiyo = new Piyo(function(){alert("TIMEUP!!!")});
piyopiyo.start();

これで５秒後に"TIMEUP!!!"がアラートで出てきます。
現状のPiyoクラスはカウントダウン機能が実装されていないので、どうすれば実装できるか考えてみてください。

Comments

[kikikinoki]

ありがとうございます！参考に頑張ってみます！