(Super easy to use) How to use the html color selector

The content this article brings to you is about the usage of the (super easy to use) html color selector. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

@*以下 是测试html 颜色选择器的*@
@*<a href="#" mce_href="#" 
onclick="initColorPicker(&#39;demo&#39;); return false" id="demo" 
style="position:absolute;left:200px">颜色选择</a>*@
<!-- Color Picker -->
@*<script type="text/JavaScript">
        var colorPicker = function (idStr) {

            this.colorPool = ["#000000", "#993300", "#333300", 
"#003300", "#003366", "#000080", "#333399", "#333333", "#800000", 
"#FF6600", "#808000", "#008000", "#008080", "#0000FF", "#666699", 
"#808080", "#FF0000", "#FF9900", "#99CC00", "#339966", "#33CCCC", 
"#3366FF", "#800080", "#999999", "#FF00FF", "#FFCC00", "#FFFF00", 
"#00FF00", "#00FFFF", "#00CCFF", "#993366", "#CCCCCC", "#FF99CC", 
"#FFCC99", "#FFFF99", "#CCFFCC", "#CCFFFF", "#99CCFF", "#CC99FF", 
"#FFFFFF"];
            this.initialize(idStr);
        }
        colorPicker.prototype = {
            initialize: function (idStr) {
                var count = 0;
                var html = &#39;&#39;;
                var self = this;

                html += &#39;<table cellspacing="5" cellpadding="0" 
border="2" bordercolor="#000000" 
style="cursor:pointer;background:#ECE9D8" 
mce_style="cursor:pointer;background:#ECE9D8" >&#39;;
               
 // html+= &#39;<tr><td align="center" colspan="8" width="160" 
height="20" id="currentColor" 
bgcolor="#ffffff">当前颜色</td></tr>&#39;;
                for (i = 0; i < 5; i++) {
                    html += "<tr>";
                    for (j = 0; j < 8; j++) {

                        html += &#39;<td align="center" width="20" 
height="20" style="background:&#39; + this.colorPool[count] + &#39;" 
mce_style="background:&#39; + this.colorPool[count] + &#39;" 
unselectable="on"> </td>&#39;;
                        count++;
                    }
                    html += "</tr>";
                }
                html += &#39;</table>&#39;;
                this.trigger = document.getElementById(idStr);
                this.p = document.createElement(&#39;p&#39;);
                this.p.innerHTML = html;
                var tds = this.p.getElementsByTagName(&#39;td&#39;);
                for (var i = 0, l = tds.length; i < l; i++) {
                    tds[i].onclick = function () {
                        self.setColor(this.style.backgroundColor, idStr);
                    }
                }
                this.p.id = &#39;myColorPicker&#39;;
                this.trigger.parentNode.appendChild(this.p);
                this.p.style.position = &#39;absolute&#39;;
                this.p.style.left = this.trigger.offsetLeft + &#39;px&#39;
                this.p.style.top = (this.trigger.clientHeight + this.trigger.offsetTop) + &#39;px&#39;;
                //this.hide();
                this.trigger.onclick = function () {
                    if (self.p.style.display == &#39;none&#39;) {
                        self.show();
                        return false;
                    } else {
                        self.hide();
                        return false;
                    }
                }
            },
            setColor: function (c, idStr) {
                this.hide();
                // document.getElementById(idStr).style.backgroundColor = c //proEditor.setColor(c); //自己定义函数决定setColor的功能
                document.getElementById(idStr).style.color = c
                //var rgb2Hex = colorRGB2Hex(c);
                //alert(rgb2Hex);
            },
            hide: function () {
                this.p.style.display = &#39;none&#39;
            },
            show: function () {
                this.p.style.display = &#39;block&#39;
            }
        }
        function initColorPicker(str) {
            picker = new colorPicker(str);
        }
        function colorRGB2Hex(color) {
            var rgb = color.split(&#39;,&#39;);
            var r = parseInt(rgb[0].split(&#39;(&#39;)[1]);
            var g = parseInt(rgb[1]);
            var b = parseInt(rgb[2].split(&#39;)&#39;)[0]);
var hex = "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
            return hex;
        }
    </script>*@

Related recommendations:

HTML color picker implementation code_javascript skills

5 Javascript color pickers_ javascript skills

The above is the detailed content of (Super easy to use) How to use the html color selector. For more information, please follow other related articles on the PHP Chinese website!