BOM编程

最新推荐文章于 2024-06-26 18:01:19 发布

原创最新推荐文章于 2024-06-26 18:01:19 发布 · 384 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #BOM

javaWeb 专栏收录该内容

33 篇文章

订阅专栏

一、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();">