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

前端技术 2023/09/09 JavaScript

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

本文地址：https://www.stayed.cn/item/24133

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案