JS入门到精通 第12章 Window对象
导读：一、练习1. 练习1 （1）源代码<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>警告对话框的应用</title&...
一、练习
1. 练习1
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>警告对话框的应用</title>
</head>
<body onLoad="al()">
<script type="text/javascript">
function al(){
window.alert("弹出警告对话框!");
}
</script>
</body>
</html>（2）运行页面
https://www.xinyizhishu.top/jsC/sc/12_1/
（3）Tips
窗口？
2. 练习2
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>提示窗口</title>
<script type="text/javascript">
var bool=window.confirm("确定要关闭浏览器窗口吗？");
if(bool==true){
window.close();
}
</script>
</head>
<body>
</body>
</html>（2）运行页面
https://www.xinyizhishu.top/jsC/sc/12_2/
（3）Tips
为啥edge、360都不灵光。
3. 练习3
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>提示对话框的应用</title>
</head>
<script type="text/javascript">
function rdl_doClick(){
var oMessage=document.getElementById("oMessage");
oMessage.value=window.prompt(oMessage.value,"返回的信息");
}
</script>
<body>
<input id="oMessage" type="text" size="40" value="请在此输入信息">
<br><br>
<input type="button" value=" 显示对话框 " onClick="rdl_doClick();">
</body>
</html>（2）运行页面
https://www.xinyizhishu.top/jsC/sc/12_3/
（3）Tips
用对话框获取。
4. 练习4
（1）源代码
index.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>打开新窗口</title>
<style type="text/css">
body {
margin-top: 0px;
margin-bottom: 0px;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
</style>
</head>
<script type="text/javascript">
window.open("new.html","new","height=141,width=693,top=10,left=20,target=_blank");
</script>
<BODY>
<DIV>
<DIV id=popmenu
onmouseover="clearhidemenu();highlightmenu(event,'on')"
style="Z-INDEX: 100; POSITION: absolute"
onmouseout="highlightmenu(event,'off');dynamichide(event)">
</DIV>
<TABLE height=16 cellSpacing=0 borderColorDark=#000000 cellPadding=0 width=799
background=images/up.jpg border=1 frame=void>
<TBODY>
<TR>
<TD>当前登录：mr</TD>
<TD width=75>图书设置</TD>
<TD width=75>图书管理</TD>
<TD width=75>图书销售</TD>
<TD width=75>借阅管理</TD>
<TD width=75>图表分析</TD>
<TD width=75>系统管理</TD>
<TD width=75>安全退出</TD>
</TR></TBODY>
</TABLE>
<LINK href="#" rel=stylesheet>
<TABLE height=110 cellSpacing=0 cellPadding=0 width=799 border=0>
<TBODY>
<TR>
<TD background=images/banner.jpg height=69>
</TD></TR></TBODY>
</TABLE>
<TABLE borderColor=#ffffff cellSpacing=0 cellPadding=0 width=799
background=images/upgrounb.jpg border=1 frame=void>
<TBODY>
<TR>
<TD width=240>
<TABLE height=26 cellSpacing=0 cellPadding=0 width=235 border=0>
<TBODY>
<TR>
<TD width=223>
<DIV id=bgclock></DIV></TD></TR>
</TBODY>
</TABLE>
</TD>
<TD><A href="#"><STRONG>库存查询</STRONG></A></TD>
<TD><A href="#"><STRONG>图书借阅</STRONG></A></TD>
<TD><A href="#"><STRONG>图书归还</STRONG></A></TD>
<TD><A href="#"><STRONG>销售管理</STRONG></A></TD>
<TD><A href="#"><STRONG>密码设置</STRONG></A></TD>
<TD><A href="#"><STRONG>返回首页</STRONG></A>
</TD></TR></TBODY></TABLE>
<TABLE height=28 cellSpacing=0 cellPadding=0 width=799
background=images/operationOne.jpg border=0>
<TBODY>
<TR>
<TD><SPAN>―――――――最新图书―――――――</SPAN></TD>
</TR></TBODY></TABLE>
<TABLE height=178 cellSpacing=0 cellPadding=0
width=799 border=0>
<TBODY>
<TR>
<TD height="178" vAlign=top>
<DIV>
<TABLE borderColor=#ffffff cellSpacing=0 borderColorDark=#819bbc
cellPadding=0 width=799 borderColorLight=#ffffff border=1>
<TBODY>
<TR bgColor=#83b9ff>
<TD width=75>编号</TD>
<TD width=219 bgColor=#83b9ff height=25>书名</TD>
<TD width=100>作者</TD>
<TD width=101>定价</TD>
<TD width=92>库存数量</TD>
<TD width=198>出版社</TD>
</TR>
<TR
onmousemove="this.style.backgroundColor='rgb(214,229,249)'"
style="WIDTH: 529px" onMouseOut="this.style.backgroundColor='white' "
>
<TD height=25>BOOK-25</TD>
<TD>
<DIV> <A
href="#">《SQL Server范例宝典》</A></DIV></TD>
<TD>明日科技</TD>
<TD>70.0元</TD>
<TD>100本</TD>
<TD>出版社</TD></TR>
<TR
onmousemove="color=this.style.backgroundColor;this.style.backgroundColor='rgb(214,229,249)'"
style="WIDTH: 529px" onMouseOut="this.style.backgroundColor='white'"
>
<TD height=25>BOOK-24</TD>
<TD>
<DIV> <A
href="#">《ASP开发技术大全》</A></DIV></TD>
<TD>明日科技</TD>
<TD>90.0元</TD>
<TD>99本</TD>
<TD>出版社</TD></TR>
<TR
onmousemove="color=this.style.backgroundColor;this.style.backgroundColor='rgb(214,229,249)'"
style="WIDTH: 529px" onMouseOut="this.style.backgroundColor='white'"
>
<TD height=25>BOOK-23</TD>
<TD>
<DIV> <A
href="#">《JSP数据库开发案例精选》</A></DIV></TD>
<TD>明日科技</TD>
<TD>60.0元</TD>
<TD>100本</TD>
<TD>出版社</TD></TR>
<TR
onmousemove="color=this.style.backgroundColor;this.style.backgroundColor='rgb(214,229,249)'"
style="WIDTH: 529px" onMouseOut="this.style.backgroundColor='white'"
>
<TD height=25>BOOK-22</TD>
<TD>
<DIV> <A
href="#">《SQL Server 2005案例精选》</A></DIV></TD>
<TD>明日科技</TD>
<TD>50.0元</TD>
<TD>50本</TD>
<TD>出版社</TD></TR>
<TR
onmousemove="color=this.style.backgroundColor;this.style.backgroundColor='rgb(214,229,249)'"
style="WIDTH: 529px" onMouseOut="this.style.backgroundColor='white'"
>
<TD height=25>BOOK-21</TD>
<TD>
<DIV> <A
href="#"></A><a
href="#">《ASP范例宝典》</a></DIV></TD>
<TD>明日科技</TD>
<TD>30.0元</TD>
<TD>99本</TD>
<TD>出版社</TD></TR>
<TR
onmousemove="color=this.style.backgroundColor;this.style.backgroundColor='rgb(214,229,249)'"
style="WIDTH: 529px" onMouseOut="this.style.backgroundColor='white'"
>
<TD height=25>BOOK-20</TD>
<TD>
<DIV> <A
href="#"></A><a
href="#">《ASP数据库完全手册》</a></DIV></TD>
<TD>明日科技</TD>
<TD>48.0元</TD>
<TD>19本</TD>
<TD>出版社</TD></TR></TBODY></TABLE>
</DIV></TD></TR></TBODY></TABLE>
<TABLE height=68 cellSpacing=0 cellPadding=0 width=799 border=0>
<TBODY>
<TR>
<TD
background=images/bottom.jpg>翼飞图书管理系统客户服务热线：0431-84978981
84978982 传真：0431-84978981 <BR>
CopyRight 2008 www.mingrisoft.com吉林省明日科技有限公司
<BR>
</TD>
</TR></TBODY></TABLE>
</DIV>
</BODY>
</html>new.html：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>新窗口</title>
<style type="text/css">
body {
margin-top: 0px;
margin-left: 0px;
}
</style>
</head>
<body>
<table width="693" height="141" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="693" height="141" background="images/1.gif"><img src="images/book_1.jpg" width="695" height="143"></td>
</tr>
</table>
</body>
</html>（2）运行页面
https://www.xinyizhishu.top/jsC/sc/12_4/
（3）Tips
this.sytle.backgroundcolor，window.open("new.html","new","height=141,width=693,top=10,left=20,target=_blank")。
5. 练习5
（1）源代码
index.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>通过按扭创建窗口</title>
</head>
<body>
<form name="form1" method="post" action="">
<input type="button" name="Button" value="创建新窗口" onClick="pp()">
</form>
<script type="text/javascript">
function pp(){
window.open('trans.html','','toolbar,menubar,scrollbars,resizable,status,location,directories,copyhistory,height=400,width=500');
}
</script>
</body>
</html>trans.html：
<html><head><title>新建窗口</title> <META http-equiv=Content-Type content="text/html; charset=gb2312"> </head> <BODY> <TABLE height=48 cellSpacing=-2 cellPadding=-2 width=777 align=center border=0> <TR> <TD height="48" style="COLOR: #666666">这里是通过单击按钮新建的窗口！</TD> </TR> </TABLE> </BODY> </HTML>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/12_5/
（3）Tips
窗口名称为空表示每次执行都会打开一个新的独立窗口。
toolbar：显示浏览器工具栏（包含前进、后退、刷新等按钮）。menubar：显示浏览器的菜单栏（包含文件、编辑、视图等）。scrollbars：当页面内容超出窗口大小时，显示滚动条。resizable：允许用户通过拖动窗口边缘来调整窗口大小。status：显示浏览器底部的状态栏。location：显示浏览器的地址栏。directories：显示浏览器的个人书签/目录栏（这是一个非常古老的参数，现代浏览器基本已废弃）。copyhistory：将当前窗口的浏览历史记录复制到新窗口中（这样新窗口的“后退”按钮就能起作用）。
6. 练习6
（1）源代码
index.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>关闭弹出窗口时刷新父窗口</title>
<style type="text/css">
<!--
.style2 {
font-size: 9pt;
color: #FFFFFF;
}
.style4 {
font-size: 9pt;
color: #000000;
margin-left:30px;
}
a:link {
color: #FFFFFF;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFFFFF;
}
a:hover {
text-decoration: none;
color: #FFFFFF;
}
a:active {
text-decoration: none;
color: #CCCCCC;
}
-->
</style>
</head>
<body>
<table width="559" height="348" border="0" cellpadding="0" cellspacing="0">
<tr>
<td background="0.jpg">
<table width="527" height="327" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="365" height="18" valign="bottom"><span> 会议记录</span> </td>
<td width="162"><span><a href="#" onClick="Javascript:window.open('new.html','','width=400,height=220')">
会议记录</a></span></td>
</tr>
<tr>
<td height="309" colspan="2"><table width="486" height="239" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>2007年主要工作总结以及工作内容的回顾分析，分析相关工作成绩的取得。</td>
</tr>
<tr>
<td>本次会议主要由部门经理组成，主要讨论全体员工一起出去划雪的相关事情。</td>
</tr>
<tr>
<td>回顾过去，展望未来，主要对2008年的工作进行了新的整体与分配。做到更清楚。</td>
</tr>
<tr>
<td>每一年的工作，每一年的收获，不同的付出不同的收获。新年到大家乐呵呵。</td>
</tr>
<tr>
<td>叶子凋落，是风的追求还是树的不挽留。不知道不清楚不明白不不清楚不明白不。</td>
</tr>
<tr>
<td>叶子凋落，是风的追求还是树的不挽留。不知道不清楚不明白不不清楚不明白不。</td>
</tr>
</table></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>new.html：
<!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" content="text/html; charset=gb2312" />
<title>关闭弹出窗口时刷新父窗口</title>
<style type="text/css">
<!--
.style1 {
font-size: 9pt;
color: #FFFFFF;
}
body {
margin-left: 0px;
margin-top: 0px;
}
.style3 {
font-size: 9pt;
color: #000000;
margin-left:26px;
}
-->
</style>
</head>
<script type="text/javascript">
function clo(){
alert("关闭子窗口！");
window.close();//关闭当前窗窗口
window.opener.location.reload(); //刷新父窗口中的网页
}
</script>
<body>
<table width="400" height="224" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="17" bgcolor="#9A3334"><div align="center" class="style1">添加会议记录信息</div></td>
</tr>
<tr>
<td height="192"><table width="373" height="167" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><span class="style3">会议标题: 2008年新工作任务具体的分配以及工作要求</span></td>
</tr>
<tr>
<td><span class="style3">在新的一年里工作需要努力加油，但是必须要认真并且要有责任心要认真完成在新的一年里工作需要努力加油，但是必须要认真并且要有责任心要认真完成在新的一年里工作需要努力加油，但是必须要认真并且要有责任心要认真完成在新的一年里工作需要努力加油，但是必须要认真并且要有责任心要认真完成在新的一年里工作需要努力加油，但是必须要认真并且要有责任心要认真完成在新的一年里工作需要努力加油，但是必须要认真并且要有责任心要认真完成在新的一年里工作需要努力加油，但是必须要认真并且要有责任心要认真完成</span></td>
</tr>
<tr>
<td><div align="right">
<input type="submit" name="Submit" value="关闭" onclick="clo();">
</div></td>
</tr>
</table></td>
</tr>
<tr>
<td height="13" bgcolor="#9A3334"> </td>
</tr>
</table>
<p> </p>
</body>
</html>（2）运行页面
https://www.xinyizhishu.top/jsC/sc/12_6/
（3）Tips
onclick="javascript:window.open('new.html','','width=400,height=200')"。
window.opener.location.reload()。
7. 练习7
（1）源代码
index.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>关闭子窗口</title>
</head>
<body>
<form name="form1">
<input type="button" name="Button" value="关闭子窗口" onClick="newclose()">
</form>
<script type="text/javascript">
var pp;
pp=window.open("new.html","new","width=200,height=80");
function newclose(){
pp.close();
}
</script>
</body>
</html>new.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>关闭子窗口</title>
</head>
<body>
<form name="form1">
<input type="button" name="Button" value="关闭子窗口" onClick="newclose()">
</form>
<script type="text/javascript">
var pp;
pp=window.open("new.html","new","width=200,height=80");
function newclose(){
pp.close();
}
</script>
</body>
</html>（2）运行页面
https://www.xinyizhishu.top/jsC/sc/12_7/
（3）Tips
pp.close()。
8. 练习8
（1）源代码
index.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>控制弹出窗口居中显示</title>
<style type="text/css">
<!--
body {
font-size:14px;
margin-top: 0px;
}
-->
</style></head>
<body>
<table width="871" height="145" border="0" cellpadding="-2" cellspacing="-2"
background="Images/top/bg.GIF">
<tr>
<td valign="top"><table width="100%" height="26" border="0" cellpadding="-2" cellspacing="-2">
<tr>
<td><div style="color:#FFFFFF ">
设为首页| 收藏本站| </div></td>
</tr>
</table>
<table width="100%" height="119" border="0" cellpadding="-2" cellspacing="-2">
<script type="text/javascript">
//鼠标移动效果
//var A_Img=new Image();
function move(image,num){
image.src='Images/top/menu_0'+num+'_over.gif';
}
function out(image,num){
image.src='Images/top/menu_0'+num+'.gif';
}
</script>
<tr>
<td width="183"><table width="100%" height="119" border="0" cellpadding="-2" cellspacing="-2">
<tr height="28">
<td height="29"></td>
</tr>
<tr>
<td height="90"></td>
</tr>
</table></td>
<td width="95"><img src="Images/top/menu_01.gif" id="image1" width="95" height="119" border="0" onMouseMove="move(this,'1')" onMouseout="out(this,'1')"></td>
<td width="95"><img src="Images/top/menu_02.gif" id="image2" width="95" height="119" border="0" onMouseMove="move(this,'2')" onMouseout="out(this,'2')"></td>
<td width="94"><img src="Images/top/menu_03.gif" name="image3" width="95" height="119" border="0" onMouseMove="move(this,'3')" onMouseout="out(this,'3')"></td>
<td width="94"><img src="Images/top/menu_04.gif" name="image4" width="94" height="119" border="0" onMouseMove="move(this,'4')" onMouseout="out(this,'4')"></td>
<td width="94"><img src="Images/top/menu_05.gif" name="image5" width="95" height="119" border="0" onMouseMove="move(this,'5')" onMouseout="out(this,'5')"></td>
<td width="94"><img src="Images/top/menu_06.gif" name="image6" width="94" height="119" border="0" onMouseMove="move(this,'6')" onMouseout="out(this,'6')"></td>
<td width="95"><img src="Images/top/menu_07.gif" width="95" name="image7" height="119" border="0" onMouseMove="move(this,'7')" onMouseout="out(this,'7')"></td>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
<table width="871" border="0" cellpadding="-2" cellspacing="-2">
<tr>
<td valign="top"><table width="100%" height="54" border="0" cellpadding="-2" cellspacing="-2" background="Images/Top_01.gif">
<tr>
<!--网页头部-->
<td valign="top"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="-2" cellpadding="-2">
<tr>
<td height="238" valign="top"><table width="100%" height="507" border="0" cellpadding="-2" cellspacing="-2">
<tr>
<td width="17" valign="top"><table width="100%" height="439" border="0" cellpadding="-2" cellspacing="-2">
<tr>
<td width="200" height="225" background="Images/welcome.gif"> </td>
</tr>
<tr>
<td width="200" height="190" background="Images/left_bottom.gif"></td>
</tr>
<tr>
<td height="9" background="Images/left_line.gif"></td>
</tr>
</table></td>
<td valign="top"><table width="100%" height="205" border="0" cellpadding="-2" cellspacing="-2">
<tr>
<td width="188" height="212" valign="top" background="Images/menu_son.gif"><table width="100%" height="206" border="0" cellpadding="-2" cellspacing="-2" style="color:#FFFFFF">
<tr>
<td width="19%" height="76"> </td>
<td width="81%"> </td>
</tr>
<tr>
<td height="27"> </td>
<td height="27" valign="bottom">领导致词
</td>
</tr>
<tr>
<td height="27"> </td>
<td height="27" valign="bottom">公司简介</td>
</tr>
<tr>
<td> </td>
<td height="27" valign="bottom">营销网络</td>
</tr>
<tr>
<td> </td>
<td height="27" valign="bottom">展望未来</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table></td>
</tr>
</table>
<table width="100%" height="239" border="0" cellpadding="-2" cellspacing="-2">
<tr>
<td height="30" valign="top"><img src="Images/friend.gif" width="188" height="30"></td>
</tr>
<tr>
<td height="67" background="Images/friend_01.gif"><div><img src="Images/Link/KJXXLogo.gif" width="184" height="66"></div></td>
</tr>
<tr>
<td height="72" background="Images/friend_02.gif"><div><img src="Images/Link/MRLogo.gif" width="184" height="66"></div></td>
</tr>
<tr>
<td height="70" background="Images/friend_01.gif"><div><img src="Images/Link/ZQLogo.gif" width="184" height="66" border="0"></div></td>
</tr>
</table>
<img src="Images/friend_03.gif" width="188" height="27"></td>
<td width="666" valign="top" background="Images/Top_05.gif"><table width="100%" height="135" border="0" cellpadding="-2" cellspacing="-2" background="Images/Top_04.gif">
<tr valign="top">
<td height="61" colspan="2"><table width="100%" border="0" cellspacing="-2" cellpadding="-2">
<tr>
<td width="73%" height="24"> </td>
<td width="27%" style="color:#313D99">> 公司介绍 > 公司简介 >> </td>
</tr>
</table></td>
</tr>
<tr>
<td width="24%" height="52"> </td>
<td width="76%" style="color:#5D5D5D">长春市明日实业有限公司<br>
Chang Chun Ming Ri Industry Co.,Ltd</td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
</table>
<table width="98%" height="308" border="0" cellpadding="-2" cellspacing="-2" style="margin:5pt">
<tr>
<td valign="top"><table width="340" height="261" border="0" cellpadding="-2" cellspacing="-2">
<tr>
<td><div><img src="Images/profile1.GIF" width="337" height="235" border="1"></div></td>
</tr>
<tr>
<td height="24"><div>明日实业概貌图</div></td>
</tr>
</table>
长春市明日实业有限公司，始建于1980年，主要从事热水锅炉和暖气管道全自动排汽阀的生产和销售。 <br>
公司主导产品“明日”牌全自动排汽阀获得多项国家专利，1988年经吉林省技术监督局认定其产品标准已达到国际水平，并历次被吉林省工商局评为吉林省名牌产品。 <br>
十余年来企业以雄厚的技术研发实力、科学的管理制度、过硬的产品质量、不断的创新精神，使明日实业成为行业的领头雁，经受住了所有用户的考验，十九年来无一起产品质量投诉。“明日”牌排汽阀已成为广大用户心目中高品质、高质量的象征，令消费者真正感到物有所值。我们敢于向所有用户承诺：凡我企业生产的排汽阀，在质保期间，如有质量问题，包赔损失。“明日”牌已成为众企业最宝贵的无形资产，也给企业带来了巨大的社会效益和经济效益。 <br>
2001年，公司领导高瞻远瞩，在行业内率先带领公司通过ISO9001：2000质量管理体系认证，为进一步拓宽国内市场和进军国际市场开辟了通衢大道。不论过去、现在还是将来，明日人将秉承“坚韧、创新、博学、笃行”的企业文化，重质量、守承诺、求发展、敢创新，争做行业领头雁。将明日实业的产品做大、做精，争取更大的社会效益和经济效益，回报社会，回报人民。 </td>
</tr>
</table> <table width="100%" height="56" border="0" cellpadding="-2" cellspacing="-2">
<tr>
<td height="56" bgcolor="#FFFFFF"><div style="color:#666666 ">本站请用IE5.0或以上版本浏览，1024*768为最佳效果<br>
CopyRight © 2007 长春市明日实业有限公司<br>
</div></td>
<td width="208"><img src="Images/re_top.gif" width="208" height="56" border="0" usemap="#Map"></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table><table width="100%" border="0" cellspacing="-2" cellpadding="-2">
<tr>
<td height="8" background="Images/bottom.gif"></td>
</tr>
</table></td>
</tr>
</table>
<script type="text/javascript">
function manage(){
var hdc=window.open('Login_M.html','','width=342,height=284');//打开新窗口
width=screen.width;//获取屏幕宽度
height=screen.height;//获取屏幕高度
hdc.moveTo((width-322)/2,(height-206)/2);//移动窗口至屏幕居中
}
</script>
<map name="Map">
<area shape="rect" coords="82,17,125,39" href="#" onClick="manage()">
<area shape="circle" coords="49,28,14">
</map>
</body>
</html>Login_M.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>控制弹出窗口居中显示</title>
<style type="text/css">
*{
font-size:14px;
margin:0px;
padding:0px;}
td{
color:#FFFFFF;
}
</style>
<script type="text/javascript">
function mycheck(myform)
{
if (myform.Manager.value=="")
{alert("请输入管理员！");myform.Manager.focus();return;}
if(myform.PWD.value=="")
{alert("请输入密码！");myform.PWD.focus();return;}
myform.submit();
}
</script>
</head>
<body>
<table width="322" height="206" border="1" cellpadding="0" cellspacing="0">
<tr>
<td height="153" valign="top" background="Images/Login_M_Top.gif"><table width="100%" height="153" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<form method="post" action="" name="myform">
<table width="100%" border="0" cellspacing="-2" cellpadding="-2">
<tr>
<td width="20" height="65"> </td>
<td width="82"> </td>
<td width="200"> </td>
<td width="20"> </td>
</tr>
<tr>
<td height="34"> </td>
<td> 管理员：</td>
<td><input name="Manager" type="text" id="Manager3"onKeyDown="if(event.keyCode==13) myform.PWD.focus();" maxlength="20"></td>
<td> </td>
</tr>
<tr>
<td height="34"> </td>
<td> 密 码：</td>
<td><input name="PWD" type="password" id="PWD" onKeyDown="if(event.keyCode==13) mycheck(myform)" maxlength="20"></td>
<td> </td>
</tr>
</table>
</form></td>
</tr>
</table>
</td>
</tr>
<tr>
<td><img src="Images/Login_M_bottom.gif" width="322" height="53" border="0" usemap="#Map"></td>
</tr>
</table>
<map name="Map">
<area shape="rect" coords="164,8,246,26" href="#" onClick="window.close();">
<area shape="rect" coords="76,8,158,26" href="#" onClick="mycheck(myform)">
</map>
</body>
</html>（2）运行页面
https://www.xinyizhishu.top/jsC/sc/12_8/
（3）Tips
usemap="#Map"。
<map name="map">
<area shap="rect" coords="82,17,125,39" href="#" onClick="manage()">
var hdc=window.open('Login_M.html','','width=342,height=284');
width=screen.width;
height=screen.height;
hdc.moveTo((width-322)/2,(height-206)/2);
onClick="window.Close()";
myform.submit();
9. 练习9
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>窗口自动滚动</title>
</head>
<body>
<img src="1.bmp">
<script type="text/javascript">
var position = 0;
function scroller(){
position++;
scrollTo(0,position);
clearTimeout(timer);
var timer = setTimeout("scroller()",1000);
}
scroller();
</script>
</body></html>（2）运行页面
https://www.xinyizhishu.top/jsC/sc/12_9/
（3）Tips
为什么bmp不显示？
scrollTo(0,position);
clearTimeout(timer);
timer=setTimeOut("scroller()",100);
10. 练习10
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>实时显示日期时间</title>
</head>
<body style="background-image: url('Images/manager.jpg'); background-size: cover; background-repeat: no-repeat;">
<div id="time"></div>
<script type="text/javascript">
function ShowTime(){
var today = new Date();//创建日期对象
var hour = today.getHours();//获取小时数
var minu = today.getMinutes();//获取分钟数
var seco = today.getSeconds();//获取秒数
if(hour < 10)//如果小时数小于10
hour ="0" + hour;//在小时数前面补0
if(minu < 10)//如果分钟数小于10
minu ="0" + minu;//在分钟数前面补0
if(seco < 10)//如果秒数小于10
seco ="0" + seco;//在秒数前面补0
document.getElementById("time").innerHTML="-------"+today.getFullYear()+"年"+(today.getMonth()+1)+"月"+today.getDate()+"日"+hour+"时"+minu+"分"+seco+"秒"+"-------";
window.setTimeout("ShowTime()",1000);//每隔1秒钟调用一次ShowTime()函数
}
ShowTime();//调用函数
</script>
</body>
</html>（2）运行页面
https://www.xinyizhishu.top/jsC/sc/12_10/
（3）Tips
window.setTimeout("ShowTime()",1000)。
二、编程训练
1. 训练1
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
ul{list-style: none;
width:300px;
height: 30px;
line-height: 30px;
border-bottom: 1px dashed #333333;
}
ul:first-child{
font-weight: bolder;
border: none;
}
ul li{
width: 100px;
text-align: center;
float: left;
}
</style>
</head>
<body>
<div id="myDiv">
<ul>
<li>歌曲名称</li>
<li>主唱</li>
<li>在线试听</li>
</ul>
<ul>
<li>你的样子</li>
<li>林志炫</li>
<li><a href="#" onClick="listen()"><img src="images/listen.png"></a></li>
</ul>
<ul>
<li>只要有你</li>
<li>孙楠/那英</li>
<li><a href="#" onClick="listen()"><img src="images/listen.png"></a></li>
</ul>
<ul>
<li>宽容</li>
<li>张信哲</li>
<li><a href="#" onClick="listen()"><img src="images/listen.png"></a></li>
</ul>
</div>
<script type="text/javascript">
function listen(){
alert("只有会员才能播放歌曲，请登录！");
}
</script>
</body>
</html>（2）运行页面
https://www.xinyizhishu.top/jsC/sc/12_11/
（3）Tips
ul:first-child 指ul本身。
2. 训练2
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function logout(){
var bool = window.confirm("您确定退出登录吗？");//弹出确认对话框
if(bool == true){//如果单击了对话框中的“确定”按钮
alert("您已退出登录");//弹出警告对话框
}else{
return false;//返回false
}
}
</script>
</head>
<body>
<a href="#" onclick="return logout()">退出登录</a>
</body>
</html>（2）运行页面
https://www.xinyizhishu.top/jsC/sc/12_12/
（3）Tips
window.confirm，"return logout()"返回false阻止浏览器默认行为。
3. 训练3
（1）源代码
index.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table width="400" border="0" cellspacing="0" cellpadding="0" style="float:left; border: 1px solid #dadada; margin-right: 8px;margin-bottom: 8px">
<tr>
<td width="52%" valign="middle"><a href="#"><img name="news" src="images/10.jpg" width="100%" height="260" alt="" border="0" style=" border-color:#CCCCCC; margin:0px; " /></a></td>
<td valign="top">
<table width="95%" border="0" cellspacing="0" cellpadding="0" style="margin-left: 14px">
<tr>
<td height="68" colspan="2" style="font-size:20px; padding-left: 0px;"><a href="#">飓风营救</a></td>
</tr>
<tr>
<td height="35" valign="middle">导演：</td>
<td>皮埃尔.莫瑞尔</td>
</tr>
<tr>
<td width="50" height="35" valign="middle" style="">主演：</td>
<td >连姆.尼森</td>
</tr>
<tr>
<td height="35" valign="middle">类型：</td>
<td>动作片</td>
</tr>
<tr>
<td height="35" colspan="2" valign="middle" style="padding-left:2%;">
<a href="#"><img src="images/online_icon.png" border="0" alt="在线观看" /></a>
<img src="images/show_icon.png" alt="介绍" border="0" style="cursor:pointer;" onclick="javascript:window.open('intro.html','new','height=430,width=610,top=100,left=400');"/></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
intro.html：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <table width="600" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="12"> </td><td colspan="3"><span style="font-size: 20px;color: #2bb673; border-bottom: 4px solid #2bb673; line-height: 54px; margin: 0 0 6px 0px; padding-bottom: 10px">电影详情</span></td> </tr> <tr><td width="12"></td><td colspan="2" height="1" bgcolor="#e5e5e5"></td></tr> <tr> <td></td> <td valign="top"> <table width="98%" border="0" cellspacing="0" cellpadding="0" > <tr> <td width="20%" height="" valign="middle"><img name="news" src="images/10.jpg" width="140" height="181" alt="" border="0" style=" border-color:#CCCCCC; margin-top:15px; margin-left:0px; margin-bottom:15px; margin-right:0px;" /></td> <td width="80%" valign="top"> <table border="0" cellspacing="0" cellpadding="0" style="margin-top:10px; padding-left:20px;"> <tr> <td colspan="2" height="40" style="font-size:24px; font-weight:bolder;">飓风营救</td> </tr> <tr> <td width="280" height="30" style="font-size:18px;">导演：皮埃尔.莫瑞尔</td> </tr> <tr> <td height="30" style="font-size:18px;">主演：连姆.尼森</div></td> </tr> <tr> <td height="30" style="font-size:18px;">类型：动作片</td> </tr> <tr> <td height="30" style="font-size:18px;">语言：英文</td> </tr> <tr> <td height="30" style="font-size:18px;">发行时间：2008-04-09</td> </tr> </table> </td> </tr> <tr> <td height="48" colspan="2" style="font-size:18px;"> 影片详情:</td> </tr> <tr> <td colspan="2" style="font-size:14px; line-height:23px;"> 该片讲述的是Bryan（连姆.尼森饰）是一名退休的特工，常年的特工生活使其与妻子女儿的关系越来越疏远。一次，女儿Kim（玛姬.格蕾斯饰）想征得Bryan同意去巴黎游玩，身为父亲的Bryan并不放心17岁的女儿独自出行，在一番争吵后，固执的Bryan终于答应女儿。然而在巴黎，Kim却遭到了黑帮卖淫团伙的拐卖。为拯救女儿，这名老特工重新出山。</td> </tr> </table> </td> </tr> </table> </body> </html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/12_13/
（3）Tips
window.open。
4. 训练4
（1）源代码
index.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img src="index.jpg">
<script type="text/javascript">
window.open("ad.html","advertise","width=561,height=181,top=10,left=20");
</script>
</body>
</html>
ad.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
margin:0px;
}
</style>
</head>
<body onload="window.setTimeout('window.close()',5000)">
<a href="#"><img src="ad.JPG" width="557" height="176" border="0" /></a>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/12_14/
（3）Tips
window.setTimeout('window.close()',5000)。
5. 训练5
（1）源代码
index.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
function openWin(){
window.open('demo.html','','height=181,width=561');
}
</script>
<input type="button" value="打开窗口" onclick="openWin()" />
</body>
</html>
demo.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body onLoad="drop()">
<img src="1.jpg" width="557" height="176">
<script type="text/javascript">
var heig=window.screen.availHeight;
alert(heig+","+window.moveBy);
function drop() {
var heig=window.screen.availHeight;
alert(heig+","+window.moveBy());
if(window.moveBy){
for(i = Math.floor(heig/1); i > 0; i--){
window.moveBy(0,1);
}
}
}
</script>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/12_15/
（3）Tips
window.moveBy(0,1)已经失效了。
6. 训练6
（1）源代码
index.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<input type="text" name="num" size="1" value="0" />
<input type="button" name="start" value="开始计时" onClick="sta();" />
<input type="button" name="pause" value="暂停计时" onClick="pau();" />
</form>
<script type="text/javascript">
var flag=0;
var timeID;
function sta(){
if(flag==0){
beg();
flag=1;
}
}
function pau(){
clearTimeout(timeID);
flag=0;
}
function beg(){
var i=form1.num.value;
i++;
form1.num.value=i;
timeID=setTimeout("beg()",1000);
}
</script>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/12_16/
（3）Tips
必须加flag，不然会创建很多个计时器累加。
三、实践与练习
1. 实践1
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var num1,num2,result,answer;
while(true){
num1 = Math.floor(Math.random()*9)+1;
num2 = Math.floor(Math.random()*9)+1;
result = num1 + num2;
answer = prompt(num1 + "+" + num2 + "=","0");
alert("啥也没有是啥？"+answer);
if(answer != null){
if(!confirm(((answer == result) ? "正确" : "错误") + "！是否继续？")){
break;
}
}else{
break;
}
}
</script>
</body>
</html>（2）运行页面
https://www.xinyizhishu.top/jsC/sc/12_17/
（3）Tips
confirm("正确") ，null表示点的取消。
2. 实践2
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="show"></div>
<script type="text/javascript">
var answer=window.prompt("2012年奥运会在哪座城市举办？\n\nA.雅典\nB.北京\nC.伦敦\nD.里约热内卢","");
switch(answer){
case "a":
case "A":
show.innerHTML="错！雅典是2004年奥运会的举办城市";
break;
case "b":
case "B":
show.innerHTML="错！北京是2008年奥运会的举办城市";
break;
case "c":
case "C":
show.innerHTML="正确！伦敦是2012年奥运会的举办城市";
break;
case "d":
case "D":
show.innerHTML="错！里约热内卢是2016年奥运会的举办城市";
break;
case null:
show.innerHTML="";
break;
default:
show.innerHTML="只能选填字母A，B，C或D";
break;
}
</script>
</body>
</html>（2）运行页面
https://www.xinyizhishu.top/jsC/sc/12_18/
（3）Tips
这样的写法。
3. 实践3
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body onLoad="showPic()">
<div id="box"></div>
<script type="text/javascript">
var a=1;
function showPic(){
var box=document.getElementById('box');
alert(a);
if(a>5){
a=1;
box.innerHTML="";
}
box.innerHTML+='<img src="images/0'+a+'.png"/>';
a+=1;
setTimeout(showPic,1000);
}
</script>
</body>
</html>（2）运行页面
https://www.xinyizhishu.top/jsC/sc/12_19/
（3）Tips
这种循环起来为什么a=1就弹不出来。有一个index1.html作对比。