Snap Builder Public Codes Library
Snap | Generators | Login | Browse | Search | Enter Code | Export Snap Builder Public Codes Library

 

Category: Javascript Codes Library >> Background Effects >> Background Color Changer >> Timed Background Color Changer


Code Snippet </> Info


Snippet Name: Timed Background Color Changer

Description: Background color changes according to the hours of day.


Compatible Browsers:
Chrome BrowserFirefox BrowserInternet Explorer BrowserOpera BrowserSafari Browser


Example: View Code Demo

Note: Simply adjust the color values to your color code requirements.

Author: SnapBuilder <snippets@snapbuilder.com>

Last Modified: 2019-12-09 02:22:09

Language: javascript

Highlight Mode: javascript

Copy Codes: Use Free Notepad ++
Bookmark and Share

Snap HTML Code Editor:
Paste the source code, make changes and instantly see it in live preview.
Snap HTML Code Editor


  About Copying
Copied To Clipboard!

<html> <head> <title>Timed Background Color Changer</title> <script> // Begin Timed Color Changer from https://snapbuilder.com Free Public Codes Library // Free to use as long as the credit lines remain in place var now = new Date(); var hours = now.getHours(); document.write('It\'s now: ', hours, ' hundred hours:<br /><br />'); // remove this line for no document.write message 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> [ YOUR CONTENT GOES HERE ] </body> </html>


[ Snippet Options ]

 

© 2002 -  Snap Builder Public Codes Library