This article describes the implementation of a simple object-oriented color selector by JS. Share it for your reference, as follows:
<!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","#3333333","#800000","#FF6600","#808000","#008080","#0000FF","#666699","#808080","#FF0000","#FF9900","#99CC00","#339966", "#33CCCC","#3366FF","#800080","#9999999","#FF00FF","#FFCC00","#FFF00","#00FF00","#00FFFF","#00CCFF","#993366","#CCCCCC","#FF99CC","#FFCC99","#FFF99","#CCFCCCC","#CCFF99","#CCFFCC","#CCFFF","#CCFFFF","#99CCFF","#CC99FF","#FFFFF"]; this.initialize(idStr);}colorPicker.prototype = { initialize: function(idStr){ var count=0; var html = ''; var self = this; html+= '<table cellpacing="5" cellpadding="0" bordercolor="#000000" style="cursor:pointer;background:#ECE9D8" mce_style="cursor:pointer;background:#ECE9D8" >'; // html+= '<tr><td align="center" colspan="8" id="currentColor" bgcolor="#ffffffff">Current color</td></tr>'; for(i=0;i<5;i++) { html+= "<tr>"; for(j=0;j<8;j++) { html+= '<td align="center" 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); //Define the function yourself to determine the function of 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">Color selection</a></div><script type="text/javascript"><!--function initColorPicker(){ picker = new colorPicker('demo');}// --></script></body></html>Friends who are interested in JS color tools can refer to the online tools of this site :
RGB color encoding generator
RGB color query comparison table_color code table_colour English name collection
Online web color matching tool
For more information about JavaScript, please check the topics of this site: "Summary of JavaScript switching effects and techniques", "Summary of JavaScript search algorithm skills", "Summary of JavaScript animation effects and techniques", "Summary of JavaScript errors and debugging techniques", "Summary of JavaScript data structures and algorithm skills", "Summary of JavaScript traversal algorithms and techniques", and "Summary of JavaScript mathematical operations usage"
I hope this article will be helpful to everyone's JavaScript programming.