javascript 颜色选择器

 代表颜色：
<input name="txtColorValue" type="text" id="txtColorValue" class="inputText" onclick="colordialog()" onblur="LoadColor()" style="120px;" />
<input type="text" class="inputText" id="txtExample" style=" 120px; border: 0px; background-color: #e0dfe3" />
        

 <script type="text/javascript">
        function LoadColor() {
            var txtColorValue = $("#txtColorValue");
            if (jQuery.trim(txtColorValue.val()).length == 0) return;
            var pattern = /^#[0-9a-fA-F]{6}$/;
            if (txtColorValue.val().match(pattern) == null) {
                newAlert_Top('非法的颜色值！');
                txtColorValue.focus();
                txtColorValue.val("");
            }
            $("#txtExample").css("backgroundColor", txtColorValue.val());
        }
    </script>

 <script language="javascript">
<!--

        //只有把〈script〉〈/script〉标签放在〈body〉标签内才可以正常使用“其它颜色...”功能

        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;
            ocolorPopup.document.body.blur();
            $("#txtExample").css("backgroundColor", color);
            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();
            $("#txtExample").css("backgroundColor", "#" + sColor.toUpperCase());
        }

        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 + 0, e.offsetTop + e.offsetHeight + 0, 158, 147, document.body);
        }
//-->
    </script>