Пользователь вводит время и выходит сообщение о времени суток

Question

Нужно разместить два блока для ввода часов и минут и так же чтобы отдельно выходило сообщение о времени суток который ввел пользователь. Числа от нуля до 23 - для часов и от нуля до 59 - для минут. Если введено больше 23 для часов и больше 59 для минут выходит сообщение об ошибке. При помощи if и else нужно сделать.

Время суток такое распределение:

23:31-5:30  ночь
5:31-11:30 утро
11:31-17:30 день
17:31-23:30 вечер.

вот мой код. у меня не получается указать для минут. Например 23:30 еще вечер а 23:31 уже ночь

let p = document.createElement('p')
let p2 = document.createElement('p')
let inp1 = document.querySelector('#hour')
let inp2 = document.querySelector('#minute')
let btn = document.querySelector('button')

function time() {
  if ((inp1.value >= 0 && inp1.value <= 23) && (inp2.value >= 0 && inp2.value <= 59)) {
    p.textContent = "Данные корректны"
  } else {
    p.textContent = "Данные не корректны"
  }
}


/*function time2() {
  if ((inp1.value >= 23 || inp1.value <= 5) && ((inp1.value == 23 && inp2.value >= 31) || (inp1.value == 5 && inp2.value <= 30))) {
    p2.textContent = "Ночь"
  } else {
    if ((inp1.value >= 5 || inp1.value <= 11) && ((inp1.value == 5 && inp2.value >= 31) || (inp1.value == 11 && inp2.value <= 30))) {
      p2.textContent = "Утро"
    } else {
      if ((inp1.value >= 11 || inp1.value <= 17) && ((inp1.value == 11 && inp2.value >= 31) || (inp1.value == 17 && inp2.value <= 30))) {
        p2.textContent = "День"
      } else {
        if ((inp1.value >= 17 || inp1.value <= 23) && ((inp1.value == 17 && inp2.value >= 31) || (inp1.value == 23 && inp2.value <= 30))) {
          p2.textContent = "Вечер"
        }
      }
    }
  }
}

function getValue(el1, el2) {
  console.log(el1.value, el2.value);
}
btn.onclick = function (event) {
  getValue(inp1, inp2)
  time2();
  time();
  document.body.append(p2)
  document.body.append(p)

}

я код дописал но p2 сообщение в котором выходит время суток показывает после перехода. ночь покажет после того как пользователь введет 23:31. Т.е пройдя только все границы Ночь-Утро-День-Вечер он будет правильно присваивать время суток. если ввести 02:30 он не понимает что это ночь. я меняю условия но это проблема не исчезает хотя в условиях я же все указал((.

Answer 1

Для удобства преобразуйте часы и минуты в единое значение, отражающее количество часов:

Часы + Минуты / 60

Это значительно упрощает задачу:

p2.textContent = time();

function time()
{
    let tv = inp1.value + inp2.value / 60;  
        
    if (tv > 5.5)
    {
      if(tv > 11.5)
      {
          if(tv > 17.5)
          {
              if(tv > 23.5) return 'Ночь';
              return 'Вечер';
          }
          return 'День';
      }
      return 'Утро';
    }
    return 'Ночь';
}

Соглашусь с комментарием от @OliverPatterson, вариант ниже более корректный и компактный:

function time()
{
    let tv = inp1.value + inp2.value / 60;  
        
    if (tv > 5.5 && tv <= 11.5) return 'Утро';
    else if(tv > 11.5 && tv <= 17.5) return 'День';
    else if(tv > 17.5 && tv <= 23.5) return 'Вечер';
    else return 'Ночь';
}

Answer 2

Как вариант

let time = setTimeout(function Update(){
  let date = new Date(),
      format = [date.getHours(), date.getMinutes(), 0, 'Доброй ночи'];
      
  format[2] = format[0]*3600+format[1]*60;
  
  if(format[2] >= 19800 && format[2] < 41400) format[3] = 'Доброе утро';
  if(format[2] >= 41400 && format[2] < 63000) format[3] = 'Добрый день';
  if(format[2] >= 63000 && format[2] < 84600) format[3] = 'Добрый вечер';
  
  document.body.innerHTML = `${(format[0] < 10 ? '0'+format[0] : format[0])}:${(format[1] < 10 ? '0'+format[1] : format[1])}<br>${format[3]}`;
  
  time = setTimeout(Update, 1000);
}, 1000);

БЛОГ НА HUSL

Пользователь вводит время и выходит сообщение о времени суток

Ответы (2 шт):