今天学习了window对象,跟着学习了一个简单的网页拾色器的demo,拿出来和大家分享。
主页面代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拾色器</title>
</head>
<body>
<h1>网页拾色器</h1>
<script language="javascript">
function colorpick(file){
var rtn=window.showModalDialog("color.html","","dialogWidth:225px;dialogHeight:170px;status:no;help:no;scrolling=no;scrollbars=no;")
if(rtn != null)
file.style.background=rtn;
return;
}
</script>
<input type="text" name="color" id="color" size="3" readonly="yes" style="">
</body>
</html>
拾色器"color.html"页面代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>color</title>
</head>
<body>
<script language="javascript">
var h=new Array(6);
h[0]="FF";
h[1]="CC";
h[2]="99";
h[3]="66";
h[4]="33";
h[5]="00";
function action(RGB){
parent.window.returnValue="#"+RGB; //将颜色的值返回给父窗口.
window.close();
}
function Mcell(R,G,B){
document.write(‘<td bgcolor="#‘+R+G+B+‘">‘);
document.write(‘<a href="#" onClick="action(\‘‘+(R+G+B)+‘\‘)">‘);
document.write(‘<img border=0 height=12 width=12 \‘)" alt=\‘#‘+R+G+B+‘\‘>‘);
document.write(‘</a>‘);
document.write(‘</td>‘);
}
function Mtr(R,B){
document.write(‘<tr>‘);
for(var i=0;i<6;++i){
Mcell(R,h[i],B);
}
document.write(‘</tr>‘);
}
function Mtable(B) {
document.write(‘<table cellpadding=0 cellspacing=0 border=0>‘);
for (var i = 0; i < 6; ++i) {
Mtr(h[i], B);
}
document.write(‘</table>‘);
}
function Mcube() {
document.write(‘<table cellpadding=0 cellspacing=0 border=0><tr>‘);
for (var i = 0; i < 6; ++i) {
if(i%3==0){
document.write(‘<tr>‘);
}
document.write(‘<td bgcolor="#FFFFFF">‘);
Mtable(h[i]);
document.write(‘</td>‘);
}
if(i%3==0){
document.write(‘</tr>‘);
}
document.write(‘</tr></table>‘);
}
Mcube();
</script>
</body>
</html>