如何用JS代码实现简单面向对象的颜色选择器

2023-07-04 10:07:40 707人浏览泡泡鱼

摘要

今天小编给大家分享一下如何用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"  mce_ >';  // 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"  mce_ 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" >颜色选择</a></div><script type="text/javascript"><!--function initColorPicker(){ picker = new colorPicker('demo');}// --></script></body></html>

以上就是“如何用JS代码实现简单面向对象的颜色选择器”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网精选频道。

--结束END--

本文标题: 如何用JS代码实现简单面向对象的颜色选择器

本文链接: https://lsjlt.com/news/344104.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341