« »

This constructor function allows you to fade any color (background, border or foregound) of any object. This is a complete demo, with lots of internal documentation and examples. There is only one document and no associated files.

Label: The Ultimate Original JavaScript ColorShow

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
JavaScript
HTML
Print

Copy All x2

<script language="javascript" type="text/javascript">
<!--

var rnum		//single digit hexadecimal number
var count=0		//counter for changeColor() while loop
var color=""	//full 6 digit hexadecimal number
var rawRGB		//raw RGB value before conversion to hex
var speed=1000	//interval in milliseconds for timeChange() & slipChange()
var MathRandom=1//flag set by checkApp() to "0" if browser is old, or not Netscape nor IE
				//random #'s are calculated by noRand() instead of Math.random()
var altrand		//flag set to "1" when alternate random button is turned on
var slip=0		//flag set by slipChange() to change colors independently
var safe=0		//flag set by button(s) to round to web-safe colors with safeColors()
var stop=0		//flag set by "Stop the Madness" button - check status in safeColors()
				//to change display values only when change is stopped
var netColor	//passes browser-safe palette values from safeColor() to changeColor()
var el=""		//tells setRGB() which element user is changing
var once=0		//display "Easter Egg" in getBG() only when bg is set for first time -
				//(or anytime document.bgColor is set to "#deface")
var textVal		//user-input hex value for validation and setting specific colors
var linkClick=0
			
timerTEXT=setTimeout("",1)	//initialize timers for slipChange() independent change function
timerLINK=setTimeout("",1)	//changeBG() called by "timerID"
timerVLINK=setTimeout("",1)
timerSCROLL=setTimeout("",1)
timerID=setTimeout("",1)



function changeColor(){	//returns "color" a full 6 digit hexadecimal html color code
	stop=0
	count=0
	color=""
	while (count<6){
		count++
		newHex()
		color=color+rnum
	}
		if (safe){	//round to web-safe palette values
			safeColor(color)
			color=netColor
			}
}

function newHex(){	//returns "rnum" - a random single digit hexadecimal between 0-15
if (MathRandom){	//use Math.random() if possible
	rawRGB = Math.floor(Math.random()*16)
}else if (!MathRandom){noRand()}	//alternate random method
if (rawRGB==10){rnum="a"}		//Convert to Hexadecimal
else if (rawRGB==11){rnum="b"}
else if (rawRGB==12){rnum="c"}
else if (rawRGB==13){rnum="d"}
else if (rawRGB==14){rnum="e"}
else if (rawRGB==15){rnum="f"}
else {rnum=rawRGB}
return (rnum)
}

function noRand(){	//alternate random method for old and non-Netscape and non-IE browsers
var today=new Date()
var msec=today.getMilliseconds()
rawRGB=Math.round(Math.abs(Math.sin(msec))*10000000)%16
return rawRGB
}

function timeChange(){	//calls value-changing functions recursively with timer
if ((timerID!=null || timerID!="")) clearTimeout(timerID)
changeBg(color)
changeText(color)
changeLink(color)
changeVlink(color)
changeScroll(color)
timerID=setTimeout("timeChange()",speed)
}

function slipChange(){	//calls value-changing functions separately with timers
						//multiply speed*4 for a more interesting effect at default speed=1000
timerID=setTimeout("changeBg(),showRGB(),slipChange()",Math.random()*speed*4)
timerTEXT=setTimeout("changeText(),showRGB()",Math.random()*speed*4)
timerLINK=setTimeout("changeLink(),showRGB()",Math.random()*speed*4)
timerVLINK=setTimeout("changeVlink(),showRGB()",Math.random()*speed*4)
timerSCROLL=setTimeout("changeScroll(),showRGB()",Math.random()*speed*4)
slip=1
//stop=0
}

function checkAlt(){	//when restart button is pressed and alt random is on, option to turn it off
if (altrand==1){
if (confirm('Do you want to resume the normal random method?')){altrand=0,MathRandom=1,clearRGB()}
}
}

function changeSpeed(){	//changes speed interval to user input
speed=prompt("Enter a time delay in milliseconds (eg default 1000 = 1 second)       Try a small interval like 50","1000")
test=parseFloat(speed)			//make sure the input is a valid number
if ((test<=0) | (test=="NaN")){	//check for valid input
	alert("Enter a positive number greater than zero or click OK")
	changeSpeed()
}
clearTimeout(timerID)
if (slip){slipChange()}
else{timeChange()}
}

function webSafe(){	//changes displays to web-safe if change is stopped; set "safe" flag
if (!safe){			//if change function is stopped, convert & display web-safe values
	color=window.document.bgColor
	safeColor(color)
	window.document.bgColor=netColor
	color=window.document.fgColor
	safeColor(color)
	window.document.fgColor=netColor
	color=window.document.linkColor
	safeColor(color)
	window.document.linkColor=netColor
	color=window.document.vlinkColor
	safeColor(color)
	window.document.vlinkColor=netColor
	window.document.body.style.scrollbarBaseColor=netColor
	}
if (stop) showRGB()
if (slip) showRGB()
safe=1
}

function safeColor(color){	//round to web-safe palette values

var oneDigit=0		//single digit of hex value pair
var rgb=0			//one digit of hex value in rgb form (0-255)
var oneColor		//sum of both digits in rgb (0-255)
var eachColor=0		//counter to cycle through red, green, blue in order
var digit=0		//counter to cycle through both digit substrings of each color
var nan=0		//hex letter numeric value for addition of substrings
var colorName=""		//used with "digit" to call individual substrings

if (color.substring(0,1)=="#"){color=color.substring(1,7)}	//strip # if present

//split into individual digits, keeping rgb and place info
var red1=color.substring(0,1)
var red2=color.substring(1,2)
var grn1=color.substring(2,3)
var grn2=color.substring(3,4)
var blu1=color.substring(4,5)
var blu2=color.substring(5,6)

color=""			//clear "color" - rebuild with web-safe values

while (eachColor<3){	//loop through red, green, blue
	eachColor++
	digit=0
	oneColor=""
	while (digit<2){	//loop through both single digit substrings for each color
		digit++
		if (eachColor==1){colorName="red"}
		if (eachColor==2){colorName="grn"}
		if (eachColor==3){colorName="blu"}
		oneDigit=eval(colorName + digit)
//		test=parseFloat(oneDigit)	//test for non-numeric hex values (a,b,c,d,e,f):
if ((oneDigit=="a" || oneDigit=="A" || oneDigit=="b" || oneDigit=="B" || oneDigit=="c" || oneDigit=="C" || oneDigit=="d" || oneDigit=="D" || oneDigit=="e" || oneDigit=="E" || oneDigit=="f" || oneDigit=="F")){

				if(nan==0){nan=rgb}	//if 1st substring was a numeral and 2nd
							//substring is a letter, rgb from 1st is
							//"remembered" by nan
				//convert hex to rgb values
				if (oneDigit=="a" || oneDigit=="A"){rgb=10}
				if (oneDigit=="b" || oneDigit=="B"){rgb=11}
				if (oneDigit=="c" || oneDigit=="C"){rgb=12}
				if (oneDigit=="d" || oneDigit=="D"){rgb=13}
				if (oneDigit=="e" || oneDigit=="E"){rgb=14}
				if (oneDigit=="f" || oneDigit=="F"){rgb=15}
				if (digit==1){rgb=rgb*16} //multiply by hex base 16 (first pass)
//if the substring is a letter: if digit=1,nan=0; if digit=2,sums both substrings (new rgb + nan)
			nan=eval(rgb + nan)	//nan now stores the rgb value(s)
			rgb=0			//reset rgb for 2nd pass
			}else{
//if the substring is a number: sums both substrings; 1st pass rgb was initialized at 0
				rgb=eval(rgb + eval(oneDigit))
				if (digit==1){rgb=rgb*16}//multiply by hex base 16 (first pass)
			}
		if(digit==2){	//oneColor assumes rgb value from "rgb" or "nan" on second pass
				//(either "nan" or "rgb" is 0)
			oneColor=oneColor + eval(rgb + nan)
			rgb=0	//at end of 2nd pass reset rgb & nan to 0 for next color
			nan=0}
	}
//round to web-safe values - one color at a time
	if (oneColor>=0 && oneColor<26){oneColor="00"}	//must be string "00" - 00 evaluates as 0
	else if (oneColor>=26 && oneColor<77){oneColor=33}
	else if (oneColor>=77 && oneColor<128){oneColor=66}
	else if (oneColor>=128 && oneColor<179){oneColor=99}
	else if (oneColor>=179 && oneColor<230){oneColor="cc"}
	else if ((oneColor!="cc")&&(oneColor>=230 && oneColor<=255)){oneColor="ff"}
	color=color+oneColor	//add hex value to new "color" string
}
netColor=color	//passes web-safe value from safeColor() to changeColor()
}

function changeBg(){	//sets bg color to new value
changeColor()
window.document.bgColor="#" + color
}

function changeText(){	//sets text color to new value
changeColor()
window.document.fgColor="#" + color
textcolor=window.document.fgColor
}

function changeLink(){	//sets link color to new value
changeColor()
window.document.linkColor="#" + color
}

function changeVlink(){	//sets vlink color to new value
changeColor()
window.document.vlinkColor="#" + color
}

/*
** THE ALINK COLOR CANNOT BE CHANGED DYNAMICALLY ONCE THE DOCUMENT IS LOADED!!!
*/

function changeScroll(){	//sets scrollbar color to new value
changeColor()
window.document.body.style.scrollbarBaseColor = "#" + color;
}

function showRGB(){	//sends RGB values to the display boxes
window.document.forms.Bg.bgRGB.value=window.document.bgColor
window.document.forms.Text.textRGB.value=window.document.fgColor
window.document.forms.Link.linkRGB.value=window.document.linkColor
window.document.forms.Vlink.vlinkRGB.value=window.document.vlinkColor
window.document.forms.Scroll.scrollRGB.value=window.document.body.style.scrollbarBaseColor;
}

function clearRGB(){	//clears display boxes
window.document.forms.Bg.bgRGB.value=""
window.document.forms.Text.textRGB.value=""
window.document.forms.Link.linkRGB.value=""
window.document.forms.Vlink.vlinkRGB.value=""
window.document.forms.Scroll.scrollRGB.value=""
}

function setRGB(){		//user inputs RGB values
clearTimeout(timerID)
stop=1
if (el=="bg"){getBG()}
if (el=="text"){getText()}
if (el=="link"){getLink()}
if (el=="vlink"){getVlink()}
if (el=="scroll"){getScroll()}
showRGB()
window.document.forms.Alink.alinkRGB.focus()
}

function valHex(textVal){	//test for valid hex scheme input: 6 characters, 0-9, a-f, A-F
i=0
j=1
val=0	//if val=1, proceed; else, prompt for valid input
if (textVal.substring(i,j)!="#"){textVal="#" + textVal}	//add # if it's not there already
while (j<textVal.length){
	i++
	j++
	if ((textVal.length==7) && ((textVal.substring(i,j) == 0) || (textVal.substring(i,j) == 1) || (textVal.substring(i,j) == 2) || (textVal.substring(i,j) == 3) || (textVal.substring(i,j) == 4) || (textVal.substring(i,j) == 5) || (textVal.substring(i,j) == 6) || (textVal.substring(i,j) == 7) || (textVal.substring(i,j) == 8) || (textVal.substring(i,j) == 9)) || ((textVal.substring(i,j) == "A") || (textVal.substring(i,j) == "a") || (textVal.substring(i,j) == "B") || (textVal.substring(i,j) == "b") || (textVal.substring(i,j) == "C") || (textVal.substring(i,j) == "c") || (textVal.substring(i,j) == "D") || (textVal.substring(i,j) == "d") || (textVal.substring(i,j) == "E") || (textVal.substring(i,j) == "e") || (textVal.substring(i,j) == "F") || (textVal.substring(i,j) == "f"))){
		val=1
	}else{
		val=0
		j=textVal.length	//on error, stop validating and alert
		alert ("input a valid hex color scheme - 6 characters using 0-9 and a-f (eg 3399ff)")}
}
}

function setAll(){
clearTimeout(timerID)
stop=1
showRGB()
getBG()
showRGB()
getText()
showRGB()
getLink()
showRGB()
getVlink()
showRGB()
getScroll()
showRGB()
window.document.forms.Alink.alinkRGB.focus()
}

function getBG(){		//user inputs BG color
textVal=prompt("Input new BG Color",window.document.bgColor)
if (textVal==null) textVal=window.document.bgColor
valHex(textVal)		//validate input with valHex()
if (val){
if (textVal.substring(0,1)!="#"){textVal="#" + textVal}	//add # if it's not there already
//1st time value is set or if value ="#deface" show this 'Easter Egg'
if ((!once) | (textVal=="#deface")){
	alert(textVal + "!! That's my favorite color!")
	once=1
}
	if(safe){		//if web-safe is in effect, option to round or use actual input
			color=textVal.substring(1,7)
			safeColor(color)
			textVal=netColor
	}
	window.document.bgColor=textVal
}else{			//if invalid, check if user wants to cancel
	if (confirm("Change the BG?")){
		getBG()
	}
}

}

function getText(){		//user inputs TEXT color
var textVal=prompt("Input new TEXT Color",window.document.fgColor)
if (textVal==null) textVal=window.document.fgColor
valHex(textVal)		//validate input with valHex()
if (val){
if (textVal.substring(0,1)!="#"){textVal="#" + textVal}	//add # if it's not there already
//1st time value is set or if value ="#deface" show this 'Easter Egg'
if ((!once) | (textVal=="#deface")){
	alert(textVal + "!! That's my favorite color!")
	once=1
}
	if(safe){		//if web-safe is in effect, round input
			color=textVal.substring(1,7)
			safeColor(color)
			textVal=netColor
	}
	document.fgColor=textVal
}else{			//if invalid, check if user wants to cancel
	if (confirm("Change the TEXT?")){
		getText()
	}
}
}

function getLink(){		//user inputs LINK color
textVal=prompt("Input new LINK Color",window.document.linkColor)
if (textVal==null) textVal=window.document.linkColor
valHex(textVal)		//validate input with valHex()
if (val){
if (textVal.substring(0,1)!="#"){textVal="#" + textVal}	//add # if it's not there already
//1st time value is set or if value ="#deface" show this 'Easter Egg'
if ((!once) | (textVal=="#deface")){
	alert(textVal + "!! That's my favorite color!")
	once=1
}
	if(safe){		//if web-safe is in effect, round input
			color=textVal.substring(1,7)
			safeColor(color)
			textVal=netColor
	}
		window.document.linkColor=textVal
}else{			//if invalid, check if user wants to cancel
	if (confirm("Change the LINKS?")){
		getLink()
	}
}
}

function getVlink(){		//user inputs VLINK color
textVal=prompt("Input new VLINK Color",window.document.vlinkColor)
if (textVal==null) textVal=window.document.vlinkColor
valHex(textVal)		//validate input with valHex()
if (val){
if (textVal.substring(0,1)!="#"){textVal="#" + textVal}	//add # if it's not there already
//1st time value is set or if value ="#deface" show this 'Easter Egg'
if ((!once) | (textVal=="#deface")){
	alert(textVal + "!! That's my favorite color!")
	once=1
}
	if(safe){		//if web-safe is in effect, round input
			color=textVal.substring(1,7)
			safeColor(color)
			textVal=netColor
	}
	window.document.vlinkColor=textVal
}else{			//if invalid, check if user wants to cancel
	if (confirm("Change the VLINKS?")){
		getVlink()
	}
}
Alink.alinkRGB.focus()
}

function getScroll(){		//user inputs SCROLLBAR color
textVal=prompt("Input new SCROLLBAR Color",window.document.body.style.scrollbarBaseColor)
if (textVal==null) textVal=window.document.body.style.scrollbarBaseColor
valHex(textVal)		//validate input with valHex()
if (val){
if (textVal.substring(0,1)!="#"){textVal="#" + textVal}	//add # if it's not there already
//1st time value is set or if value ="#deface" show this 'Easter Egg'
if ((!once) | (textVal=="#deface")){
	alert(textVal + "!! That's my favorite color!")
	once=1
}
	if(safe){		//if web-safe is in effect, round input
			color=textVal.substring(1,7)
			safeColor(color)
			textVal=netColor
	}
	window.document.body.style.scrollbarBaseColor=textVal
}else{			//if invalid, check if user wants to cancel
	if (confirm("Change the SCROLLBAR?")){
		getScroll()
	}
}
Alink.alinkRGB.focus()
}

function checkApp(){		//check if browser can use Math.random() method
var appName=navigator.appName
var appVer=navigator.appVersion
//alert("appName="+appName)
if ((appName=="Microsoft Internet Explorer") || (appName=="Netscape")){
	if((appVer.substring(0,1)>2 || (appVer.indexOf("MSIE 3")!=-1))){	//use Math.random()
		MathRandom=1
		timeChange()
	}else{
		MathRandom=0					//don't use Math.random()
		timeChange()
		alert("Oops! Your browser is pretty antiquated and may not support the Math.random() method. We'll use a different algorithm, but it's not as random. You should think about getting out of the Stone Age and updating your browser.")
	}
}else{
		MathRandom=0					//don't use Math.random()
		timeChange()
		alert("Oops! Your browser is neither Netscape nor Internet Explorer and may not support the Math.random() method. We'll use a different algorithm, but it's not as random. You should think about getting a new browser with more capabilities.")
}
}

//-->
</script>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<BODY onload="timeChange(),Alink.alinkRGB.focus()">
<center>
<script language="javascript" type="text/javascript">
<!--
checkApp()			//check if browser is Netscape Navigator
if (navigator.appName=="Netscape"){
	document.write('<H1>Netscape Navigator will only display a changing background color -</H1><H3>For the complete <i>ColorShow experience</i> use the Microsoft Internet Explorer or America Online browsers<H3><HR>')
}
// -->
</script>
<font size="6"><b>The Ultimate Original <i>JavaScript</i> ColorShow</b></font><br>
&nbsp;<br>
<noscript>
<H2>The effects on this page require JavaScript.<BR>Turn on JavaScript in your 
browser preferences or update your browser software.</h2><BR><BR></noscript><a name="dummyAnchor"></a><!-- dummy anchor for dummy links --><br>
<form name="StopButton" action="#"><input onclick="showRGB(),clearTimeout(timerID),stop=1" type="button" value="Stop the Madness" name="stopButton"> 
<font color="#000000" size="5"><b>to Display Current Hex Values</b></font> 

</form><br>
<table cellpadding="10" width="500" border="0">
  <tbody>
  <tr>
    <td valign="top" width="50"><b><font color="#ffffff" size="5">bg</font></b></td>
    <td valign="top" width="100">
      <form name="Bg" action="#"><input size="9" name="bgRGB" onfocus="if (confirm('Do you want to change the background color?')){el='bg',setRGB()}"></form></td>
	<td valign="top" align="center" width="300">
      <form name="Restart" action="#"><input onclick="checkAlt(),clearTimeout(timerID),clearRGB(),slip=0, timeChange(),window.status=' '; return true" type="button" value="                        Restart                          " name="restartButton"></form></td></tr>

  <tr>
    <td valign="top"><!--B><FONT size="5">text</FONT></B-->
	<script language="Javascript" type="text/javascript">
<!--
<!--  if (document.all&&window.print){-->
document.write('<DIV ID="text" class="textstyle">text</div>')
<!-- } -->

//-->
    </script><div id="text" class="textstyle">text</div>
	</td>
    <td valign="top">
      <form name="Text" action="#"><input onfocus="if (confirm('Do you want to change the text color?')){el='text',setRGB()}" size="9" name="textRGB"></form></td>
    <td valign="top" align="center">
      <form name="Speed" action="#"><input onclick="clearTimeout(timerID),changeSpeed()" type="button" value="                Change Speed                  " name="speedButton"></form></td></tr>

  <tr>
    <td valign="top"><b><font size="5"><a href="" onmouseover="alert('DO NOT CLICK ON THIS LINK, OR YOU WILL LOSE THE LINK COLOR DISPLAY!'),window.status='This is a dummy link, DUMMY!'; return true" onmouseout="window.status=''; return true" onclick="linkClick=1">
	link</a></font></b></td>
    <td valign="top">
      <form name="Link" action="#"><input onfocus="if (confirm('Do you want to change the link color?')){el='link',setRGB()}" size="9" name="linkRGB"> </form></td>
    <td valign="top" align="center">
      <form name="safeonButton" action="#"><input onclick="webSafe(),window.status='Web-safe color rounding is enabled'; return true" type="button" value="   Web-safe On   " name="safeButton"><input onclick="safe=0,window.status='Web-safe color rounding is disabled'; return true" type="button" value="   Web-safe Off    " name="safeoffButton"></form></td></tr>
  <tr>

    <td valign="top"><b><font size="5"><a href="#dummyAnchor" onmouseover="window.status='This is a dummy link, DUMMY!'; return true" onmouseout="window.status=''; return true">
	vlink</a></font></b></td>
    <td valign="top">
      <form name="Vlink" action="#"><input onfocus="if (confirm('Do you want to change the vlink color?')){el='vlink',setRGB()}" size="9" name="vlinkRGB"></form></td>
    <td valign="top" align="center">
      <script language="javascript" type="text/javascript">
<!--
checkApp()			//check if browser is recent enough to use Math.random() method;
if (MathRandom){		//Uses Math.random(), so hide from antique browsers
document.write('<FORM action="#" NAME="indChange"><INPUT TYPE="button" VALUE="Elements Change Independently" NAME="indButton" onClick="clearTimeout(timerID),slipChange()"></FORM>')
}
// -->
      </script><form action="#" name="indChange"><input type="button" value="Elements Change Independently" name="indButton" onclick="clearTimeout(timerID),slipChange()"></form>
    </td></tr>
  <tr>

    <td valign="top"><font color="#d0e0c0" size="5"><u><b>alink</b></u></font></td>
    <td valign="top">
      <form name="Alink" action="#"><input size="9" value="no change" name="alinkRGB"></form></td>  
    <td valign="top" align="center">
      <script language="javascript" type="text/javascript">
<!--
checkApp()			//check if browser is recent enough to use Math.random() method;
if (MathRandom){		//Hide from antique browsers - they already use noRand()
altrand=0			//set flag to default normal function
document.write('<FORM action="#" NAME="altRandom"><INPUT TYPE="button" VALUE="      Alternate Random Method      " NAME="altButton" onClick=" altrand=1,MathRandom=0,clearTimeout(timerID),clearRGB(),timeChange()"></FORM>')
}
// -->
      </script><form action="#" name="altRandom"><input type="button" value="      Alternate Random Method      " name="altButton" onclick=" altrand=1,MathRandom=0,clearTimeout(timerID),clearRGB(),timeChange()"></form>
    </td></tr>
<tr>
    <td valign="top"><b><font size="5" color="#000000">scroll</font></b></td>

    <td valign="top">
      <form name="Scroll" action="#"><input onfocus="if (confirm('Do you want to change the scrollbar color?')){el='scroll',setRGB()}" size="9" name="scrollRGB"></form></td>
    <td valign="top" align="center">
      <script language="javascript" type="text/javascript">
<!--
checkApp()			//check if browser is recent enough to use Math.random() method;
if (MathRandom){		//Uses Math.random(), so hide from antique browsers
document.write('<FORM action="#" NAME="Set"><INPUT TYPE="button" VALUE="              Set All Hex Values              " NAME="setButton" onClick="clearTimeout(timerID),setAll()"></FORM>')
}
// -->
      </script><form action="#" name="Set"><input type="button" value="              Set All Hex Values              " name="setButton" onclick="clearTimeout(timerID),setAll()"></form>
    </td></tr>
	</tbody></table>
</body>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->