本篇文章给大家带来的内容是关于（超好用）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 颜色选择器的用法的详细内容。