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程序设计有所帮助。