Free JavaScript Collection

Main Background Effects Script JavaScript Color Show 2

<!-- THREE STEPS TO INSTALL JAVASCRIPT COLOR SHOW:

1.  Copy the coding into the HEAD of your HTML document

2.  Add the onLoad event handler into the BODY tag

3.  Put the last coding into the BODY of your HTML document  -->

<title>script.omduena.com: JavaScript, java script, javascripts, script, javascript free code!</title>

<!--

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>

</HEAD>

<!--

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

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

<FONT color=#000000 size=5><B>to Display Current Hex Values</B></FONT>

</FORM><BR>

<TBODY>

<TR>

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

<TR>

<!--

document.write('<DIV ID="text" class="textstyle">text</div>')

//-->

</script>

</TD>

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

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

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

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

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

<!--

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>

</TD></TR>

<TR>

<TD vAlign=top><FONT color=#d0e0c0 size=5><U><B>alink</B></U></FONT></TD>

<FORM name=Alink action=#><INPUT size=9 value="no change"

name=alinkRGB></FORM></TD>

<!--

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>

</TD></TR>

<TR>

<TD vAlign=top><B><FONT size=5 color="#000000">scroll</FONT></B></TD>

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

<!--

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>

</TD></TR>

</TBODY></TABLE>

<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>

by <a href="http://script.omduena.com">The JavaScript Source</a></font>

</center><p>

Click Here if you need help to install the JavaScript

top of page