Set a background color from the color picker using JavaScript
In this article, I
have set background color from the color picker using java script .Many times
we want to change the background our background by own self
Source Code:-
<%@
Page Language="C#" AutoEventWireup="true" CodeFile="colorbackgroup.aspx.cs" Inherits="colorbackgroup"
%>
<!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 runat="server">
<title></title>
<script type="text/javascript">
function
clicked(gg, rr, bb) {
var
hex = '#' + deciToHex(gg) + deciToHex(rr) +
deciToHex(bb);
document.body.style.backgroundColor
= hex;
//
document.getElementById('tbprev').style.backgroundColor=hex;
}
function
getHexNum(num) {
ar1 = new
Array('0', '1',
'2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15');
ar2 = new
Array('0', '1',
'2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F');
if
(num > 15)
return
num;
else
{
red = ar2[num];
return
red;
}
}
function
deciToHex(arg) {
res2 = 999;
args = arg;
while
(args > 15) {
arg1 = parseInt(args / 16);
arg2 = args % 16;
arg2 = getHexNum(arg2);
args = arg1;
if
(res2 == 999)
res2 = arg2.toString();
else
res2 = arg2.toString() +
res2.toString();
}
if
(args < 16 && res2 != 999) {
def = getHexNum(args);
res2 = def + res2.toString();
}
else
if (res2 == 999) {
if (args
< 16)
res2 = getHexNum(args);
else
res2 = 1;
}
if
(res2.length == 1)
res2 = "0"
+ res2;
return
res2;
}
</script>
</head>
<body>
<style type="text/css">
.tab{border: 1px inset black; background-color: black;}
</style>
<form name=colchanger>
<table style="width:100%;" id='tbprev'>
<tr><td>
<table class=tab cellpadding=0 cellspacing=0>
<script type="text/javascript">
for (i = 0;
i <= 256; i += 18) {
if (i
== 252) i = 255;
document.write("<tr>");
for (j
= 0; j <= 256; j = j + 51) {
for
(k = 0; k <= 256; k = k + 51) {
document.write("<td onclick='clicked(" + i + "," + j + ","
+ k + ")' \
style=\"border: 1px
inset black; width:10px; \
height: 3px; font-size: 6px;
background-color: rgb(" + i + ","
+ j + "," + k + ");\"" + ">
</td>");
}
}
document.write("</tr>");
}
</script>
</table>
</td></tr>
</table>
</form>
</body>
</html>
Out-Put:-
For more:-
Set a background color from the color picker using JavaScript
Reviewed by NEERAJ SRIVASTAVA
on
10:26:00 AM
Rating:
Reviewed by NEERAJ SRIVASTAVA
on
10:26:00 AM
Rating:
No comments: