Skip to content

Widnow对象

名称 说明
status 指定浏览器状态栏中显示的临时消息
screen 有关客户端的屏幕和显示性能的信息。
history 有关客户访问过的URL的信息。
location 有关当前 URL 的信息。
document 表示浏览器窗口中的HTML文档
alert ("提示信息") 显示一个带有提示信息和确定按钮的对话框
confirm("提示信息“) 显示一个带有提示信息、确定和取消按钮的对话框
open ("url","name") 打开具有指定名称的新窗口，并加载给定 URL 所指定的文档；如果没有提供 URL，则打开一个空白文档
close ( ) 关闭当前窗口
showModalDialog( ) 在一个模式窗口中显示指定的HTML文档
setTimeout("函数",毫秒数) 设置定时器：经过指定毫秒值后执行某个函数
onLoad 在窗口或框架完成文档加载时触发

window对象操作示例

动态打开窗口

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<SCRIPT language="javascript">
  function openwindow() {
    //在窗口状态栏中设置文本
    window.status = "系统当前状态：您正在注册用户......";
    //获取窗口的高度
    if (window.screen.width > 1024 && window.screen.height > 768)
      //使用open方法打开新窗口
      window.open("register.html");
    else
      //弹出警告对话框
      window.alert("请设置分辨率为1024x768，然后再打开");
  }
  function closewindow() {
    //弹出确认对话框
    if (window.confirm("您确认要退出系统吗？"))
      //关闭当前窗口
      window.close();
  }
</SCRIPT>
源代码
js_window_open1.html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<HTML>

<HEAD>
  <META http-equiv="Content-Type" content="text/html; charset=utf-8">
  <TITLE>window对象</TITLE>
  <SCRIPT language="javascript">
    function openwindow() {
      //在窗口状态栏中设置文本
      window.status = "系统当前状态：您正在注册用户......";
      //获取窗口的高度
      if (window.screen.width > 1024 && window.screen.height > 768)
        //使用open方法打开新窗口
        window.open("register.html");
      else
        //弹出警告对话框
        window.alert("请设置分辨率为1024x768，然后再打开");
    }
    function closewindow() {
      //弹出确认对话框
      if (window.confirm("您确认要退出系统吗？"))
        //关闭当前窗口
        window.close();
    }
  </SCRIPT>
</HEAD>

<BODY bgcolor="#CCCCCC">
  <TABLE border="0" align="center" bgcolor="#FFFFFF">
    <TR>
      <TD><IMG src="images/head.jpg" width="761" height="389"></TD>
    </TR>
    <TR>
      <TD><IMG src="images/foot.jpg" width="502" height="90" align="top">
        <!-- 添加单击事件 -->
        <INPUT type="button" name="regButton" value=" 用户注册 " onclick="openwindow( )">
        <INPUT type="button" name="exitButton" value=" 退 出 " onclick="closewindow( )">
      </TD>
    </TR>
  </TABLE>
</BODY>

</HTML>

open函数

open("打开窗口的url"，"窗口名"，"窗口特征")

窗口的特征如下，可以任意组合：

  • height： 窗口高度；
  • width： 窗口宽度；
  • top： 窗口距离屏幕上方的象素值；
  • left：窗口距离屏幕左侧的象素值；
  • toolbar： 是否显示工具栏，yes为显示；
  • menubar，scrollbars 表示菜单栏和滚动栏。
  • resizable： 是否允许改变窗口大小，yes或1为允许
  • location： 是否显示地址栏，yes或1为允许
  • status：是否显示状态栏内的信息，yes或1为允许；

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<SCRIPT language="javascript">
  function openwindow() {
    window.status = "系统当前状态：您正在注册用户......";
    if (window.screen.width > 1024 && window.screen.height > 768)
      open("register.html", "注册窗口", "toolbars=0, location=0, statusbars=0, menubars=0,width=700,height=550,scrollbars=1");
    else
      window.alert("请设置分辨率为1024x768，然后再打开");
  }
</SCRIPT>

<INPUT type="button" name="regButton" value=" 用户注册 " onclick="openwindow( )">

源代码
js_window_open2.html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<HTML>

<HEAD>
  <META http-equiv="Content-Type" content="text/html; charset=utf-8">
  <TITLE>window对象</TITLE>
  <SCRIPT language="javascript">
    function openwindow() {
      window.status = "系统当前状态：您正在注册用户......";
      if (window.screen.width > 1024 && window.screen.height > 768)
        open("register.html", "注册窗口", "toolbars=0, location=0, statusbars=0, menubars=0,width=700,height=550,scrollbars=1");
      else
        window.alert("请设置分辨率为1024x768，然后再打开");
    }
    function closewindow() {
      if (window.confirm("您确认要退出系统吗？"))
        window.close();
    }
  </SCRIPT>
  <STYLE type="text/css">
    <!--
    body {
      background-color: #CCCCCC;
    }
    -->
  </STYLE>

</HEAD>

<BODY>
  <TABLE border="0" align="center" bgcolor="#FFFFFF">
    <TR>
      <TD><IMG src="images/head.jpg" width="761" height="389"></TD>
    </TR>
    <TR>
      <TD><IMG src="images/foot.jpg" width="502" height="90" align="top">
        <INPUT type="button" name="regButton" value=" 用户注册 " onclick="openwindow( )">
        <INPUT type="button" name="exitButton" value=" 退 出 " onclick="closewindow( )">
      </TD>
    </TR>
  </TABLE>
</BODY>

</HTML>

使用超链接调用方法来打开注册新窗口

1
<H3><A href="javascript: openwindow( ) ">用户注册 </A></H3>
源代码
js_window_open3.html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<HTML>

<HEAD>
  <META http-equiv="Content-Type" content="text/html; charset=utf-8">
  <TITLE>window对象</TITLE>
  <SCRIPT language="javascript">
    function openwindow() {
      window.status = "系统当前状态：您正在注册用户......";
      if (window.screen.width == 1024 && window.screen.height == 768)
        open("register.html", "注册窗口", "toolbars=0, location=0, statusbars=0, menubars=0,width=700,height=550,scrollbars=1");
      else
        window.alert("请设置分辨率为1024x768，然后再打开");

    }
    function closewindow() {
      if (window.confirm("您确认要退出系统吗？"))
        window.close();
    }
  </SCRIPT>
  <STYLE type="text/css">
    <!--
    /*设置无下划线的超连接样式*/
    A {
      color: blue;
      text-decoration: none;
    }
    A:hover {
      /*鼠标在超链接上悬停时变为颜色*/
      color: red;
    }
    -->
  </STYLE>
</HEAD>

<BODY bgcolor="#CCCCCC">
  <TABLE width="100%" height="100%" border="0">
    <tr>
      <td align="center" valign="middle">
        <TABLE border="0" align="center" bgcolor="#FFFFFF">
          <TR>
            <TD colspan="3"><IMG src="images/head.jpg" width="761" height="389"></TD>
          </TR>
          <TR>
            <TD width="502">
              <IMG src="images/foot.jpg" width="502" height="90" align="top">
            </TD>
            <TD width="86" valign="top">
              <H3><A href="javascript: openwindow( ) ">用户注册 </A></H3>
            </TD>
            <TD width="263" valign="top">
              <H3><A href="javascript: closewindow( ) ">退 出</A></H3>
            </TD>
          </TR>
        </TABLE>
      </td>
    </tr>
  </TABLE>
</BODY>

</HTML>

onLoad事件

1
2
3
<BODY onLoad="openwindow( )">
  <H2>&nbsp;</H2>
</BODY>
源代码
js_window_open4.html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<HTML>

<HEAD>
  <META http-equiv="Content-Type" content="text/html; charset=utf-8">
  <SCRIPT language="JavaScript">
    function openwindow() {
      open("adv.htm", "这是一个广告", "toolbars=0, scrollbars=0, location=0, statusbars=0, menubars=0, resizable=0, width=700, height=250");
    }
  </SCRIPT>
  <STYLE type="text/css">
    <!--
    body {
      background-image: url(images/index_image.jpg);
    }
    -->
  </STYLE>
</HEAD>

<BODY onLoad="openwindow( )">
  <H2>&nbsp;</H2>
</BODY>

</HTML>

模式窗口

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
  <SCRIPT language="javascript">
    function openwindow() {
      window.status = "系统当前状态：您正在注册用户......";
      if (window.screen.width > 1024 && window.screen.height > 768)
        window.showModalDialog("register.html", "注册窗口", "toolbars=0, location=0, statusbars=0, menubars=0,width=700,height=550,scrollbars=1");
      else
        window.alert("请设置分辨率为1024x768，然后再打开");
    }
    function closewindow() {
      if (window.confirm("您确认要退出系统吗？"))
        window.close();
    }
  </SCRIPT>
源代码
js_window_open5.html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<HTML>

<HEAD>
  <META http-equiv="Content-Type" content="text/html; charset=utf-8">
  <TITLE>window对象</TITLE>
  <SCRIPT language="javascript">
    function openwindow() {
      window.status = "系统当前状态：您正在注册用户......";
      if (window.screen.width > 1024 && window.screen.height > 768)
        window.showModalDialog("register.html", "注册窗口", "toolbars=0, location=0, statusbars=0, menubars=0,width=700,height=550,scrollbars=1");
      else
        window.alert("请设置分辨率为1024x768，然后再打开");
    }
    function closewindow() {
      if (window.confirm("您确认要退出系统吗？"))
        window.close();
    }
  </SCRIPT>
  <STYLE type="text/css">
    <!--
    /*设置无下划线的超连接样式*/
    A {
      color: blue;
      text-decoration: none;
    }

    A:hover {
      /*鼠标在超链接上悬停时变为颜色*/
      color: red;
    }
    -->
  </STYLE>
</HEAD>

<BODY bgcolor="#CCCCCC">
  <TABLE border="0" align="center" bgcolor="#FFFFFF">
    <TR>
      <TD colspan="3"><IMG src="images/head.jpg" width="761" height="389"></TD>
    </TR>
    <TR>
      <TD width="502">
        <IMG src="images/foot.jpg" width="502" height="90" align="top">
      </TD>
      <TD width="86" valign="top">
        <H3><A href="javascript: openwindow( ) ">用户注册 </A></H3>
      </TD>
      <TD width="263" valign="top">
        <H3><A href="javascript: closewindow( ) ">退 出</A></H3>
      </TD>
    </TR>
  </TABLE>
</BODY>

</HTML>

Date对象做时钟显示

Date 对象存储的日期为自 1970 年 1 月 1 日 00:00:00 以来的毫秒数

var 日期对象 = new Date (年、月、日等参数)

例如：

var  mydate=new Date("July 29, 2007,10:30:00" )

如果没有参数，表示当前日期和时间 例如：

var today = new Date(  )

Date成员方法

Date 方法的分组

方法分组 说 明
setXxx 这些方法用于设置时间和日期值
getXxx 这些方法用于获取时间和日期值

用作Date方法的参数的整数范围：

值 整 数
Seconds 和 minutes 0 至 59
Hours 0 至 23
Day 0 至 6（星期几）
Date 1 至 31（月份中的天数）
Months 0 至 11（一月至十二月）

示例

显示当前时间

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<SCRIPT language="javaScript">
  function disptime() {
    var now = new Date();
    var hour = now.getHours();
    if (hour >= 0 && hour <= 12)
      document.write("<H2>上午好!</H2>")
    if (hour > 12 && hour <= 18)
      document.write("<H2>下午好!</H2>");
    if (hour > 18 && hour < 24)
      document.write("<H2>晚上好!</H2>");
    document.write("<H2>今天日期:" + now.getYear() + "年" + (now.getMonth() + 1) + "月" + now.getDate() + "日</H2>");
    document.write("<H2>现在时间:" + now.getHours() + "点" + now.getMinutes() + "分</H2>");
  }
</SCRIPT>

<BODY onload="disptime( )"></BODY>
源代码
js_window_date.html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<HTML>

<HEAD>
  <META http-equiv="Content-Type" content="text/html; charset=utf-8">
  <TITLE>date对象</TITLE>

  <SCRIPT language="javaScript">
    function disptime() {
      var now = new Date();
      var hour = now.getHours();
      if (hour >= 0 && hour <= 12)
        document.write("<H2>上午好!</H2>")
      if (hour > 12 && hour <= 18)
        document.write("<H2>下午好!</H2>");
      if (hour > 18 && hour < 24)
        document.write("<H2>晚上好!</H2>");
      document.write("<H2>今天日期:" + now.getYear() + "年" + (now.getMonth() + 1) + "月" + now.getDate() + "日</H2>");
      document.write("<H2>现在时间:" + now.getHours() + "点" + now.getMinutes() + "分</H2>");
    }
  </SCRIPT>
</HEAD>

<BODY onload="disptime( )">
</BODY>

</HTML>

动态时钟显示

setTimeout的用法：

setTimeout（“调用的函数”,”定时的时间”）

例：

var myTime＝setTimeout("disptime( )", 1000 );

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<SCRIPT language="JavaScript">
  function disptime() {
    var time = new Date(); //获得当前时间
    var hour = time.getHours();  //获得小时、分钟、秒
    var minute = time.getMinutes();
    var second = time.getSeconds();

    /*设置文本框的内容为当前时间*/
    document.myform.myclock.value = hour + ":" + minute + ":" + second + " ";
    /*设置定时器每隔1秒（1000毫秒），调用函数disptime()执行，刷新时钟显示*/
    var myTime = setTimeout("disptime()", 1000);
  }
</SCRIPT>

<INPUT name="myclock" type="text" value="" size="10">
源代码
js_window_settimeout1.html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<HTML>

<HEAD>
  <META http-equiv="Content-Type" content="text/html; charset=utf-8">
  <TITLE>settimeout方法</TITLE>
  <SCRIPT language="JavaScript">
    function disptime() {
      var time = new Date(); //获得当前时间
      var hour = time.getHours();  //获得小时、分钟、秒
      var minute = time.getMinutes();
      var second = time.getSeconds();

      /*设置文本框的内容为当前时间*/
      document.myform.myclock.value = hour + ":" + minute + ":" + second + " ";
      /*设置定时器每隔1秒（1000毫秒），调用函数disptime()执行，刷新时钟显示*/
      var myTime = setTimeout("disptime()", 1000);
    }
  </SCRIPT>
  <STYLE type="text/css">
    <!--
    /*设置样式：无边框的文本框*/
    INPUT {
      font-size: 30px;
      border-style: none;
      background-color: #FF8B3B;
    }
    -->
  </STYLE>
</HEAD>

<BODY onLoad="disptime( )">
  <FORM NAME="myform">
    <TABLE width="100%" border="0" align="center">
      <TR>
        <TD colspan="3"><IMG src="images/mosou.jpg" width="1001" height="457"></TD>
      </TR>
      <TR>
        <TD width="37%">&nbsp;</TD>
        <TD width="41%">
          <H2>当前时间：
            <INPUT name="myclock" type="text" value="" size="10">
          </H2>
        </TD>
        <TD width="22%">&nbsp;</TD>
      </TR>
    </TABLE>
  </FORM>
</BODY>

</HTML>

history和location对象

名称 说明
back( ) 加载 History 列表中的上一个 URL。
forward( ) 加载 History 列表中的下一个 URL。
go("url" or number) 加载 History 列表中的一个 URL，或要求浏览器移动指定的页面数。

**Location对象 **

名称 说明
host 设置或检索位置或 URL 的主机名和端口号
hostname 设置或检索位置或 URL 的主机名部分
href 设置或检索完整的 URL 字符串
assign("url") 加载 URL 指定的新的 HTML 文档。
reload() 重新加载当前页
replace("url") 通过加载 URL 指定的文档来替换当前文档 

1
2
3
<TD width="4%"><A href="javascript: history.back( )">返回 </A></TD>
<TD width="4%"><A href="javascript: history.forward( )">前进</A></TD>
<TD width="4%"><A href="javascript: location.reload( )">刷新</A></TD>
源代码 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<HTML>

<HEAD>
  <META http-equiv="Content-Type" content="text/html; charset=utf-8">
  <TITLE>教育</TITLE>
  <STYLE type="text/css">
    <!--
    /*设置无下划线的超连接样式*/
    A {
      color: blue;
      text-decoration: none;
    }

    A:hover {
      /*鼠标在超链接上悬停时变为颜色*/
      color: red;
    }
    -->
  </STYLE>
</HEAD>

<BODY>
  <FORM name="form1" method="post" action="">
    <TABLE width="100%" border="0" cellpadding="0" cellspacing="0">
      <TR>
        <TD colspan="7"><IMG src="./images/head1.jpg" width="994" height="37"></TD>
      </TR>
      <TR>
        <TD width="15%">&nbsp;</TD>
        <TD width="32%"><A href="#">1</A><A href="#"></A><A href="#">&nbsp;2</A><A href="#"></A><A
            href="#">&nbsp;3</A><A href="#">&nbsp;4</A><A href="#"></A><A href="#">&nbsp;5</A><A href="#"></A><A
            href="#">&nbsp;6</A><A href="#">&nbsp;下一页</A> </TD>
        <TD width="4%"><A href="javascript: history.back( )">返回 </A></TD>
        <TD width="4%"><A href="javascript: history.forward( )">前进</A></TD>
        <TD width="4%"><A href="javascript: location.reload( )">刷新</A></TD>
        <TD width="6%"><A href="./index.html">首页</A></TD>
        <TD width="35%">
          跳转到其他版块
          <SELECT name="selTopic" id="selPTopic" onChange="javascript: location=this.value">
            <OPTION value="news.html">新闻贴图</OPTION>
            <OPTION value="gard.html">网上谈兵</OPTION>
            <OPTION value="IT.html">IT茶馆</OPTION>
            <OPTION value="education.html" selected>教育大家谈</OPTION>
          </SELECT>
        </TD>
      </TR>
      <TR>
        <TD colspan="7"><IMG src="./images/content1.jpg" width="995" height="576"></TD>
      </TR>
    </TABLE>
  </FORM>
</BODY>

</HTML>