Quiero implementar un estado de disponibilidad en el sitio en función de una hora determinada. He preparado el código, pero no sé cómo incluir la especificación de color.
Quiero mostrar "En línea" en verde, mientras que "Fuera de línea" en rojo. ¿Cómo hacerlo?
var today = new Date(); var time = today.getHours(); var greet; if (time > 0 && time <= 12) { greet = 'Online'; } else if (time > 12 && time <= 23) { greet = 'Offline'; } var show = document.getElementById('message'); show.textContent = greet; <p id="message"></p>Más simple: agregue saludar como clase también
const show = document.getElementById('message'); var today = new Date(); var time = today.getHours(); var greet; if (time > 0 && time <= 12) { greet = 'Online'; } else if (time > 12 && time <= 23) { greet = 'Offline'; } show.classList.add(greet) show.textContent = greet; .Offline { color: red; } .Online { color: green; } <p id="message"></p>Incluso puedes agregar el texto en la clase.
const show = document.getElementById('message'); const time = new Date().getHours(); var greet; if (time > 0 && time <= 12) { greet = 'Online'; } else if (time > 12 && time <= 23) { greet = 'Offline'; } show.classList.add(greet) .Offline { color: red; } .Offline::after { content: "Offline" } .Online { color: green; } .Online::after { content: "Online" } <p id="message"></p> const show = document.getElementById('message'); var today = new Date(); var time = today.getHours(); var greet; if (time > 0 && time <= 12) { greet = 'Online'; } else if (time > 12 && time <= 23) { greet = 'Offline'; } show.classList.add(greet) show.textContent = greet; .Offline { color: red; } .Online { color: green; } <p id="message"></p>así que si hay alguna ayuda necesaria. Alcanzar. estaré en línea todos los días
Puede seleccionar la etiqueta <p> en la primera línea del script
var today = new Date(); var time = today.getHours(); var greet; var show = document.getElementById('message'); if (time > 0 && time <= 12) { greet = 'Online'; show.style.color = "green" } else if (time > 12 && time <= 23) { greet = 'Offline'; show.style.color = "red"; } show.textContent = greet; <p id="message"></p>