帮忙修改一下这段代码

本帖最后由 rovecat 于 2012-04-05 20:14:30 编辑

解决方案 »

  1.   

    http://download.csdn.net/detail/evasunny2008/3527154
      

  2.   


    <!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>
      

  3.   

    解决ＩＥ　坐标错位<!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>