graphic-javascript-effect-color-show-effect.htm / htm
<!-- 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 --> <!-- STEP ONE: Paste this code into the HEAD of your HTML document --> <HEAD> <!-- This script and many more are available free online at --> <!-- The JavaScript Source!! http://javascript.internet.com --> <!-- Original: Randall Goya (rgoya@yahoo.com ) --> <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.") } }
(C) Æliens 20/2/2008
You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.