js 网页调色板
时间：2011-05-19 来源：amojry
<OBJECT id=dlgHelper CLASSID="clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b" width="0px" height="0px"></OBJECT>
<script>
var tempColor = "FFFFFF";
function returnColor(){
var Hcolor = dlgHelper.ChooseColorDlg(tempColor).toString(16);
with(event.srcElement){
value = ((Hcolor.length<6)?"000000".substring(0,6-Hcolor.length):"") + Hcolor;
style.backgroundColor = ((Hcolor.length<6)?"000000".substring(0,6-Hcolor.length):"") + Hcolor;
}
tempColor = Hcolor
}
</script>
<input type="button" value="FFFFFF" size="12" onclick="returnColor()" style="background-color: #FFFFFF">
method - 2 :
// -------------- color board ----------------//
var ColorHex = new Array('00', '33', '66', '99', 'CC', 'FF')
var SpColorHex = new Array('FF0000', '00FF00', '0000FF', 'FFFF00', '00FFFF', 'FF00FF')
var current = null
function intocolor() {
var colorTable = ''
for (i = 0; i < 2; i++) {
for (j = 0; j < 6; j++) {
colorTable = colorTable + '<tr height=12>'
colorTable = colorTable + '<td width=11 style="background-color:#000000">'
if (i == 0) {
colorTable = colorTable + '<td width=11 style="background-color:#' + ColorHex[j] + ColorHex[j] + ColorHex[j] + '">'
}
else {
colorTable = colorTable + '<td width=11 style="background-color:#' + SpColorHex[j] + '">'
}
colorTable = colorTable + '<td width=11 style="background-color:#000000">'
for (k = 0; k < 3; k++) {
for (l = 0; l < 6; l++) {
colorTable = colorTable + '<td width=11 style="background-color:#' + ColorHex[k + i * 3] + ColorHex[l] + ColorHex[j] + '">'
}
}
}
}
colorTable = '<table width=253 border="0" cellspacing="0" cellpadding="0" style="border:1px #000000 solid;border-bottom:none;border-collapse: collapse" bordercolor="000000">'
+ '<tr height=30><td colspan=21 bgcolor=#cccccc>'
+ '<table cellpadding="0" cellspacing="1" border="0" style="border-collapse: collapse">'
+ '<tr><td width="7"><td><input type="text" name="DisColor" size="36" disabled style="border:solid 1px #000000;background-color:#ffff00"></td>'
//+ '<td width="3"><td><input type="text" name="HexColor" size="7" style="border:inset 1px;font-family:Arial;" value="#000000"></td><td onclick=\'close_borad()\'> X</td></tr></table></td></table>'
+ '<table border="1" cellspacing="0" cellpadding="0" style="border-collapse: collapse" bordercolor="000000" onmouseover="doOver()" onmouseout="doOut()" onclick="doclick()" style="cursor:hand;">'
+ colorTable + '</table>';
colorpanel.innerHTML = colorTable
}
function close_borad() {
colorpanel.style.display = "none";
}
function doOver() {
if ((event.srcElement.tagName == "TD") && (current != event.srcElement)) {
if (current != null) { current.style.backgroundColor = current._background }
event.srcElement._background = event.srcElement.style.backgroundColor
DisColor.style.backgroundColor = event.srcElement.style.backgroundColor
//HexColor.value = event.srcElement.style.backgroundColor.toUpperCase();
event.srcElement.style.backgroundColor = "white"
current = event.srcElement
var clr = event.srcElement._background;
clr = clr.toUpperCase();
if (targetElement) {
targetElement.style.backgroundColor = clr;
}
var idx = String(p_fontstyle).indexOf('color=');
tempColor = clr.substring(1, 7);
p_fontstyle = String(p_fontstyle).substr(0, idx);
p_fontstyle += "color='#" + tempColor + "'>";
show_it();
}
}
function doOut() {
if (current != null) current.style.backgroundColor = current._background.toUpperCase();
}
function doclick() {
if (event.srcElement.tagName == "TD") {
var clr = event.srcElement._background;
clr = clr.toUpperCase();
if (targetElement) {
targetElement.style.backgroundColor = clr;
}
DisplayColorBoard(false);
var idx = String(p_fontstyle).indexOf('color=');
tempColor = clr.substring(1, 7);
p_fontstyle = String(p_fontstyle).substr(0, idx);
p_fontstyle += "color='#" + tempColor + "'>";
show_it();
return clr;
}
}
var targetElement = null;
function OnDocumentClick() {
var srcElement = event.srcElement;
if (srcElement.alt == "colorBoard") {
targetElement = event.srcElement;
DisplayColorBoard(true);
}
else {
while (srcElement && srcElement.id != "colorpanel") {
srcElement = srcElement.parentElement;
}
if (!srcElement) {
DisplayColorBoard(false);
}
}
}
function DisplayColorBoard(display) {
var clrPanel = document.getElementById("colorpanel");
if (display) {
var left = document.body.scrollLeft + event.clientX;
var top = document.body.scrollTop + event.clientY;
if (event.clientX + clrPanel.style.pixelWidth > document.body.clientWidth) {
left -= clrPanel.style.pixelWidth;
}
if (event.clientY + clrPanel.style.pixelHeight > document.body.clientHeight) {
top -= clrPanel.style.pixelHeight;
}
clrPanel.style.pixelLeft = left;
clrPanel.style.pixelTop = top;
clrPanel.style.display = "block";
}
else {
clrPanel.style.display = "none";
}
}
html 中调用..
<divid="colorpanel"style="position:absolute;display:none;width:253px;z-index:1000"></div>
<spanclass="font_color"id="fontcolor_id"alt="colorBoard"onclick='OnDocumentClick()'></span>
document载入的时候要这样:
document.body.onclick = OnDocumentClick;
相关阅读 更多 +
