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

2019-11-20 10:14:07

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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程序设计有所帮助。

上一篇：解决JS组件bootstrap table分页实现过程中遇到的问题

下一篇：javascript常见数字进制转换实例分析