每次谈到javascript就头痛，总是学了前面就忘了后面。到现在VBscript学会而javascript还处在初学阶段。昨天在制作后台功能时我选择了针对性的学习。下面是一个打开颜色选择对话框的代码，当您选择好颜色后，点击“确定”就会返回颜色值给父窗口。这工能挻实用的。
大家可以根据自己的实际情况进行修改。
父窗口
以下是引用片段：
<!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" c />
<title>无标题文档</title>
<script language="javascript">
function showmodal()
{
var ab=document.all("mycolor").style.color
var ret = window.showModalDialog("selcolor.html",ab,"dialogWidth:380px;dialogHeight:450px;help:no;status:no;scroll:no");
if (typeof ret !="undefined"){
document.form2.sda.value=ret;
document.all("aaa").bgColor=ret;
}
}
</script>
</head>
<body>
<a href="#" ><span id="mycolor" style="color:#FF0000">选择颜色</span></a>
<table width="20" height="21" border="1" cellpadding="0" cellspacing="0" bordercolor="#000000">
<tr>
<td id="aaa" bgcolor="" name="aaa"></td>
</tr>
</table>
<form id="form2" name="form2" method="post" action="k.asp">
<input type="text" name="sda" id="sda" />
<input type="submit" name="button" id="button" value="提交" />
</form>
</body>
</html> |
下面是从网上收集的颜色代码，我用它作为对话框并将值返回上面的网页
selcolor.html
以下是引用片段：
<html>
<head>
<meta http-equiv="Content-Type" c />
<title>颜色选择器</title>
<style type="text/css">
<!--
body { background-color: #AEC6EC; }
.memo { border-top-width: 2px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 2px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #999999; border-right-color: #FFFFFF; border-bottom-color: #FFFFFF; border-left-color: #999999; }
-->
</style>
<!--颜色选择器：返回颜色的十六进制-->
<script language="javascript">
function getcolortxt(){
window.returnValue =text1.value;
window.close();
}
</script>
</head>
<body>
<TABLE cellSpacing=1 cellPadding=3 width=350 align=center
border=0>
<TBODY>
<TR>
<TD align=middle width="10%"><SELECT onchange=selectchg(this.value)
name=select1> <OPTION value=1 selected>红</OPTION> <OPTION
value=2>绿</OPTION> <OPTION value=3>蓝</OPTION> <OPTION
value=4>灰</OPTION></SELECT> </TD>
<TD align=middle width="90%">
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD align=right><INPUT class=memo size=10 name=text1 /> <INPUT class=button onclick=choosecolor() type=button value=">>" name=Button2 />
</TD>
<TD align=right width="3%"> </TD>
<TD width="30%">
<TABLE class=cursorcross height=20 cellSpacing=1 cellPadding=0
width=40 border=0>
<TBODY>
<TR>
<TD id=customcolor onmouseover=showcolor(this)
bgColor=#ffffff> </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR>
<TR>
<TD align=middle width="10%">
<TABLE class=cursorhand id=tableleft cellSpacing=1 cellPadding=0
border=0><SCRIPT language=VBScript>
function hexit(which)
hexit=hex(which)
end function
</SCRIPT>
<SCRIPT language=JavaScript>
for(i=0;i<=15;++i)
{document.write('<tr><td align="center">'+ hexit(0+i*17) +'</td><td id="tdleft' + i +'" bgcolor="rgb('+ (0+i*17) + ',0,0)" width="15" height="15" ></td></tr>')
document.all['tdleft' + i].num=i
}
</SCRIPT>
<TBODY></TBODY></TABLE></TD>
<TD align=middle width="90%">
<TABLE class=cursorcross id=tableleft cellSpacing=1 cellPadding=0
border=0>
<SCRIPT language=JavaScript>
document.write('<tr><td></td>')
for(i=0;i<=15;++i)
{document.write('<td align="center">'+ hexit(0+i*17) +'</td>')}
document.write('</tr>')
for(i=0;i<=15;++i)
{document.write('<tr>')
document.write('<td align="center">'+ hexit(0+i*17) +'</td>')
for(j=0;j<=15;++j)
{document.write('<td id="tdrightr' + i + 'c' + j +'" bgcolor="rgb(0,'+ (0+i*17) + ',' + (0+j*17) + ')" width="15" height="15" ></td>')}
document.write('</tr>')
}
</SCRIPT>
<TBODY></TBODY></TABLE></TD></TR>
<TR>
<TD
height=20 colSpan=2 align="center"><input id=button1 type=button value="确 定" name=button1 /></TD>
</TR></TBODY></TABLE>
<SCRIPT language=JavaScript>
function selectchg(which)
{switch(which)
{case '1' :leftR();break;
case '2' :leftG();break;
case '3' :leftB();break;
case '4' :leftA();break;
}
}
function leftR()
{for(i=0;i<=15;++i)
{document.all['tdleft'+i].bgColor='rgb('+ (0+i*17) + ',0,0)'}
rightR(0)
}
function leftG()
{for(i=0;i<=15;++i)
{document.all['tdleft'+i].bgColor='rgb(0,'+ (0+i*17) + ',0)'}
rightG(0)
}
function leftB()
{for(i=0;i<=15;++i)
{document.all['tdleft'+i].bgColor='rgb(0,0,'+ (0+i*17) + ')'}
rightB(0)
}
function leftA()
{for(i=0;i<=15;++i)
{document.all['tdleft'+i].bgColor='rgb('+ (0+i*17) + ','+ (0+i*17) + ','+ (0+i*17) + ')'}
rightA()
}
function rightR(which)
{for(i=0;i<=15;++i)
{for(j=0;j<=15;++j)
{document.all['tdrightr' + i + 'c' + j].bgColor='rgb(' + (0+which*17) + ',' + (0+i*17) + ','+ (0+j*17) + ')'}
}
}
function rightG(which)
{for(i=0;i<=15;++i)
{for(j=0;j<=15;++j)
{document.all['tdrightr' + i + 'c' + j].bgColor='rgb(' + (0+i*17) + ',' + (0+which*17) + ',' + (0+j*17) + ')'}
}
}
function rightB(which)
{for(i=0;i<=15;++i)
{for(j=0;j<=15;++j)
{document.all['tdrightr' + i + 'c' + j].bgColor='rgb(' + (0+i*17) + ','+ (0+j*17)+ ',' + (0+which*17) + ')'}
}
}
function rightA()
{for(i=0;i<=15;++i)
{for(j=0;j<=15;++j)
{document.all['tdrightr' + i + 'c' + j].bgColor='rgb(' + (0+i*16+j) + ','+ (0+i*16+j)+ ',' + (0+i*16+j) + ')'}
}
}
var rightclicked=false
function clickright(which)
{if(rightclicked){rightclicked=false;showcolor(which)}else{rightclicked=true}
}
function changeright(which)
{switch(select1.value)
{case '1' :rightR(which);break;
case '2' :rightG(which);break;
case '3' :rightB(which);break;
}
}
function showcolor(which)
{if(rightclicked)return;
text1.value=which.bgColor
choosecolor()
}
var colora=window.dialogArguments;
if (colora!="")
{
text1.value=colora;
customcolor.bgColor=text1.value;
}
function choosecolor()
{customcolor.bgColor=text1.value
}
</SCRIPT>
</BODY></HTML> |
