Window对象表示一个浏览器窗口,它是一个全局对象,浏览器窗口内所有的计算和操作都在窗口环境中,因此Window对象的属性可以直接作为全局变量来使用。
Winodw对象的主要属性如下表所示:
Winodw对象的主要方法如下表所示:
注释(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>