今天小编给大家分享一下如何用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代码实现简单面向对象的颜色选择器”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
