(매우 사용하기 쉽습니다) HTML 색상 선택기 사용 방법

이 기사에서 제공하는 내용은 (매우 사용하기 쉬운) HTML 색상 선택기의 사용법에 대한 것입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

@*以下 是测试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>*@

관련 권장 사항:

HTML 색상 선택기 구현 code_javascript 기술

# 🎜🎜# 5가지 자바스크립트 색상 선택기_javascript 기술

위 내용은 (매우 사용하기 쉽습니다) HTML 색상 선택기 사용 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!