87,910
社区成员
发帖
与我相关
我的任务
分享帮忙修改一下这段代码
<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>
从CSDN下了一个拾色器，修改了一小部分，拾色以后将颜色代码值赋给一个文本框，可以拾色，但是我想把JS作为一个单独的文件，所以调用的时候就需要把文本框的ID传进去，
我将其中intocolor()函数改为intocolor(ctrl),其中ctrl为文本框控件ID
将onclick="doclick();"修改为onclick="doclick('ctrl');"
将函数doclick()修改为doclick(ctrl)
将document.getElementById('txtColor').value 修改为 document.getElementById(ctrl).value
但是没有达到目的，请懂行的大哥帮改一下，万分感谢，在线等。。。
...全文
请发表友善的回复…
发表回复
hch126163 2012-04-06
- 打赏
- 举报
解决ＩＥ 坐标错位
<!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>
<title>js 颜色对话框</title>
</head>
<body>
<div>
<input type="text" id="txtColor"/>
<div style="">页面其它内容</div>
<input type="text" id="txtColor1"/>
</div>
</body>
</html>
<script language="javascript">
window.onload=function(){
new _ColorPanel("txtColor");
new _ColorPanel("txtColor1");
};
function _ColorPanel(txt)
{
this.txt = typeof(txt)=='string' ?document.getElementById(txt):txt;
this.ColorHex = new Array('00', '33', '66', '99', 'CC', 'FF');
this.SpColorHex = new Array('FF0000', '00FF00', '0000FF', 'FFFF00', '00FFFF', 'FF00FF');
this.current = null;
this.DisColor=null;
this.HexColor=null;
this.colorpanel=null;
var obj = this;
obj.txt.onclick =function(){ obj.intocolor.call(obj)};
}
_ColorPanel.prototype.intocolor=function()
{
var obj = this;
if(obj.colorpanel==null)
{
obj.colorpanel = document.createElement("div");
var p =getAbsPoint(obj.txt);
obj.colorpanel.style.cssText="position:absolute; z-index:9999;top:"+(p.y+obj.txt.offsetHeight)+"px;left:"+p.x+"px;";
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:#' + obj.ColorHex[j] + obj.ColorHex[j] + obj.ColorHex[j] + '">';
}
else
{
colorTable = colorTable + '<td width=11 style="background-color:#' + obj.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:#' + obj.ColorHex[k + i * 3] + obj.ColorHex[l] + obj.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" size="6" disabled style="border:solid 1px #000000;background-color:#ffff00"></td>'
+ '<td width="3"><td><input type="text" size="15" 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" style="cursor:pointer;">'
+ colorTable + '</table>';
obj.colorpanel.innerHTML = colorTable;
document.body.appendChild(obj.colorpanel);
setTimeout(function(){
var inps = obj.colorpanel.getElementsByTagName("input");
obj.DisColor=inps[0];
obj.HexColor=inps[1];
var tables = obj.colorpanel.getElementsByTagName("table");
var table=tables[tables.length-1];
table.onclick=function(e){obj.doclick.call(obj,e);};
table.onmouseout=function(e){obj.doOut.call(obj,e);};
table.onmouseover=function(e){obj.doOver.call(obj,e);};
},200);
}else{
obj.colorpanel.style.display = "block";
}
}
_ColorPanel.prototype.doOver=function(e)
{
var obj = this;
e=e||event;
e=e.srcElement||e.target;
if ((e.tagName == "TD") && (obj.current != e))
{
if (obj.current != null)
{
obj.current.style.backgroundColor = obj.current._background;
}
e._background = e.style.backgroundColor;
obj.DisColor.style.backgroundColor = e.style.backgroundColor;
obj.HexColor.value = e.style.backgroundColor;
e.style.backgroundColor = "white";
obj.current = e;
}
}
_ColorPanel.prototype.doOut=function(e)
{
var obj = this;
if (obj.current != null)
{
obj.current.style.backgroundColor = obj.current._background;
}
}
_ColorPanel.prototype.doclick=function(e)
{
var obj = this;
e=e||event;
e=e.srcElement||e.target;
if (e.tagName == "TD")
{
obj.txt.value = e._background;
obj.colorpanel.style.display="none";
}
}
function getAbsPoint(e)
{
var x = e.offsetLeft;
var y = e.offsetTop;
while(e = e.offsetParent)
{
x += e.offsetLeft;
y += e.offsetTop;
}
return {"x": x, "y": y};
}
</script>
hch126163 2012-04-06
- 打赏
- 举报
<!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></head>
<body>
<div>
<input type="text" id="txtColor"/>
<div style="">页面其它内容</div>
<input type="text" id="txtColor1"/>
</div>
</body>
</html>
<script language="javascript">
window.onload=function(){
new _ColorPanel("txtColor");
new _ColorPanel("txtColor1");
};
function _ColorPanel(txt)
{
this.txt = typeof(txt)=='string' ?document.getElementById(txt):txt;
this.ColorHex = new Array('00', '33', '66', '99', 'CC', 'FF');
this.SpColorHex = new Array('FF0000', '00FF00', '0000FF', 'FFFF00', '00FFFF', 'FF00FF');
this.current = null;
this.DisColor=null;
this.HexColor=null;
this.colorpanel=null;
var obj = this;
obj.txt.onclick =function(){ obj.intocolor.call(obj)};
}
_ColorPanel.prototype.intocolor=function()
{
var obj = this;
if(obj.colorpanel==null)
{
obj.colorpanel = document.createElement("div");
obj.colorpanel.style.cssText="position:absolute; z-index:9999;top:"+(obj.txt.offsetTop+obj.txt.offsetHeight)+"px;left:"+obj.offsetLeft+"px;";
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:#' + obj.ColorHex[j] + obj.ColorHex[j] + obj.ColorHex[j] + '">';
}
else
{
colorTable = colorTable + '<td width=11 style="background-color:#' + obj.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:#' + obj.ColorHex[k + i * 3] + obj.ColorHex[l] + obj.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" size="6" disabled style="border:solid 1px #000000;background-color:#ffff00"></td>'
+ '<td width="3"><td><input type="text" size="15" 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" style="cursor:pointer;">'
+ colorTable + '</table>';
obj.colorpanel.innerHTML = colorTable;
document.body.appendChild(obj.colorpanel);
setTimeout(function(){
var inps = obj.colorpanel.getElementsByTagName("input");
obj.DisColor=inps[0];
obj.HexColor=inps[1];
var tables = obj.colorpanel.getElementsByTagName("table");
var table=tables[tables.length-1];
table.onclick=function(e){obj.doclick.call(obj,e);};
table.onmouseout=function(e){obj.doOut.call(obj,e);};
table.onmouseover=function(e){obj.doOver.call(obj,e);};
},200);
}else{
obj.colorpanel.style.display = "block";
}
}
_ColorPanel.prototype.doOver=function(e)
{
var obj = this;
e=e||event;
e=e.srcElement||e.target;
if ((e.tagName == "TD") && (obj.current != e))
{
if (obj.current != null)
{
obj.current.style.backgroundColor = obj.current._background;
}
e._background = e.style.backgroundColor;
obj.DisColor.style.backgroundColor = e.style.backgroundColor;
obj.HexColor.value = e.style.backgroundColor;
e.style.backgroundColor = "white";
obj.current = e;
}
}
_ColorPanel.prototype.doOut=function(e)
{
var obj = this;
if (obj.current != null)
{
obj.current.style.backgroundColor = obj.current._background;
}
}
_ColorPanel.prototype.doclick=function(e)
{
var obj = this;
e=e||event;
e=e.srcElement||e.target;
if (e.tagName == "TD")
{
obj.txt.value = e._background;
obj.colorpanel.style.display="none";
}
}
</script>
三碗猪脚 2012-04-05
- 打赏
- 举报
http://download.csdn.net/detail/evasunny2008/3527154
