JS中的BOM

最新推荐文章于 2024-04-23 09:10:13 发布

昱晟168

最新推荐文章于 2024-04-23 09:10:13 发布

阅读量374

点赞数

分类专栏：前端文章标签： javascript chrome 前端

本文链接：https://blog.csdn.net/weixin_47267628/article/details/126860705

版权

前端专栏收录该内容

21 篇文章 2 订阅

订阅专栏

`BOM`

1.`BOM`概述

BOM浏览器对象模型

BOM可以使用我们通过JS来操作浏览器
在BOM中为我们提供了一组对象，用来完成对浏览器的操作

BOM对象

window
- 代表的是整个浏览器的窗口，同时window也是网页中的全局对象
Navigator
- 代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器
Location
- 代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面
History
- 代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录，由于隐私原因该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页，而且该操作只在当次访问时有效
Screen
- 代表用户的屏幕的信息，通过该对象可以获取到用户的显示器相关的信息

这些BOM对象在浏览器中都是作为window对象属性保存的，可以通过window对象使用，也可以直接使用

2.`Navigator`对象

代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器

navigator.appName：返回浏览器中的名称，如：IE11或Chrome等

navigator.appCodeName：返回浏览器中的代码

navigator.platform：属性返回浏览器引擎的产品名称

navigator.userAgent：属性返回由浏览器发送到服务器的用户代理报头

3.`History`对象

方法：

**history.back();**可以用来回退到上一个页面，作用和浏览器浏览器回退按钮一样

**history.forward();**可以用来跳转下一个页面，作用和浏览器前进按钮一样

**history.go();**可以用来跳转到指定的页面，它需要一个整数作为参数，可以前进和后退

4.`Location`对象

**location.assign();**用来跳转到其他的页面，作用和直接修改location一样

**location.reload();**用于重新加载当前页面，作用和刷新按钮一样，如果在该方法传递一个true作为参数，则会强制清空缓存刷新页面

**location.replace();**可以使用一个新的页面替换当前页面，调用完毕也会跳转页面不会生成历史记录，不能使用回退按钮回退

5.间歇定时器

间歇调用：

window.setInterval();

每隔一段时间执行指定代码
需要两个参数：
要执行的代码
间隔时间

取消间隔调用：

window.cearInterval();

需要参数就是取消的定时器代号

`setInterval()`	按照指定的周期（以毫秒计）来调用函数或计算表达式。
`setTimeout()`	在指定的毫秒数后调用函数或计算表达式。

`clearInterval()`	取消由 setInterval() 设置的 timeout。
`clearTimeout()`	取消由 setTimeout() 方法设置的 timeout。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			window.onload = function(){
				
				//获取count
				var count = document.getElementById("count");
				
				//使count中的内容，自动切换
				/*
				 * JS的程序的执行速度是非常非常快的
				 * 	如果希望一段程序，可以每间隔一段时间执行一次，可以使用定时调用
				 */
				/*for(var i=0 ; i<10000 ; i++){
					count.innerHTML = i;
					
					alert("hello");
				}*/
				
				/*
				 * setInterval()
				 * 	- 定时调用
				 * 	- 可以将一个函数，每隔一段时间执行一次
				 * 	- 参数：
				 * 		1.回调函数，该函数会每隔一段时间被调用一次
				 * 		2.每次调用间隔的时间，单位是毫秒
				 * 
				 * 	- 返回值：
				 * 		返回一个Number类型的数据
				 * 		这个数字用来作为定时器的唯一标识
				 */
				var num = 1;
				
				var timer = setInterval(function(){
					
					count.innerHTML = num++;
					
					if(num == 11){
						//关闭定时器
						clearInterval(timer);
					}
					
				},1000);
				
				//console.log(timer);
				
				//clearInterval()可以用来关闭一个定时器
				//方法中需要一个定时器的标识作为参数，这样将关闭标识对应的定时器
				//clearInterval(timer);
				
			};
			
			
		</script>
	</head>
	<body>
		<h1 id="count"></h1>
	</body>
</html>

注意的是：在style中设置的内联样式，使用对象.style.属性名才能获取到对应的属性，例如：<img src="img/1.jpg" style="width: 500px;height: 500px;margin: 50px auto;" alt="rose">在style中的属性可以获取，如果是src和alt只能通过对象名.属性名获取，写在css中的样式也可以使用style属性来修改style属性值

6.延时定时器

延时调用一个函数不马上执行，而是隔一段时间以的在执行，而且只会执行一次

延时调用和定时调用的区别，定时调用可以执行多次，而延时调用只会执行一次

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>延时调用</title>
</head>
<body>
<script>
    // 定义延时调用
    var timeout = setTimeout(function () {
        for (let i = 0; i < 100; i++) {
            console.log(i);
        }
    },5000);// 表示5秒后执行该延时定时器
    
    // 取消延时定时器
    clearTimeout(timeout);
</script>
</body>
</html>

7.定时器练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			*{
				margin: 0;
				padding: 0;
			}
			
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
				left: 0;
			}
			
		</style>
		
		<script type="text/javascript">
			
			window.onload = function(){
				
				//获取box1
				var box1 = document.getElementById("box1");
				//获取btn01
				var btn01 = document.getElementById("btn01");
				
				//定义一个变量，用来保存定时器的标识
				var timer;
				
				//点击按钮以后，使box1向右移动（left值增大）
				btn01.onclick = function(){
					
					//关闭上一个定时器
					clearInterval(timer);
					
					//开启一个定时器，用来执行动画效果
					timer = setInterval(function(){
						
						//获取box1的原来的left值
						var oldValue = parseInt(getStyle(box1,"left"));
						
						//在旧值的基础上增加
						var newValue = oldValue + 1;
						
						//判断newValue是否大于800
						if(newValue > 800){
							newValue = 800;
						}
						
						//将新值设置给box1
						box1.style.left = newValue + "px";
						
						//当元素移动到800px时，使其停止执行动画
						if(newValue == 800){
							//达到目标，关闭定时器
							clearInterval(timer);
						}
						
						
					},30);
					
					
				};
				
			};
			
			
			/*
			 * 定义一个函数，用来获取指定元素的当前的样式
			 * 参数：
			 * 		obj 要获取样式的元素
			 * 		name 要获取的样式名
			 */
			function getStyle(obj , name){
				
				if(window.getComputedStyle){
					//正常浏览器的方式，具有getComputedStyle()方法
					return getComputedStyle(obj , null)[name];
				}else{
					//IE8的方式，没有getComputedStyle()方法
					return obj.currentStyle[name];
				}
				
			}
			
			
		</script>
	</head>
	<body>
		
		<button id="btn01">点击按钮以后box1向右移动</button>
		
		<br /><br />
		
		<div id="box1"></div>
		
		<div style="width: 0; height: 1000px; border-left:1px black solid; position: absolute; left: 800px;top:0;"></div>
		
	</body>
</html>

昱晟168

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS中的BOM

BOM浏览器对象模型BOM可以使用我们通过JS来操作浏览器在BOM中为我们提供了一组对象，用来完成对浏览器的操作BOM对象window代表的是整个浏览器的窗口，同时window也是网页中的全局对象Navigator代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器Location代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面History。
复制链接

扫一扫