9、BOM （浏览器对象模型）

2022-04-14 00:01:37

1、认识BOM

js

三个部分：

1、ECMAScript标准 ECMA5 ECMA6

2、BOM Browser Object Model 浏览器对象模型

3、DOM 文档对象类型

window对象下的函数。

alert()

格式：window.alert(参数)

功能：弹出一个警告框，并显示，传入的内容

【注】所有window开头的函数，都可以省略window调用。

window.alert(123);

confirm

格式：window.confirm(参数)

功能：弹出一个带确定和取消的提示框

返回值：点击确定，返回true,点击取消，返回false

            /*var res = confirm("我美么？");

			alert(res);*/

prompt

格式：window.prompt(参数)

参数：第一个参数，面板上显示的内容，第二个参数，输入框默认值

功能：这是一个带输入框的提示框

返回值：当点击确定，返回，输入的内容。当点击取消，返回null。

            /*var res = prompt("请输入一个数", 10)

			console.log(res);*/

2、open与opener

window.open("https://www.baidu.com", "百度", "width=400,height=400,top=200,left=200");

三个参数

第一个参数：打开的网站的url

第二个参数：打开的新窗口起个名字（仅仅是起个名字，看不到这个名字）

第三个参数：一串特殊意义字符串。

opener

【注】打开当前窗口的父窗口

    <body>

		<button onclick = "btnClick();">打开一个新窗口</button>

	</body>

	<script>

		var i = 0;

		function btnClick(){

			/*

				三个参数

				第一个参数：打开的网站的url

				第二个参数：打开的新窗口起个名字（仅仅是起个名字，看不到这个名字）

				第三个参数：一串特殊意义字符串。

			*/

			window.open("https://www.baidu.com", "百度", "width=400,height=400,top=200,left=200");

			/*while(i < 10){

				var str = "width=400,height=400,top=" + (200 + 10 * i) + ",left=" + (200 + 10 * i);

				window.open("https://www.baidu.com", "百度" + i, str);

				i++;

			}*/

		}

	</script>

父窗口：

    <style>

			body{

				background-color: yellow

			}

		</style>

	</head>

	<body>

		<h1>这里是父窗口</h1>

		<button onclick = "btnClick();">打开子窗口</button>

	</body>

	<script>

		function btnClick(){

			open("sub.html", "sub", "width=400,height=400,top=200,left=200");

		}

	</script>

子窗口

    <style>

			body{

				background-color: blue;

			}

		</style>

	</head>

	<body>

		<h1>这里是子窗口</h1>

		<button onclick = "btnClick();">按钮</button>

	</body>

	<script>

		/*

			chome不支持

		*/

		function btnClick(){

			// opener  打开当前窗口的父窗口的window对象

			// alert(opener);

			opener.document.write("我是子窗口");

		}

	</script>

3、history

window开头的属性也可以省略window

            /*alert(window.history);

			alert(history);*/

history对象

属性：history.length 当前窗口历史记录中的条数

history.back() 返回上一条记录

history.forward() 前进到下一条记录

history.go();

				传参： 0  刷新

				     正数    前进该条数的记录

				     负数    返回该条数的记录

            // alert(history.length);

			function btnBack(){

				history.forward();

			}

			function btnForWard(){

				history.back();

			}

			function btnGo(){

				history.go(-2);

			}

		</script>

	</head>

	<body>

		<button onclick = "btnBack();">前进</button>

		<button onclick = "btnForWard();">后退</button>

		<button onclick = "btnGo();">GO</button>

	</body>

4、location

// alert(window.location === window.document.location);

【注】上述，无论通过任何方式访问到location对象都是同一个。

location对象的属性

location 对象窗口上的地址栏

url 统一资源定位符。快递单

完整的url的格式：

https://www.baidu.com:8080/news?today=11&page=1#1

协议://主机名:端口号/路径?查询字符串#锚点

protocol 协议

		http://tianyufei.local/qwer/13location.html

		*/

		// alert(location.protocol);

hostname

                www.baidu.com    域名  是为了好记给IP起的别名

				61.135.169.125   IP 全球范围内你使用的网络，唯一的标识。

				port 端口号  当前电脑的软件在使用软件的时候，会随机分配一个端口号。

				浏览器端口号：8080

				FTP：2020

			// alert(location.hostname);

			// alert(location.port);

			// alert(location.host);

IP:端口号

pathname 路径名

		// alert(location.pathname);

search 查询字符串

			?username=tian&password=123     

		// alert(location.search);

hash 锚点 #100

		alert(location.hash);

location 方法

    <head>

		<meta charset="UTF-8">

		<title>Document</title>

		<script>

			function btnClick(){

				// location.assign("https://www.baidu.com");

				// location.replace("https://www.baidu.com");

可以传参，可以传true进行。

如果你传true，代表的是不经过缓存，直接从服务器重载。

                location.reload(true);

			}

location.assign() 跳转

【注】在本窗口中加载页面，并且会产生历史记录。

location.replace() 替换

【注】在本窗口中加载页面，不会产生历史记录。

location.reload() 重载

        </script>

	</head>

	<body>

		<button onclick = "btnClick();">百度</button>

	</body>

5、延时器

var ID = setTimeout(函数名, 毫秒数)

参数：1、函数名

2、毫秒数

返回值：该延时器的ID

【注】延迟对应毫秒数以后去执行一次函数，有且仅执行一次。

clearTimeout(ID)

功能：清除延时器。

    <head>

		<meta charset="UTF-8">

		<title>Document</title>

		<script>

			/*

				var ID = setTimeout(函数名, 毫秒数)

				参数：1、函数名

					 2、毫秒数

				返回值：该延时器的ID

				【注】延迟对应毫秒数以后去执行一次函数，有且仅执行一次。

				clearTimeout(ID)

				功能：清除延时器。

			*/

			var ID = setTimeout(function(){

				alert("五秒到了");

			}, 5000);

			function btnClick(){

				clearTimeout(ID);

			}

		</script>

	</head>

	<body>

		<button onclick = "btnClick();">取消掉</button>

	</body>

6、进度条

    <head>

		<meta charset="UTF-8">

		<title>Document</title>

		<style>

			#progress{

				width: 600px;

				height: 35px;

				border: 1px solid black;

				margin: 100px auto;

				position: relative;

			}

			#fill{

				position: absolute;

				width: 0px;

				background-color: red;

				height: 35px;

				left: 0px;

				top: 0px;

				line-height: 35px;

			}

			#num{

				position: absolute;

				right: 0;

				color: white;

				font-size: 18px

			}

		</style>

	</head>

	<body>

		<div id = "progress">

			<div id = "fill" >

				<span id = "num">0%</span>

			</div>

		</div>

	</body>

	<script>

		var oProgress = document.getElementById("progress");

		var oFill = document.getElementById("fill");

		var oNum = document.getElementById("num");

		var i = 0; //当前的宽

		/*

			人眼能识别的最小的间隔是18帧，电影院里面放的电影是24帧。

		*/

		var ID = setInterval(function(){

			i = i + 5;

			oFill.style.width = i + "px";

			//修改百分比

			oNum.innerHTML = parseInt((i / 600) * 100) + "%";

			if(i == 600){

				clearInterval(ID);

			}

		}, 30);

	</script>

码农公寓