Js拾色器 按钮+文本框
来源：互联网 发布：安装软件电脑跳出是否 编辑：程序博客网 时间：2024/05/11 03:10
<html><body><div> <input type="text" id="txtColor"/> <input type="button" value="Open" onClick="intocolor()"/></div></body></html><script language="javascript">var ColorHex = new Array('00', '33', '66', '99', 'CC', 'FF');var SpColorHex = new Array('FF0000', '00FF00', '0000FF', 'FFFF00', '00FFFF', 'FF00FF');var current = null;document.write("<div id=\"colorpanel\"></div>");function intocolor(){ document.getElementById("colorpanel").style.display = "block"; 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="3"><td><input type="text" name="DisColor" size="6" 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></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 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; event.srcElement.style.backgroundColor = "white"; current = event.srcElement; }}function doOut(){ if (current != null) { current.style.backgroundColor = current._background; }}function doclick(){ if (event.srcElement.tagName == "TD") { //event.srcElement._background------当前选择的颜色 document.getElementById('txtColor').value = event.srcElement._background; //return event.srcElement._background; document.getElementById("colorpanel").style.display="none"; }}</script>
