¿Puedo cambiar el color de fondo dependiendo de la hora?

Creé un sitio web atractivo usando html5, CSS, bootstrap. Quería saber si puedo cambiar el color de fondo y el color de selección de la barra de navegación automáticamente en el código durante el día (azul) y durante la noche (rojo apagado). ¿Hay algo que pueda hacer para cambiar el color de la barra de navegación y el fondo en función del tiempo del usuario? Aquí está mi código:

  




Card image

John Doe

Some example text some example text. Some example text some example text. Some example text some example text. Some example text some example text.

See Profile

Aquí está CSS

 nav h1 { vertical-align: middle; background-color: rgb(0, 0, 0); border: 10px solid rgba(0, 0, 0, 0); text-align: center; position: fixed; position: top; min-width: 100%; z-index: 3; } .nav ul { vertical-align: middle; -webkit-font-smoothing:antialiased; text-shadow:0 1px 0 rgba(255, 255, 255, 0); background: rgb(0, 0, 0); list-style: none; margin: 0; padding: 0; width: 100%; z-index: 3; } .card-img-wrap img { transition: transform .25s; width: 100%; } .card-img-wrap:hover img { transform: scale(1.2); } .card-img-wrap:hover:after { opacity: 1; } 

Este es mi código completo. No hay script java personalizado. Ayúdeme con el código o material de estudio o enlaces para el material de estudio que podría utilizar para implementar la lógica. ¿También puedo lograr lo que estoy buscando usando solo CSS? Si no es posible, ¿cómo programo usando el script java? Realmente aprecio la ayuda de antemano. Muchas gracias.

Solo use setInterval periódicamente (una vez por minuto debería ser más que suficiente) llame a una función que use el objeto JavaScript Date para verificar la hora del día, luego configure los colores de fondo según sea necesario.

Llame a esa misma función cuando la página se carga para iniciarse con los colores correctos.

Actualización: Aquí hay un código de muestra.

 function init() { function setBackgroundForTimeOfDay() { const body = document.querySelector('body'); const hours = new Date().getHours(); if (hours < 6 || hours >= 18) body.style['background-color'] = '#900'; else body.style['background-color'] = '#46F'; } setBackgroundForTimeOfDay(); setInterval(setBackgroundForTimeOfDay, 60000); } 

Plunker aquí: http://plnkr.co/edit/dq0nGUMvgTyHVXplrq1d?p=preview

La pregunta se reduce a si es posible cambiar un estilo CSS según la hora del día.

Hay algunas formas de hacerlo, pero para la mejor experiencia de usuario, probablemente desee establecer el estilo en el tiempo de generación de HTML. Eso significaría algo así como que el servidor configure una clase en el elemento del cuerpo para indicar que desea usar el tema del horario nocturno. O simplemente puede escribir el estilo en línea, pero probablemente sea mejor mantener los estilos externos cuando sea posible.

La otra opción es hacer lo mismo en el navegador del usuario usando JavaScript. Simplemente configure una clase o configure el estilo en línea. JavaScript tiene la ventaja de que respetará la hora local del usuario, pero si el reloj del sistema es incorrecto, obtendrá un tema incorrecto. También significa que no tiene que preocuparse por detectar la zona horaria del servidor del lado del usuario, si le preocupan los usuarios de diferentes partes del país / mundo.

Algo así funcionaría, 1000 significa 1 segundo, tendrás que setInterval(()=>{ var color=new Date().getHours()>16?'red':'blue' document.querySelector('.nav').style.background=color }, 1000) más para hacerlo menos frecuente setInterval(()=>{ var color=new Date().getHours()>16?'red':'blue' document.querySelector('.nav').style.background=color }, 1000)

Pero para la mejor forma de hacer cambios en tu barra de navegación, sigue este enlace de desbordamiento de stack: Cambia el color de la barra de navegación en Twitter Bootstrap