《JS实现简洁面对对象的颜色选择器实例_.docx》由会员分享，可在线阅读，更多相关《JS实现简洁面对对象的颜色选择器实例_.docx（6页珍藏版）》请在三一文库上搜索。
1、JS实现简洁面对对象的颜色选择器实例_ 本文实例讲解并描述了JS实现简洁面对对象的颜色选择器。分享给大家供大家参考，具体如下： !DOCTYPE html PUBLIC -/W3C/DTD XHTML 1.0 Transitional/EN l1/DTD/xhtml1-transitional.dtd html xmlns=l head meta http-equiv=Content-Type content=text/html; charset=gb2312 / titleUntitled Document/title /head body script type=text/JavaScri
2、pt !- 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,#99
3、3366,#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:#
4、ECE9D8 mce_style=cursor:pointer;background:#ECE9D8 ; / html+= trtd align=center colspan=8 width=160 height=20 id=currentColor bgcolor=#ffffff当前颜色/td/tr; for(i=0;i5;i+) html+= tr; for(j=0;j8;j+) html+= td align=center width=20 height=20 style=background:+ this.colorPoolcount+ mce_style=background:+ t
5、his.colorPoolcount+ 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;il;i+) tdsi.onclick = function() self.se
6、tColor(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.tri
7、gger.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
8、 = 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 盼望本文所述对大家JavaScript程序设计有所关心。 .