Как определить временные диапазоны в React?

#javascript #reactjs #time

Вопрос:

это мой код. Я пытаюсь определить диапазон часов, чтобы он менял цвет в зависимости от момента дня, но я не знаю, как создать диапазон (например, с 7 до 12 — > утро). Проблема сейчас в том, что если я поставлю 3 часа ночи, это будет означать утро, когда я хочу, чтобы это означало ночь, но, конечно, я не могу идти больше 23 часов, чтобы установить ночь. Не могли бы вы, пожалуйста, помочь мне?

 import React from "react";
import ReactDOM from "react-dom";

const date = new Date(2021, 1, 1, 3);

const time = date.getHours();

let customStyle = {
  color: ""
};

function getTime() {
  const morning = time < 12;
  const afternoon = time < 18;
  const night = time < 23;

  if (morning) {
    customStyle = {
      color: "red"
    };
    return "Good morning";
  } else if (afternoon) {
    customStyle = {
      color: "green"
    };
    return "Good afternoon";
  } else if (night) {
    customStyle = {
      color: "blue"
    };
    return "Good night";
  }
}

console.log(getTime());

ReactDOM.render(
  <h1 className="heading" style={customStyle}>
    {" "}
    {getTime()}{" "}
  </h1>,

  document.getElementById("root")
);
 

Ответ №1:

Вы можете просто более точно определить свои диапазоны с помощью

 const morning = false;
const afternoon = false;
const night = false;

if (time > 7 amp;amp; time <= 12) {
morning = true;
} else if (time > 12 amp;amp; time <= 18) {
afternoon = true;
} else {
night = true;
}
 

Комментарии:

1. Это сработало! Большое тебе спасибо, Пан. Я также попробовал этот путь, но проблема, с которой я столкнулся, заключалась в том, что я ставил его без «времени» до и послеamp;amp;, так что, как-> если (время >> 7 amp;amp; >><= 12) { утро = истина; } иначе, если (время > 12 amp;amp; <= 12) { утро = истина; } иначе, если (время > Спасибо за разъяснение!

Ответ №2:

Вам нужно будет узнать время восхода солнца в зависимости от местоположения и даты. Для этого вы могли бы воспользоваться sunrise-sunset-js библиотекой.