Logo

郎哥编程

Window对象

2020-12-16 223

Window对象表示一个浏览器窗口,它是一个全局对象,浏览器窗口内所有的计算和操作都在窗口环境中,因此Window对象的属性可以直接作为全局变量来使用。

Winodw对象的主要属性如下表所示:

01.PNG

Winodw对象的主要方法如下表所示:

02.PNG

注释(1)

在浏览器窗口弹出有一个按钮的对话框,对话框带有一段消息和确定按钮。

语法:

alert(message)

参数message为要显示的消息,类型为字符串。

案例代码:

alert(“Hello”)

注释(2)

在浏览器窗口弹出一个对话框,对话框带有一段消息以及“确定”和“取消”两个按钮。

语法:

confirm(message)

参数message为要显示的消息,类型为字符串。

案例11:使用confirm弹出对话框(案例代码见unit3\case11.html)。

<html>
<head>
<title>JavaScript开发案例</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
  function show_confim(){
    var press = confirm("请单击确定或取消按钮")
    // 按下确定按钮
    if ( press )
    {
      document.getElementById("id_text").value = "单击确定按钮"
    }
    else
    {
      document.getElementById("id_text").value = "单击取消按钮"
      }
  }
</script>
</head>
<body>
  <h3>JavaScript开发案例</h3>
  <p> <input type="text" id="id_text"/></p>
  <p><input type="button" value="confirm" onclick="show_confim()"/></p>
</body>
<html>

注释(3)

open()方法用于打开一个新的或已存在的窗口。

语法:

open(URL,name,features,replace)

参数URL是一个可选参数,字符串类型。指定要被加载的HTML文档的URL地址。若没有提供URL,该方法会打开一个空的窗口。

参数name是一个可选参数,字符串类型。设置打开的窗口名称,该名称可以用于form或a标签的TARGET属性。

参数features是一个可选参数,字符串类型。用于设置窗口类型,若没有提供该参数,窗口为标准类型。

参数replace是一个可选参数,布尔类型。设置URL是否在浏览历史中创建一个新的条目或替换浏览历史的当前条目。若为true,替换浏览历史的当前条目。

案例12:使用opne打开一个新的浏览器窗口(案例代码见unit3\case12.html)。

<html>
<head>
<title>JavaScript开发案例</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
   function open_window(){
    window.open("http://www.milihua.com")
    }
</script>
</head>
<body>
  <h3>JavaScript开发案例</h3>
  <p><input type="button" value="打开新窗口" onclick="open_window()"/></p>
</body>
<html>

注释(4)

prompt()方法在浏览器窗口弹出一个带有输入框、以及确定和取消两个按钮的对话框。

语法:

prompt(text,defaultText)

参数text是在对话框显示的提示内容,类型为字符串。参数defaultText是默认的输入内容,类型是字符串。

案例13:使用prompt打开一个可输入的对话框(案例代码见unit3\case13.html)。

<html>
<head>
<title>JavaScript开发案例</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
  function open_dlg(){
   city = window.prompt("请输入城市名称:","北京")
   if( city != null && city != "" )
   {
     document.getElementById("id_city").innerText = city
   }
  }
</script>
</head>
<body>
  <h3>JavaScript开发案例</h3>
  <p>城市名称:<span style=" margin-left:30px;" id="id_city"></span></p>
  <p><input type="button" value="弹出提示框" onclick="open_dlg()"/></p>
</body>
<html>

注释(5)

setInterval()方法会设置一个时间周期和回调函数,每一个周期会调用回调函数。例如设置100毫秒一个周期,每隔100毫秒,回调函数就被调用。

语法:

setInterval(fun,millisec)

参数fun是回调函数,值可以是已定义的函数名称,也可以在参数中直接定义函数。参数millisec设置时间周期,单位是毫秒。

setInterval()方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的id值可用作 clearInterval() 方法的参数。

案例14:使用setInterval函数定期调用回调函数(案例代码见unit3\case14.html)。

<html>
<head>
<title>JavaScript开发案例</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
  count = 0;
  function test_setInterval(){
    // 每隔1000毫秒调用函数
    this.timer = window.setInterval(function() {
      count++;
      document.getElementById("id_count").innerText = count
     },1000);
  }
            
 // 停止计时
 function test_clearInterval() {
    clearInterval(this.timer)
  }
</script>
</head>
<body>
   <h3>JavaScript开发案例</h3>
   <p>计数:<span id="id_count"></span></p>
   <p><input type="button" value="计时开始" onclick="test_setInterval()"/></p>
  <p><input type="button" value="计时停止" onclick="test_clearInterval()"/></p>
</body>
<html>

案例代码应用setInterval()方法,实现了一个简单的计时器。函数的this指向Window对象,this.timer是在Window对象定义了一个timer属性。

注释(6)

setTimeout()用于在指定的毫秒数后调用回调函数。

语法:

setTimeout(fun,millisec)

参数fun是回调函数,该函数会在指定的毫秒数过后被调用,参数millisec是指定的毫秒数。

setTimeout()方法只调用一次回调函数,setInterval()方法多次调用回调函数。

案例15:使用setTimeout()函数(案例代码见unit3\case15.html)。

<html>
<head>
<title>JavaScript开发案例</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
  count = 0;
  function test_setTimeout(){
    // 1000毫秒后调用函数callback()
    window.setTimeout(callback,1000);
  }
            
  // 回调函数
  function callback() {
    document.getElementById("id_count").innerText = "callback()函数被调用"
  }
</script>
</head>
<body>
  <h3>JavaScript开发案例</h3>
  <p>1000毫秒后显示内容:<span id="id_count"></span></p>
  <p><input type="button" value="setTimeout()" onclick="test_setTimeout()"/></p>
</body>
<html>


代码在线纠错(通义千问 qwen-max)

支持粘贴多个代码文件,提交后由阿里云通义千问自动分析代码漏洞、语法错误、逻辑问题并给出修改建议。
您已解锁 AI 代码纠错功能,可正常使用!

评论区

登录 后发表评论
暂无评论