html颜色选择器橘黄的,html 颜色选择器的用法

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

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

@*

οnclick="initColorPicker('demo');returnfalse"id="demo"

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

@*

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+='

border="2"bordercolor="#000000"

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

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

//html+='

height="20"id="currentColor"

bgcolor="#ffffff">当前颜色

';

for(i=0;i<5;i++){

html+="

";

for(j=0;j<8;j++){

html+='

height="20"style="background:'+this.colorPool[count]+'"

mce_style="background:'+this.colorPool[count]+'"

unselectable="on">';

count++;

}

html+="

";

}

html+='';

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

tds[i].οnclick=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.οnclick=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;

}

*@