本文實(shí)例講述了JS實(shí)現(xiàn)簡單面向?qū)ο蟮念伾x擇器。分享給大家供大家參考，具體如下：
<!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">當(dāng)前顏色</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); //自己定義函數(shù)決定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>對(duì)于JS顏色工具感興趣的朋友可參看本站在線工具：
RGB顏色查詢對(duì)照表_顏色代碼表_顏色的英文名稱大全
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
