本篇文章给大家带来的内容是关于（超好用）html颜色选择器的用法，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

 

　　@*以下是测试html颜色选择器的*@

 

　　@*<ahref="#"mce_href="#"

 

　　onclick="initColorPicker('demo');returnfalse"id="demo"

 

　　style="position:absolute;left:200px">颜色选择</a>*@

 

　　<!--ColorPicker-->

 

　　@*<scripttype="text/JavaScript">

 

　　varcolorPicker=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){

 

　　varcount=0;

 

　　varhtml='';

 

　　varself=this;

 

　　html+='<tablecellspacing="5"cellpadding="0"

 

　　border="2"bordercolor="#000000"

 

　　style="cursor:pointer;background:#ECE9D8"

 

　　mce_style="cursor:pointer;background:#ECE9D8">';

 

　　//html+='<tr><tdalign="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+='<tdalign="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.p=document.createElement('p');

 

　　this.p.innerHTML=html;

 

　　vartds=this.p.getElementsByTagName('td');

 

　　for(vari=0,l=tds.length;i<l;i++){

 

　　tds[i].onclick=function(){

 

　　self.setColor(this.style.backgroundColor,idStr);

 

　　}

 

　　}

 

　　this.p.id='myColorPicker';

 

　　this.trigger.parentNode.appendChild(this.p);

 

　　this.p.style.position='absolute';

 

　　this.p.style.left=this.trigger.offsetLeft+'px'

 

　　this.p.style.top=(this.trigger.clientHeight+this.trigger.offsetTop)+'px';

 

　　//this.hide();

 

　　this.trigger.onclick=function(){

 

　　if(self.p.style.display=='none'){

 

　　self.show();

 

　　returnfalse;

 

　　}else{

 

　　self.hide();

 

　　returnfalse;

 

　　}

 

　　}

 

　　},

 

　　setColor:function(c,idStr){

 

　　this.hide();

 

　　//document.getElementById(idStr).style.backgroundColor=c//proEditor.setColor(c);//自己定义函数决定setColor的功能

 

　　document.getElementById(idStr).style.color=c

 

　　//varrgb2Hex=colorRGB2Hex(c);

 

　　//alert(rgb2Hex);

 

　　},

 

　　hide:function(){

 

　　this.p.style.display='none'

 

　　},

 

　　show:function(){

 

　　this.p.style.display='block'

 

　　}

 

　　}

 

　　functioninitColorPicker(str){

 

　　picker=newcolorPicker(str);

 

　　}

 

　　functioncolorRGB2Hex(color){

 

　　varrgb=color.split(',');

 

　　varr=parseInt(rgb[0].split('(')[1]);

 

　　varg=parseInt(rgb[1]);

 

　　varb=parseInt(rgb[2].split(')')[0]);

 

　　varhex="#"+((1<<24)+(r<<16)+(g<<8)+b).toString(16).slice(1);

 

　　returnhex;

 

　　}

 

　　</script>*@