background color changes automatically

**Immi** · 11-20-2010, 06:41 PM

Hi,
I search for a script that changes a background color of a div automatically each millisecond or so. It should loop all the colors used with the hexacode. IS that possible and can somebody help me? It would be great to get an answer.
Thank you.
Immi

**jscheuer1** · 11-20-2010, 09:43 PM

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#autocolor{
	width: 5em;
	height: 2em;
	padding: 0.75em 0.5em 0;
	text-align: center;
	border: 1px solid black;
	margin: 3em auto 0;
	font: bold 90% sans-serif;
}
</style>
</head>
<body>
<div id="autocolor">
Wow!
</div>
<script type="text/javascript">
(function(){
	var hexacode = ['#ffff00', '#ff0000', '#00ff00', '#0000ff', '#ffffff'],
	el = document.getElementById('autocolor').style,
	counter = -1,
	hexalen = hexacode.length;
	function auto(){
		el.backgroundColor = hexacode[counter = ++counter % hexalen];
	}
	setInterval(auto, 20);
})();
</script>
</body>
</html>

Note: You may add/change as many hexacodes as you like. They don't even have to be hexadecimal values. They can also be valid css color name values or valid css decimal rgb values.

**Immi** · 11-22-2010, 06:46 PM

Well, I added a few more colors. But thanks a lot for the script!

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#autocolor{
	width: 1000px;
	height: 700px;
	padding: 0.75em 0.5em 0;
	text-align: center;
	border: 1px solid black;
	margin: 3em auto 0;
	font: bold 90% sans-serif;
}
</style>
</head>
<body>
<div id="autocolor">
Wow!
</div>
<script type="text/javascript">
(function(){
	var hexacode = [

'#ff0000',
'#ff0400',
'#ff0800',
'#ff0d00',
'#ff1100',
'#ff1500',
'#ff1900',
'#ff1e00',
'#ff2200',
'#ff2600',
'#ff2a00',
'#ff2f00',
'#ff3300',
'#ff3700',
'#ff3c00',
'#ff4000',
'#ff4400',
'#ff4800',
'#ff4d00',
'#ff5100',
'#ff5500',
'#ff5900',
'#ff5e00',
'#ff6200',
'#ff6600',
'#ff6a00',
'#ff6e00',
'#ff7300',
'#ff7700',
'#ff7b00',
'#ff7f00',
'#ff8400',
'#ff8800',
'#ff8c00',
'#ff9100',
'#ff9500',
'#ff9900',
'#ff9d00',
'#ffa200',
'#ffa600',
'#ffaa00',
'#ffae00',
'#ffb300',
'#ffb700',
'#ffbb00',
'#ffbf00',
'#ffc300',
'#ffc800',
'#ffcc00',
'#ffd000',
'#ffd400',
'#ffd900',
'#ffdd00',
'#ffe100',
'#ffe500',
'#ffea00',
'#ffee00',
'#fff200',
'#fff700',
'#fffb00',
'#ffff00',
'#fbff00',
'#f6ff00',
'#f2ff00',
'#eeff00',
'#eaff00',
'#e5ff00',
'#e1ff00',
'#ddff00',
'#d9ff00',
'#d5ff00',
'#d0ff00',
'#ccff00',
'#c8ff00',
'#c4ff00',
'#bfff00',
'#bbff00',
'#b7ff00',
'#b3ff00',
'#aeff00',
'#aaff00',
'#a6ff00',
'#a1ff00',
'#9dff00',
'#99ff00',
'#95ff00',
'#90ff00',
'#8cff00',
'#88ff00',
'#84ff00',
'#80ff00',
'#7bff00',
'#77ff00',
'#73ff00',
'#6fff00',
'#6aff00',
'#66ff00',
'#62ff00',
'#5eff00',
'#59ff00',
'#55ff00',
'#51ff00',
'#4cff00',
'#48ff00',
'#44ff00',
'#40ff00',
'#3bff00',
'#37ff00',
'#33ff00',
'#2fff00',
'#2aff00',
'#26ff00',
'#22ff00',
'#1eff00',
'#1aff00',
'#15ff00',
'#11ff00',
'#0dff00',
'#09ff00',
'#04ff00',
'#00ff00',
'#00ff04',
'#00ff08',
'#00ff0d',
'#00ff11',
'#00ff15',
'#00ff1a',
'#00ff1e',
'#00ff22',
'#00ff26',
'#00ff2b',
'#00ff2f',
'#00ff33',
'#00ff37',
'#00ff3c',
'#00ff40',
'#00ff44',
'#00ff48',
'#00ff4c',
'#00ff51',
'#00ff55',
'#00ff59',
'#00ff5d',
'#00ff62',
'#00ff66',
'#00ff6a',
'#00ff6e',
'#00ff73',
'#00ff77',
'#00ff7b',
'#00ff80',
'#00ff84',
'#00ff88',
'#00ff8c',
'#00ff91',
'#00ff95',
'#00ff99',
'#00ff9d',
'#00ffa1',
'#00ffa6',
'#00ffaa',
'#00ffae',
'#00ffb2',
'#00ffb7',
'#00ffbb',
'#00ffbf',
'#00ffc3',
'#00ffc8',
'#00ffcc',
'#00ffd0',
'#00ffd5',
'#00ffd9',
'#00ffdd',
'#00ffe1',
'#00ffe6',
'#00ffea',
'#00ffee',
'#00fff2',
'#00fff7',
'#00fffb',
'#00ffff',
'#00fbff',
'#00f7ff',
'#00f2ff',
'#00eeff',
'#00eaff',
'#00e6ff',
'#00e1ff',
'#00ddff',
'#00d9ff',
'#00d5ff',
'#00d0ff',
'#00ccff',
'#00c8ff',
'#00c3ff',
'#00bfff',
'#00bbff',
'#00b7ff',
'#00b2ff',
'#00aeff',
'#00aaff',
'#00a6ff',
'#00a1ff',
'#009dff',
'#0099ff',
'#0095ff',
'#0091ff',
'#008cff',
'#0088ff',
'#0084ff',
'#0080ff',
'#007bff',
'#0077ff',
'#0073ff',
'#006eff',
'#006aff',
'#0066ff',
'#0062ff',
'#005dff',
'#0059ff',
'#0055ff',
'#0051ff',
'#004cff',
'#0048ff',
'#0044ff',
'#0040ff',
'#003cff',
'#0037ff',
'#0033ff',
'#002fff',
'#002bff',
'#0026ff',
'#0022ff',
'#001eff',
'#001aff',
'#0015ff',
'#0011ff',
'#000dff',
'#0008ff',
'#0004ff',
'#0000ff',
'#0400ff',
'#0900ff',
'#0d00ff',
'#1100ff',
'#1500ff',
'#1900ff',
'#1e00ff',
'#2200ff',
'#2600ff',
'#2a00ff',
'#2f00ff',
'#3300ff',
'#3700ff',
'#3c00ff',
'#4000ff',
'#4400ff',
'#4800ff',
'#4d00ff',
'#5100ff',
'#5500ff',
'#5900ff',
'#5e00ff',
'#6200ff',
'#6600ff',
'#6a00ff',
'#6e00ff',
'#7300ff',
'#7700ff',
'#7b00ff',
'#7f00ff',
'#8400ff',
'#8800ff',
'#8c00ff',
'#9100ff',
'#9500ff',
'#9900ff',
'#9d00ff',
'#a200ff',
'#a600ff',
'#aa00ff',
'#ae00ff',
'#b300ff',
'#b700ff',
'#bb00ff',
'#bf00ff',
'#c300ff',
'#c800ff',
'#cc00ff',
'#d000ff',
'#d400ff',
'#d900ff',
'#dd00ff',
'#e100ff',
'#e500ff',
'#ea00ff',
'#ee00ff',
'#f200ff',
'#f700ff',
'#fb00ff',
'#ff00ff',
'#ff00fb',
'#ff00f7',
'#ff00f2',
'#ff00ee',
'#ff00ea',
'#ff00e5',
'#ff00e1',
'#ff00dd',
'#ff00d9',
'#ff00d4',
'#ff00d0',
'#ff00cc',
'#ff00c8',
'#ff00c3',
'#ff00bf',
'#ff00bb',
'#ff00b7',
'#ff00b3',
'#ff00ae',
'#ff00aa',
'#ff00a6',
'#ff00a1',
'#ff009d',
'#ff0099',
'#ff0095',
'#ff0091',
'#ff008c',
'#ff0088',
'#ff0084',
'#ff007f',
'#ff007b',
'#ff0077',
'#ff0073',
'#ff006e',
'#ff006a',
'#ff0066',
'#ff0062',
'#ff005e',
'#ff0059',
'#ff0055',
'#ff0051',
'#ff004d',
'#ff0048',
'#ff0044',
'#ff0040',
'#ff003c',
'#ff0037',
'#ff0033',
'#ff002f',
'#ff002a',
'#ff0026',
'#ff0022',
'#ff001e',
'#ff0019',
'#ff0015',
'#ff0011',
'#ff000d',
'#ff0008',
'#ff0004'
],
	el = document.getElementById('autocolor').style,
	counter = -1,
	hexalen = hexacode.length;
	function auto(){
		el.backgroundColor = hexacode[counter = ++counter % hexalen];
	}
	setInterval(auto, 20);
})();
</script>
</body>
</html>

Thread: background color changes automatically

Thread Tools

Search Thread

background color changes automatically

Bookmarks

Bookmarks

Posting Permissions