Full version: jsB@nk » Utility » Generator » The Ultimate Original JavaScript ColorShow
URL: https://www.javascriptbank.com/the-ultimate-original-javascript-colorshow.html
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.
Full version: jsB@nk » Utility » Generator » The Ultimate Original JavaScript ColorShow
URL: https://www.javascriptbank.com/the-ultimate-original-javascript-colorshow.html
<script language="javascript" type="text/javascript"><!--var rnum//single digit hexadecimal numbervar count=0//counter for changeColor() while loopvar color=""//full 6 digit hexadecimal numbervar rawRGB//raw RGB value before conversion to hexvar 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 onvar slip=0//flag set by slipChange() to change colors independentlyvar 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 stoppedvar netColor//passes browser-safe palette values from safeColor() to changeColor()var el=""//tells setRGB() which element user is changingvar 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 colorsvar linkClick=0timerTEXT=setTimeout("",1)//initialize timers for slipChange() independent change functiontimerLINK=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 codestop=0count=0color=""while (count<6){count++newHex()color=color+rnum}if (safe){//round to web-safe palette valuessafeColor(color)color=netColor}}function newHex(){//returns "rnum" - a random single digit hexadecimal between 0-15if (MathRandom){//use Math.random() if possiblerawRGB = Math.floor(Math.random()*16)}else if (!MathRandom){noRand()}//alternate random methodif (rawRGB==10){rnum="a"}//Convert to Hexadecimalelse 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 browsersvar today=new Date()var msec=today.getMilliseconds()rawRGB=Math.round(Math.abs(Math.sin(msec))*10000000)%16return rawRGB}function timeChange(){//calls value-changing functions recursively with timerif ((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=1000timerID=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 offif (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 inputspeed=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 numberif ((test<=0) | (test=="NaN")){//check for valid inputalert("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" flagif (!safe){//if change function is stopped, convert & display web-safe valuescolor=window.document.bgColorsafeColor(color)window.document.bgColor=netColorcolor=window.document.fgColorsafeColor(color)window.document.fgColor=netColorcolor=window.document.linkColorsafeColor(color)window.document.linkColor=netColorcolor=window.document.vlinkColorsafeColor(color)window.document.vlinkColor=netColorwindow.document.body.style.scrollbarBaseColor=netColor}if (stop) showRGB()if (slip) showRGB()safe=1}function safeColor(color){//round to web-safe palette valuesvar oneDigit=0//single digit of hex value pairvar 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 ordervar digit=0//counter to cycle through both digit substrings of each colorvar nan=0//hex letter numeric value for addition of substringsvar colorName=""//used with "digit" to call individual substringsif (color.substring(0,1)=="#"){color=color.substring(1,7)}//strip # if present//split into individual digits, keeping rgb and place infovar 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 valueswhile (eachColor<3){//loop through red, green, blueeachColor++digit=0oneColor=""while (digit<2){//loop through both single digit substrings for each colordigit++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 valuesif (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 0rgb=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 colornan=0}}//round to web-safe values - one color at a timeif (oneColor>=0 && oneColor<26){oneColor="00"}//must be string "00" - 00 evaluates as 0else 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 valuechangeColor()window.document.bgColor="#" + color}function changeText(){//sets text color to new valuechangeColor()window.document.fgColor="#" + colortextcolor=window.document.fgColor}function changeLink(){//sets link color to new valuechangeColor()window.document.linkColor="#" + color}function changeVlink(){//sets vlink color to new valuechangeColor()window.document.vlinkColor="#" + color}/*** THE ALINK COLOR CANNOT BE CHANGED DYNAMICALLY ONCE THE DOCUMENT IS LOADED!!!*/function changeScroll(){//sets scrollbar color to new valuechangeColor()window.document.body.style.scrollbarBaseColor = "#" + color;}function showRGB(){//sends RGB values to the display boxeswindow.document.forms.Bg.bgRGB.value=window.document.bgColorwindow.document.forms.Text.textRGB.value=window.document.fgColorwindow.document.forms.Link.linkRGB.value=window.document.linkColorwindow.document.forms.Vlink.vlinkRGB.value=window.document.vlinkColorwindow.document.forms.Scroll.scrollRGB.value=window.document.body.style.scrollbarBaseColor;}function clearRGB(){//clears display boxeswindow.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 valuesclearTimeout(timerID)stop=1if (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-Fi=0j=1val=0//if val=1, proceed; else, prompt for valid inputif (textVal.substring(i,j)!="#"){textVal="#" + textVal}//add # if it's not there alreadywhile (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=0j=textVal.length//on error, stop validating and alertalert ("input a valid hex color scheme - 6 characters using 0-9 and a-f (eg 3399ff)")}}}function setAll(){clearTimeout(timerID)stop=1showRGB()getBG()showRGB()getText()showRGB()getLink()showRGB()getVlink()showRGB()getScroll()showRGB()window.document.forms.Alink.alinkRGB.focus()}function getBG(){//user inputs BG colortextVal=prompt("Input new BG Color",window.document.bgColor)if (textVal==null) textVal=window.document.bgColorvalHex(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 inputcolor=textVal.substring(1,7)safeColor(color)textVal=netColor}window.document.bgColor=textVal}else{//if invalid, check if user wants to cancelif (confirm("Change the BG?")){getBG()}}}function getText(){//user inputs TEXT colorvar textVal=prompt("Input new TEXT Color",window.document.fgColor)if (textVal==null) textVal=window.document.fgColorvalHex(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 inputcolor=textVal.substring(1,7)safeColor(color)textVal=netColor}document.fgColor=textVal}else{//if invalid, check if user wants to cancelif (confirm("Change the TEXT?")){getText()}}}function getLink(){//user inputs LINK colortextVal=prompt("Input new LINK Color",window.document.linkColor)if (textVal==null) textVal=window.document.linkColorvalHex(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 inputcolor=textVal.substring(1,7)safeColor(color)textVal=netColor}window.document.linkColor=textVal}else{//if invalid, check if user wants to cancelif (confirm("Change the LINKS?")){getLink()}}}function getVlink(){//user inputs VLINK colortextVal=prompt("Input new VLINK Color",window.document.vlinkColor)if (textVal==null) textVal=window.document.vlinkColorvalHex(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 inputcolor=textVal.substring(1,7)safeColor(color)textVal=netColor}window.document.vlinkColor=textVal}else{//if invalid, check if user wants to cancelif (confirm("Change the VLINKS?")){getVlink()}}Alink.alinkRGB.focus()}function getScroll(){//user inputs SCROLLBAR colortextVal=prompt("Input new SCROLLBAR Color",window.document.body.style.scrollbarBaseColor)if (textVal==null) textVal=window.document.body.style.scrollbarBaseColorvalHex(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 inputcolor=textVal.substring(1,7)safeColor(color)textVal=netColor}window.document.body.style.scrollbarBaseColor=textVal}else{//if invalid, check if user wants to cancelif (confirm("Change the SCROLLBAR?")){getScroll()}}Alink.alinkRGB.focus()}function checkApp(){//check if browser can use Math.random() methodvar appName=navigator.appNamevar 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=1timeChange()}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--><BODY onload="timeChange(),Alink.alinkRGB.focus()"><center><script language="javascript" type="text/javascript"><!--checkApp()//check if browser is Netscape Navigatorif (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><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 browsersdocument.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 functiondocument.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 browsersdocument.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-->