（超好用）html 颜色选择器的用法

@*以下 是测试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">当前颜色</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); //自己定义函数决定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>*@

相关推荐：

HTML颜色选择器实现代码_javascript技巧

5款Javascript颜色选择器_javascript技巧

以上就是（超好用）html 颜色选择器的用法的详细内容，更多内容请关注技术你好其它相关文章！