Example : choose the color you want by its name, or create a unique color by
using the "+" and "-" with the Red-Green-Blue buttons.
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<title> Background effect </title>
<script language="javascript">
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
}
</script>
</head>
<body>
<center>
<h3> choose the color you want by its name, or create
a unique color by using the "+" and "-" with the
Red-Green-Blue buttons. </h3>
<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('#336600')"></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>
<td
align=center><input type="button" value="yellow"
onclick="changebackground('#ffff00')"></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>
</body>
</html>
No comments:
Post a Comment