Phiên bản đầy đủ: jsB@nk » Ứng dụng » Công cụ xuất » Các đối tượng đổi màu
URL: https://www.javascriptbank.com/the-ultimate-original-javascript-colorshow.html
Đoạn mã có thể làm cho các đối tượng như nền, thanh trượt, văn bản, liên kết... tự động đổi màu liên tục với các phương thức khác nhau.
Phiên bản đầy đủ: jsB@nk » Ứng dụng » Công cụ xuất » Các đối tượng đổi màu
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-->