js 网页调色板

<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()\'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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;height:177px;z-index:1000"></div>

<spanclass="font_color"id="fontcolor_id"alt="colorBoard"onclick='OnDocumentClick()'></span>

document载入的时候要这样:

document.body.onclick = OnDocumentClick;

来源：https://www.cnblogs.com/25-to-life/archive/2011/05/19/2050758.html