現在時刻に応じてテキスト表示を変化させるJS

Question

実現したいこと

現在時刻に応じてメッセージを変更する方法を教えていただきたいです。
例えば、
07:00～08:25は登校時間
08:25～15:55は授業時間
15:55～18:00は下校時間
18:00～07:00は放課後
といった感じで表示させたいです。

該当のソースコード

function timing() {
   var nt = new Date();
   var hr = nt.getHours();

   if( hr <= 1 ) { document.write('AAAA'); }
   else if( hr <= 2 ) { document.write('BBBB'); }
timing();

試したこと

上記のようにOO時に切り替える方法はわかったのですが、XX:XXからXX:XXまでといった詳細な指定の方法がわかりません。

Answer 1

論理積 (&&)

既存の回答の通り、&& を使用すれば、if 文内で複数の条件式(AND条件)の真偽判定が出来ます。

• 論理積 (&&) - JavaScript | MDN

一日の経過時間(ミリ秒)

ミリ秒単位で確認すると&& が不要になりますので、確認が楽になります。
個人的にはこちらを使います。

// 一日の時間(ミリ秒)を算出
console.log(24 * 60 * 60 * 1000); // 86400000

// 0:00からの7:00までの時間を算出
console.log(new Date(2021,3,12,7,0) % 86400000);  // 79200000

// 他時刻も同様に確認する

Re: Ito_Kazuki_さん

Answer 2

いろいろと方法はあると思います。

  const min = nt.getMinutes();
  if (hr == 7 || hr == 8 && min <= 25) {
    // 登校時間

のように時と分をそれぞれ判定しても良いですし、

  const hourMin = nt.getHours() * 100 + nt.getMinutes();
  if (hourMin >= 700 && hourMin <= 825) {
    // 登校時間
  else if (hourMin <= 1555) {
    // 授業時間

のように時分を扱いやすいように加工してもよいですね。