ASP.NET 颜色选择对话框_aspx页面支持颜色选择框-CSDN博客

本文介绍了一个使用JavaScript实现的颜色选择器，该选择器模仿了WinForm弹出对话框样式，提供了丰富的颜色选项及自定义颜色的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

颜色选择的方式很多，但是最偏爱类似WinForm弹出对话框那种。

利用Javascript实现，看下面代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

</head>

<body>

<!--

//只有把〈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);

}