JS实现简单面向对象的颜色选择器实例

本文实例讲述了JS实现简单面向对象的颜色选择器。分享给大家供大家参考，具体如下：

<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>Untitled Document</title></head><body><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.div = document.createElement（"div"）;this.div.innerHTML = html;var tds = this.div.getElementsByTagName（"td"）;for（var i=0,l=tds.length;i<l;i++）{ tds[i].onclick = function（）{self.setColor（this.style.backgroundColor）; }}this.div.id = "myColorPicker";this.trigger.parentNode.appendChild（this.div）;this.div.style.position = "absolute";this.div.style.left = this.trigger.offsetLeft + "px"this.div.style.top = （this.trigger.clientHeight + this.trigger.offsetTop）+ "px";//this.hide（）;this.trigger.onclick = function（）{ if（self.div.style.display == "none"）{self.show（）;return false; }else{self.hide（）;return false; }} }, setColor : function（c）{this.hide（）;document.getElementById（"demo"）.style.backgroundColor = c //proEditor.setColor（c）; //自己定义函数决定setColor的功能 }, hide : function（）{this.div.style.display = "none" }, show : function（）{this.div.style.display = "block" }}// --></script><div ><a href="#" mce_href="#" onclick="initColorPicker（）;return false" id="demo" style="position:absolute;left:200px">颜色选择</a></div><script type="text/javascript"><！--function initColorPicker（）{ picker = new colorPicker（"demo"）;}// --></script></body></html>

对于JS颜色工具感兴趣的朋友可参看本站在线工具：
RGB颜色编码生成器

RGB颜色查询对照表_颜色代码表_颜色的英文名称大全

在线网页配色工具

更多关于JavaScript相关内容可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。