How to Change Background Color of HTML page Automatically

| February 23, 2015 | 0 Comments

Some of us like dynamic web pages which change body color on its own. This is not too tough but requires effort for the first time. Today, I am going to show you both the easiest and detailed method to change the body color of any HTML page, every second, automatically.

Only this page on this blog sports colour-changing background. For a quick demo, actually.

In case you want to have a look at the live demo, I have created a page which changes color every second with no text. Look at the page patiently as it changes color every second depending on hex value and time. Though one minute will be enough to observe changes.

Easiest Approach

First things first. If you are not comfortable with HTML and JavaScript then copy the two lines of code below. And paste them in your HTML file before </body> tag.

If you want to use this in WordPress:

  • Go to Appearance > Editor > footer.php
  • And paste the code before </body> tag.

Detailed Method

Though the above method was enough but if you want to dive into Javascript, take a look at this method to create color changing webpage. To change the body color of your page every second, We’ll use Javascript.

First, initialize the time so that we can change the color every second. Remember var d = new Date();? Extract hours, minutes, and seconds as variables. Initialise another variable h1 (we’ll not completely depend on time to change body color instead we’ll define some random values). I set h1 for every hour, but you can set this your way. Initialise color and set this as body background. Run the code. And the code looks like this:

/*
 * Copyright Anil Sardiwal
 *
 * Code written for general programmers like you and me. Enjoy!
 *
 * Contact me on facebook @ WideFide or mail me: anil@widefide.com
 */

function clock()
{
	var d = new Date();
	var h = d.getHours();
	var m = d.getMinutes();
	var s = d.getSeconds();

	if (h< =9) {h = '0'+ h};
 	if (m<=9) {m = '0'+ m};
	if (s<=9) {s = '0'+ s};

	var time = h + " : " + m + " : " + s;

	var h1, m1;

	if(h == 00) {h1 = 'b6'}
	else if(h == 01) {h1 = 'b0'}
	else if(h == 02) {h1 = '47'}
	else if(h == 03) {h1 = 'ab'}
	else if(h == 04) {h1 = '23'}
	else if(h == 05) {h1 = 'ac'}
	else if(h == 06) {h1 = '4f'}
	else if(h == 07) {h1 = '03'}
	else if(h == 08) {h1 = '30'}
	else if(h == 09) {h1 = '88'}
	else if(h == 10) {h1 = 'ad'}
	else if(h == 11) {h1 = '22'}
	else if(h == 12) {h1 = 'ab'}
	else if(h == 13) {h1 = '90'}
	else if(h == 14) {h1 = '3c'}
	else if(h == 15) {h1 = '45'}
	else if(h == 16) {h1 = '4c'}
	else if(h == 17) {h1 = '9d'}
	else if(h == 18) {h1 = '1a'}
	else if(h == 19) {h1 = '3f'}
	else if(h == 20) {h1 = '56'}
	else if(h == 21) {h1 = '21'}
	else if(h == 22) {h1 = 'fe'}
	else if(h == 23) {h1 = '32'}
	else {h1 = 'aa'}

	var color = "#" + h1 + m + s;

	document.body.style.backgroundColor = color;
	document.getElementById("time4cc").innerHTML = time;
	document.getElementById("time4cc").style.visibility= "hidden";
	
	setTimeout(clock, 1000);
}
clock();

So now you know how to change any page’s color automatically. This is mostly suitable for casual websites so professional blogs should avoid doing this. And at the end of the day, it’s fun to see a color changing page.

Also, introducing Split Hex Code Color Picker. While writing the code, I wanted to test many hex codes, But I just wanted to change first two digits(and text) for h1. I searched for a similar tool on Google and didn’t find any. So I ended up creating my own Color picker.

 

Tags: ,

Category: Internet

About the Author ()

Anil is a tech blogger at WideFide. To know more about me or if you want to follow my latest updates, Follow me on twitter @TheOnlyAnil or Join me @ Facebook