JS实现简单面向对象的颜色选择器实例
本文实例讲述了JS实现简单面向对象的颜色选择器。分享给大家供大家参考,具体如下:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.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"style="cursor:pointer;background:#ECE9D8"mce_style="cursor:pointer;background:#ECE9D8">'; //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"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; 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"style="position:absolute;left:200px">颜色选择</a> </div> <scripttype="text/javascript"> <!-- functioninitColorPicker(){ picker=newcolorPicker('demo'); } //--> </script> </body> </html>
对于JS颜色工具感兴趣的朋友可参看本站在线工具:
RGB颜色编码生成器
RGB颜色查询对照表_颜色代码表_颜色的英文名称大全
在线网页配色工具
更多关于JavaScript相关内容可查看本站专题:《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。