Change background color depending on time of day

Updated: 01/31/2019 by Computer Hope

Example

The below source code changes the background color of a page depending on the color of the day. As you can see in this example, the page will be a different color reflecting the time of day. This code should be placed in the <head> tags of HTML (hypertext markup language) your code.

Source code

<script type="text/javascript">
var now = new Date();
var hours = now.getHours();
//Keep in code - Written by Computerhope.com
//Place this script in your HTML heading section
document.write('It\'s now: ', hours, '<br><br>');
document.bgColor="#CC9900";
//18-19 night
if (hours > 17 && hours < 20){
 document.write ('<body style="background-color: orange">');
}
//20-21 night
else if (hours > 19 && hours < 22){
 document.write ('<body style="background-color: orangered">');
}
//22-4 night
else if (hours > 21 || hours < 5){
 document.write ('<body style="background-color: #C0C0C0;">');
}
//9-17 day
else if (hours > 8 && hours < 18){
 document.write ('<body style="background-color: #616D7E">');
}
//7-8 day
else if (hours > 6 && hours < 9){
 document.write ('<body style="background-color: skyblue">');
}
//5-6 day
else if (hours > 4 && hours < 7){
 document.write ('<body style="background-color: steelblue">');
}
else {
 document.write ('<body style="background-color: white">');
}
</script>