如何用JS代码实现简单面向对象的颜色选择器
今天主机评测网小编给大家分享一下如何用JS代码实现简单面向对象的颜色选择器的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
具体代码如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>UntitledDocument</title></head><body><scripttype="text/JavaScript"><!--varcolorPicker=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){varcount=0;varhtml='';varself=this;html+='<tablecellspacing="5"cellpadding="0"border="2"bordercolor="#000000"mce_>';//html+='<tr><tdalign="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+='<tdalign="center"width="20"height="20"mce_unselectable="on"></td>';count++;}html+="</tr>";}html+='</table>';this.trigger=document.getElementById(idStr);this.div=document.createElement('div');this.div.innerHTML=html;vartds=this.div.getElementsByTagName('td');for(vari=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();returnfalse;}else{self.hide();returnfalse;}}},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><ahref="#"mce_href="#"onclick="initColorPicker();returnfalse"id="demo">颜色选择</a></div><scripttype="text/javascript"><!--functioninitColorPicker(){picker=newcolorPicker('demo');}//--></script></body></html>以上就是“如何用JS代码实现简单面向对象的颜色选择器”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注主机评测网行业资讯频道。
下一篇：怎么用纯JS实现轻量化图片编辑器
声卡驱动正常但是没有声音如何办？声卡驱动正常没声音的解决方法
英伟达显卡驱动如何退回到原来版本？英伟达显卡驱动退回到原来版
重装系统，电脑只有一个C盘如何创建分区
Defender提示错误应用程序MsMpEng.exe无法启动
电脑无法启动或仍在加载如何办？电脑无法启动或仍在加载的解决方
打印机驱动如何卸载删除？卸载打印机驱动干净的教程
电脑没网如何安装网卡驱动？教你没网如何安装网卡驱动的方法
系统32位和62位如何选择：详解它们之间的差异
电脑文件删不掉如何办？四种方法解决
任务管理器快捷键有哪些？任务管理器快捷键大全