html顏色選擇器如何實現(xiàn)

這篇文章給大家分享的是有關(guān)html顏色選擇器如何實現(xiàn)的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。

@*以下 是測試html 顏色選擇器的*@
@*<a href="#" mce_href="#" 
onclick="initColorPicker('demo'); 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 = '';
                var self = this;

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

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

感謝各位的閱讀！關(guān)于html顏色選擇器如何實現(xiàn)就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！