Js拾色器按钮+文本框

最新推荐文章于 2023-08-23 17:33:33 发布

三碗猪脚

最新推荐文章于 2023-08-23 17:33:33 发布

阅读量1.6k

点赞数 1

文章标签： border function table input button null

<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" οnmοuseοver="doOver()" οnmοuseοut="doOut()" οnclick="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>

三碗猪脚

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Js拾色器按钮+文本框

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("");functi
复制链接

扫一扫