Html 颜色选择器,支持返回RGB值与Html颜色值(转http://www.cnblogs.com/wangzhq)

最新推荐文章于 2023-03-14 10:26:28 发布

weixin_30532369

最新推荐文章于 2023-03-14 10:26:28 发布

阅读量96

点赞数

原文链接：http://www.cnblogs.com/genson/archive/2006/11/21/566994.html

版权

图:

< HTML >

< HEAD >

< TITLE > Office 风格颜色选择器 </ TITLE >

< META NAME ="Generator" CONTENT ="EditPlus" >

< META NAME ="Author" CONTENT ="" >

< META NAME ="Keywords" CONTENT ="" >

< META NAME ="Description" CONTENT ="" >

</ HEAD >

< BODY >

< script language =javascript >

<!--

//夜狼制作 OFFICE风格的色彩选择器

//注意:只有把<script></script>标签放在<body>标签内才可以正常使用“其它颜色

”功能

document.write("<OBJECT id=\"dlgHelper\" CLASSID=\"clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b\" width=\"0px\" height=\"0px\"></OBJECT>");

var ocolorPopup = window.createPopup();

var ecolorPopup=null;

function colordialogmouseout(obj)

{

obj.style.borderColor="";

obj.bgColor="";

}

function colordialogmouseover(obj)

{

obj.style.borderColor="#0A66EE";

obj.bgColor="#EEEEEE";

}

function colordialogmousedown(color)

{

ecolorPopup.value=color;

//document.body.bgColor=color;

ocolorPopup.document.body.blur();

}

function colordialogmore()

{

var sColor=dlgHelper.ChooseColorDlg(ecolorPopup.value);

sColor = sColor.toString(16);

if (sColor.length < 6)

{

var sTempString = "000000".substring(0,6-sColor.length);

sColor = sTempString.concat(sColor);

}

ecolorPopup.value="#"+sColor.toUpperCase();

//document.body.bgColor="#"+sColor.toUpperCase();

ocolorPopup.document.body.blur();

}

function colordialog()

{

var e=event.srcElement;

e.onkeyup=colordialog;

ecolorPopup=e;

var ocbody;

var oPopBody = ocolorPopup.document.body;

var colorlist=new Array(40);

oPopBody.style.backgroundColor = "#f9f8f7";

oPopBody.style.border = "solid #999999 1px";

oPopBody.style.fontSize = "12px";

colorlist[0]="#000000"; colorlist[1]="#993300"; colorlist[2]="#333300"; colorlist[3]="#003300";

colorlist[4]="#003366"; colorlist[5]="#000080"; colorlist[6]="#333399"; colorlist[7]="#333333";

colorlist[8]="#800000"; colorlist[9]="#FF6600"; colorlist[10]="#808000";colorlist[11]="#008000";

colorlist[12]="#008080";colorlist[13]="#0000FF";colorlist[14]="#666699";colorlist[15]="#808080";

colorlist[16]="#FF0000";colorlist[17]="#FF9900";colorlist[18]="#99CC00";colorlist[19]="#339966";

colorlist[20]="#33CCCC";colorlist[21]="#3366FF";colorlist[22]="#800080";colorlist[23]="#999999";

colorlist[24]="#FF00FF";colorlist[25]="#FFCC00";colorlist[26]="#FFFF00";colorlist[27]="#00FF00";

colorlist[28]="#00FFFF";colorlist[29]="#00CCFF";colorlist[30]="#993366";colorlist[31]="#CCCCCC";

colorlist[32]="#FF99CC";colorlist[33]="#FFCC99";colorlist[34]="#FFFF99";colorlist[35]="#CCFFCC";

colorlist[36]="#CCFFFF";colorlist[37]="#99CCFF";colorlist[38]="#CC99FF";colorlist[39]="#FFFFFF";

ocbody = "";

ocbody += "<table CELLPADDING=0 CELLSPACING=3>";

ocbody += "<tr height=\"20\" width=\"20\"><td align=\"center\"><table style=\"border:1px solid #808080;\" width=\"12\" height=\"12\" bgcolor=\""+e.value+"\"><tr><td></td></tr></table></td><td bgcolor=\"eeeeee\" colspan=\"7\" style=\"font-size:12px;\" align=\"center\">当前颜色</td></tr>";

for(var i=0;i<colorlist.length;i++)

{

if(i%8==0)

ocbody += "<tr>";

ocbody += "<td width=\"14\" height=\"16\" style=\"border:1px solid;\" onMouseOut=\"parent.colordialogmouseout(this);\" onMouseOver=\"parent.colordialogmouseover(this);\" onMouseDown=\"parent.colordialogmousedown('"+colorlist[i]+"')\" align=\"center\" valign=\"middle\"><table style=\"border:1px solid #808080;\" width=\"12\" height=\"12\" bgcolor=\""+colorlist[i]+"\"><tr><td></td></tr></table></td>";

if(i%8==7)

ocbody += "</tr>";

}

ocbody += "<tr><td align=\"center\" height=\"22\" colspan=\"8\" onMouseOut=\"parent.colordialogmouseout(this);\" onMouseOver=\"parent.colordialogmouseover(this);\" style=\"border:1px solid;font-size:12px;cursor:default;\" onMouseDown=\"parent.colordialogmore()\">其它颜色

</td></tr>";

ocbody += "</table>";

oPopBody.innerHTML=ocbody;

ocolorPopup.show(e.offsetLeft, e.offsetTop+e.offsetHeight, 158, 147, document.body);

}

//-->

</ script >

选择颜色： < input name ="sel1" type ="text" onfocus ="colordialog()" ></ BODY >

</ HTML >

付上 Html颜色值 to RGB
//Html颜色值转换为RGB

function HhtmlColorToRGB(color)
{
    var str="0x" + color.substring(1,color.length);
    var r=str&0x0000FF;
    var g=(str&0x00FF00)>>8;
    var b=(str&0xFF0000)>>16;
    return b + "," + g + "," + r;
}

转载于:https://www.cnblogs.com/genson/archive/2006/11/21/566994.html

weixin_30532369

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Html 颜色选择器,支持返回RGB值与Html颜色值(转http://www.cnblogs.com/wangzhq)

图:<HTML><HEAD><TITLE>Office风格颜色选择器</TITLE><METANAME="Generator"CONTENT="EditPlus"><METANAME="Author"CONTENT=""><METANAME="Keywords"CONTENT=""><ME...
复制链接

扫一扫