首页技术为王JavascriptJS入门到精通 第12章 Window对象

JS入门到精通 第12章 Window对象

分类Javascript时间2026-06-24 09:38:00发布信义之树浏览8
导读：一、练习 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>&nbsp;<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>&nbsp;<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>&nbsp;<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>&nbsp;<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>&nbsp;<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>&nbsp;<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：将当前窗口的浏览历史记录复制到新窗口中（这样新窗口的“后退”按钮就能起作用）。





























JS入门到精通 第11章 文档对象模型（DOM）

相关内容

更多

游客 回复需填写必要信息
↑