Sunday, 16 March 2014

Change Page Background Colour Based Upon Current Time Using Javascript

Change Page Background Colour Based Upon Current Time Using Javascript


Use the following code snippet to change the background colour of your page based upon the Current System Time.. You can modify the code to change the background image of page based upon the time..


<html>
<head>
<title>Change Page Background Colour Based Upon Current Time</title>

<script type="text/javascript">
var now = new Date();
var hours = now.getHours();

//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>

</head>
<body>
</body>
</html> 

No comments:

Post a Comment

Thank You for Your Comments. We will get back to you soon.

back to top