JavaScript helps you manipulate the background of the document. Either choose the color you want by its name, or create a unique color by using the “+” and “-” Red, Green, and Blue buttons. A really neat effect.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 | /******************************************************* * MYCPLUS Sample Code - https://www.mycplus.com * * * * This code is made available as a service to our * * visitors and is provided strictly for the * * purpose of illustration. * * * * Please direct all inquiries to saqib at mycplus.com * *******************************************************/ <!-- TWO STEPS TO INSTALL COLOR TABLE: 1. Paste the designated script into the HEAD of your HTML document 2. Add the code into the BODY of your HTML document --> <!-- STEP ONE: Paste this script into the HEAD of your HTML document --> <head> <script LANGUAGE="JavaScript"> <!--Total Java Scripts 99 - Next Step Software--> <!-- Begin function changeBackground(hexNumber) { document.bgColor=hexNumber } prefix="#" rnum1=0 bnum1=0 gnum1=0 rnum2=0 bnum2=0 gnum2=0 hexNumber2="#000000"; rcount=0; bcount=0; gcount=0; function num2hex(num) { if (num==15) return "f"; else if (num==14) return "e"; else if (num==13) return "d"; else if (num==12) return "c"; else if (num==11) return "b"; else if (num==10) return "a"; else if (num==9) return "9"; else if (num==8) return "8"; else if (num==7) return "7"; else if (num==6) return "6"; else if (num==5) return "5"; else if (num==4) return "4"; else if (num==3) return "3"; else if (num==2) return "2"; else if (num==1) return "1"; else return "0"; } function changeBackground2(number) { if(number == 1) { rnum1=rcount%16; if (rcount <15) { rcount=rcount+1; } } if(number == 2) { gnum1=gcount%16; if (gcount <15) { gcount=gcount+1; } } if(number == 3) { bnum1=bcount%16; if (bcount <15) { bcount=bcount+1; } } if(number == 4) { rnum1=rcount%16; if (rcount > 0) { rcount=rcount-1; } } if(number == 5) { gnum1=gcount%16; if (gcount > 0) { gcount=gcount-1; } } if(number == 6) { bnum1=bcount%16; if (bcount > 0) { bcount=bcount-1; } } hexNumber2 = prefix+num2hex(rnum1)+num2hex(rnum2)+num2hex(gnum1)+num2hex(gnum2)+num2hex(bnum1)+num2hex(bnum2); document.bgColor=hexNumber2 } // End --> </script> <!-- STEP TWO: Add this code to the BODY of your HTML document --> <body> <center> <form METHOD="POST" NAME="background"> <table WIDTH=350 BORDER="3" CELLPADDING="3"> <tr> <td Align=center><input TYPE="button" VALUE="Red" ONCLICK="changeBackground('#FF0000')"></td> <td Align=center><input TYPE="button" VALUE="Green" ONCLICK="changeBackground('#00FF00')"></td> <td Align=center><input TYPE="button" VALUE="Blue" ONCLICK="changeBackground('#0000FF')"></td> <td Align=center><input TYPE="button" VALUE="White" ONCLICK="changeBackground('#FFFFFF')"></td> <td Align=center><input TYPE="button" VALUE="Black" ONCLICK="changeBackground('#000000')"></td> <td Align=center><input TYPE="button" VALUE="Grey" ONCLICK="changeBackground('#C0C0C0')"></td> </tr> </table> <table WIDTH=350 BORDER="3" CELLPADDING="3"> <tr><td><center>Variable Background Color Changer</center></td> </tr> </table> <table WIDTH=350 BORDER="3" CELLPADDING="3"> <tr> <td Align=center><input TYPE="button" VALUE="+ Red" ONCLICK="changeBackground2(1)"><p> <input TYPE="button" VALUE="- Red" ONCLICK="changeBackground2(4)"></td> <td Align=center><input TYPE="button" VALUE="+ Green" ONCLICK="changeBackground2(2)"><p> <input TYPE="button" VALUE="- Green" ONCLICK="changeBackground2(5)"></td> <td Align=center><input TYPE="button" VALUE="+ Blue" ONCLICK="changeBackground2(3)"><p> <input TYPE="button" VALUE="- Blue" ONCLICK="changeBackground2(6)"></td> </tr> </table> <table WIDTH=350 BORDER="3" CELLPADDING="3"> <tr> <td><center>Keep pressing buttons to change color<br /> (The color will start as black)</center></td> </tr> </table> </form> </center> <!-- Script Size: 3.44 KB --> |
