求一个网页颜色选择器的源码

http://www.wyzu.cn/data/2008/0806/article_32239.html帮你查了一下 去看看吧！

解决方案 »

  1.   

    http://www.aspxhome.com/download/javascript/20078/137116.htm
      

  2.   

    YUI 、Ext 都有这个控件
      

  3.   

    <HTML>
    <HEAD>
    <TITLE> Office 风格颜色选择器</TITLE>
    <META NAME="Generator" CONTENT="EditPlus">
    <META NAME="Author" CONTENT="">
    <META NAME="Keywords" CONTENT="">
    <META NAME="Description" CONTENT="">
    </HEAD><BODY>
    <script language=javascript>
    <!--//夜狼制作 OFFICE风格的色彩选择器document.write("<OBJECT id=\"dlgHelper\" CLASSID=\"clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b\" width=\"0px\" height=\"0px\"></OBJECT>");
    var ocolorPopup = window.createPopup();
    var ecolorPopup=null;function colordialogmouseout(obj){
        obj.style.borderColor="";
        obj.bgColor="";
    }function colordialogmouseover(obj){
        obj.style.borderColor="#0A66EE";
        obj.bgColor="#EEEEEE";
    }function colordialogmousedown(color){
        ecolorPopup.value=color;
        //document.body.bgColor=color;
       // ocolorPopup.document.body.blur();
    ocolorPopup.hide();//这种也可以
    }function colordialogmore(){
        var sColor=dlgHelper.ChooseColorDlg(ecolorPopup.value);
        sColor = sColor.toString(16);
        if (sColor.length < 6) {
            var sTempString = "000000".substring(0,6-sColor.length);
            sColor = sTempString.concat(sColor);
        }
        ecolorPopup.value="#"+sColor.toUpperCase();
        //document.body.bgColor="#"+sColor.toUpperCase();
        ocolorPopup.document.body.blur();
    }function colordialog(){
        var e=event.srcElement;
        e.onkeyup=colordialog;
        ecolorPopup=e;
        var ocbody;
        var oPopBody = ocolorPopup.document.body;
        var colorlist=new Array(40);
        oPopBody.style.backgroundColor = "#f9f8f7";
        oPopBody.style.border = "solid #999999 1px";
        oPopBody.style.fontSize = "12px";    colorlist[0]="#000000";    colorlist[1]="#993300";    colorlist[2]="#333300";    colorlist[3]="#003300";
        colorlist[4]="#003366";    colorlist[5]="#000080";    colorlist[6]="#333399";    colorlist[7]="#333333";    colorlist[8]="#800000";    colorlist[9]="#FF6600";    colorlist[10]="#808000";colorlist[11]="#008000";
        colorlist[12]="#008080";colorlist[13]="#0000FF";colorlist[14]="#666699";colorlist[15]="#808080";    colorlist[16]="#FF0000";colorlist[17]="#FF9900";colorlist[18]="#99CC00";colorlist[19]="#339966";
        colorlist[20]="#33CCCC";colorlist[21]="#3366FF";colorlist[22]="#800080";colorlist[23]="#999999";    colorlist[24]="#FF00FF";colorlist[25]="#FFCC00";colorlist[26]="#FFFF00";colorlist[27]="#00FF00";
        colorlist[28]="#00FFFF";colorlist[29]="#00CCFF";colorlist[30]="#993366";colorlist[31]="#CCCCCC";    colorlist[32]="#FF99CC";colorlist[33]="#FFCC99";colorlist[34]="#FFFF99";colorlist[35]="#CCFFCC";
        colorlist[36]="#CCFFFF";colorlist[37]="#99CCFF";colorlist[38]="#CC99FF";colorlist[39]="#FFFFFF";    ocbody = "";
        ocbody += "<table CELLPADDING=0 CELLSPACING=3>";
        ocbody += "<tr height=\"20\" width=\"20\"><td align=\"center\"><table style=\"border:1px solid #808080;\" width=\"12\" height=\"12\" bgcolor=\""+e.value+"\"><tr><td></td></tr></table></td><td bgcolor=\"eeeeee\" colspan=\"7\" style=\"font-size:12px;\" align=\"center\">当前颜色</td></tr>";
        for(var i=0;i<colorlist.length;i++){
            if(i%8==0)
                ocbody += "<tr>";
            ocbody += "<td width=\"14\" height=\"16\" style=\"border:1px solid;\" onMouseOut=\"parent.colordialogmouseout(this);\" onMouseOver=\"parent.colordialogmouseover(this);\" onMouseDown=\"parent.colordialogmousedown('"+colorlist[i]+"')\" align=\"center\" valign=\"middle\"><table style=\"border:1px solid #808080;\" width=\"12\" height=\"12\" bgcolor=\""+colorlist[i]+"\"><tr><td></td></tr></table></td>";
            if(i%8==7)
                ocbody += "</tr>";
        }
        ocbody += "<tr><td align=\"center\" height=\"22\" colspan=\"8\" onMouseOut=\"parent.colordialogmouseout(this);\" onMouseOver=\"parent.colordialogmouseover(this);\" style=\"border:1px solid;font-size:12px;cursor:default;\" onMouseDown=\"parent.colordialogmore()\">其它颜色</td></tr>";
        ocbody += "</table>";    oPopBody.innerHTML=ocbody;
        ocolorPopup.show(e.offsetLeft, e.offsetTop+e.offsetHeight, 158, 147, document.body);
    }
    //-->
    </script>
    选择颜色：<input name="sel1" type="text" onFocus="colordialog()"></BODY>
    </HTML>