本篇文章给大家带来的内容是关于（超好用）html 颜色选择器的用法，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
@*以下 是测试html 颜色选择器的*@@*颜色选择*@@* 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 += ''; // html+= '| 当前颜色 |
'; for (i = 0; i < 5; i++) { html += ""; for (j = 0; j < 8; j++) { html += '| | '; count++; } html += "
"; } html += '
'; 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; } *@
相关推荐：
HTML颜色选择器实现代码_javascript技巧
5款Javascript颜色选择器_javascript技巧
以上就是（超好用）html 颜色选择器的用法的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1546592.html
微信扫一扫 
支付宝扫一扫 
