一、BOM编程
使用到的对象包括:window对象、location对象、history对象 window对象
代表了浏览器的一个窗口,提供了对窗口新建、关闭、提示等函数,调用window对象的属性和方法时,window. 可以省略
常用的函数:
1. 提示相关的函数:
(1)alert函数 :提示框的函数
(2)confirm函数:确认框
<html lang="en">
<head>
<script>
function okBtn(){
if(confirm("是否要提交订单?")){
alert("订单提交成功");
}
}
</script>
</head>
<body>
<input type="button" value = "提交" onclick="okBtn();">
</body>
</html>
2. 窗口操作相关的函数
(1)close函数: 关闭窗口
(2)open函数:新建窗口
<!doctype html>
<html lang="en">
<head>
<script>
function okBtn(){
window.close();
}
function openBtn(){
window.open("http://www.baidu.com",null,
"height=200,width=400,status=yes,toolbar=no,menubar=no,location=no");
}
</script>
</head>
<body>
<input type="button" value = "关闭" onclick="okBtn();">
<input type="button" value = "打开" onclick="openBtn();">
</body>
</html>
(3)showModalDialog函数: 打开一个模式化窗口,是当前窗口的子窗口,子窗口可以向父窗口传值,子窗 口不关闭,父窗口不能操作,也就是,在父窗口调用了showModalDialog方法,进入到阻塞状态,只有 子窗口关闭,showModalDialog方法才执行完毕,父窗口解除阻塞。
很多浏览器已经不支持模式化窗口了,要实现模式化窗口的功能需求,可以使用div+css+js来实现
3. 定时功能的函数
(1)setTimeout函数:经过执行毫秒后,执行一段js代码
<!doctype html>
<html lang="en">
<head>
<script>
var timeoutId ;
function startBtn(){
timeoutId = window.setTimeout("setTimeoutOption();",2000);
}
function stopBtn(){
window.clearTimeout(timeoutId);
}
function setTimeoutOption(){
alert('Hello');
}
</script>
</head>
<body>
<input type="button" value = "开始" onclick="startBtn();">
<input type="button" value = "停止" onclick="stopBtn();">
</body>
</html>
(2)setInterval函数: 定时器,在执行的时间 重复执行js代码
图片滚动的小示例:
<!doctype html>
<html lang="en">
<head>
<script>
var arr = ["848.jpg","849.jpg","850.jpg"];
var index = 1;
var timeoutId ;
function startBtn(){
//每500毫秒切换一张
timeoutId = window.setInterval("setTimeoutOption();",500);
}
function stopBtn(){
window.clearInterval(timeoutId);
}
function setTimeoutOption(){
var img = document.getElementById("img");
img.src = arr[index++];
if(index>=arr.length){
index = 0;
}
}
</script>
</head>
<body>
<!--点击开始按钮,自动开始切换图片-->
<input type="button" value = "开始" onclick="startBtn();">
<input type="button" value = "停止" onclick="stopBtn();"><br>
<img id="img" src="848.jpg" width="800" height="500">
</body>
</html>
二、location对象
包含关于当前URL的信息
href属性:获取或设置浏览器窗口的URL地址
<input type="button" value="百度" onclick="baiduOnclick();">
<script>
function baiduOnclick(){
location.href="http://www.baidu.com";
}
</script>
三、history对象
包含了用户已浏览的url信息
<input type="button" value="后退" onclick="history.back();">
<input type="button" value="向前" onclick="history.forward();">