如何通过JS实现面向对象的颜色选择器?

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