0

Comunidad, buen dia, quisiera saber como cambiar el color de un elemento dinamicamente con javascript, dependiendo de la hora del dia, un ejemplo:

  • un negocio abre a las 8am el elemento se pone de color verde y dice abierto
  • el mismo negocio se cierra a las 16pm el elemento se pone color rojo y dice cerrado

pego la linea del codigo

<p>Disponibilidad: <span><i class="fas fa-circle" style="color: green;"></i> Abierto</span></p>

muchas gracias.

1
  • 1
    Hola! Bienvenidx a SOes. Las preguntas del tipo "Tengo que hacer esto" sin mostrar el código que has escrito no suelen ser bien recibidas, ya que la respuesta será siempre adivinando y no encaja en el formato del sitio. Recomiendo que hagas el recorrido para entender el sitio y de paso ganar tu primera medalla. También estaría bien que revisaras Cómo preguntar para que recibas respuesta cuanto antes.
    – Alfabravo
    el 26 mar. 2021 a las 21:30

1 respuesta 1

1

Puedes hacerlo con el constructor Date

Obteniendo la hora actual y cambiando el innerHTML del elemento

Teniendo en cuenta que tendrás que ponerle un ID al <p> para poder obtenerlo con Javascript

const d = new Date();
if (d.getHours() > 17) {
  disponibilidad.innerHTML = `Disponibilidad: <span style="color:green;font-weight:bolder;"><i class="fas fa-check-circle"></i> Abierto</span>`;
} else {
  disponibilidad.innerHTML = `Disponibilidad: <span style="color:red;font-weight:bolder;"><i class="fas fa-times-circle"></i> Cerrado</span>`;
}
body {
  font-family:Arial;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
<p id="disponibilidad"></p>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.