html之BOM

最新推荐文章于 2024-07-27 17:31:46 发布

William_Tao（攻城狮）

最新推荐文章于 2024-07-27 17:31:46 发布

阅读量859

点赞数 3

分类专栏： WEB 文章标签： web css javascript

本文链接：https://blog.csdn.net/qq_45353823/article/details/105110234

版权

WEB 专栏收录该内容

4 篇文章 2 订阅

订阅专栏

BOM概念：

browser object model浏览器对象模型
将浏览器的各个组成部分封装成对象；

BOM的组成

window：窗口对象
history：历史记录对象
location：地址栏对象
screen：显示器屏幕对象
navigator：浏览器对象
在这里插入图片描述

一、window对象：

特点：可以直接通过方法名，也可以通过window点+方法名

<html>
<title>
widows对象
</title>
<head>
	<script>
		alert("欢迎使用直接通过方法名");
		alert("欢迎使用window调用·方法")
	</script>
</head>
<body>
	
</body>
</html>

上述代码会提示来此警告窗口

三种常见方法：

1.与弹出框有关的方法：

alert() 显示带有一段消息和一个确认按钮的警告框。

confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。

如果用户点击确定按钮，则方法返回true
如果用户点击取消按钮，则方法返回false

```javascript
<html>
<title>
widows对象
</title>
<head>
	<script>
		
		var flag=confirm("你确定要退出吗")
		if(flag){
			alert("你点击了确定")
		}else{
			alert("你点击了取消")
		}
	</script>
</head>
<body>
	
</body>
</html>

prompt() 显示可提示用户输入的对话框。

<html>
<title>
widows对象
</title>
<head>
	<script>
		
		var flag=prompt("请输入你的账号")
		alert(flag)
		
	</script>
</head>
<body>
	
</body>
</html>

通过将输入的值放入flag中，然后在弹出所输入的内容

2. 与打开关闭有关的方法：

            close()	关闭浏览器窗口。
                * 谁调用我 ，我关谁
            open()	打开一个新的浏览器窗口
                * 返回新的Window对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<input id="openBtn" type="button" value="打开窗口">
<input id="closeBtn" type="button" value="关闭窗口">
</body>
<script>
    //打开新窗口
    var openBtn = document.getElementById("openBtn");

    openBtn.onclick = function(){
        //打开新窗口
      open("https://www.baidu.com");
    }

   //关闭窗口
    var closeBtn=document.getElementById("closeBtn");
    closeBtn.onclick=function (ev) {
        close();
    }
</script>
</html>

当我们点击关闭按钮的时候会将有两个按钮的浏览器关闭，而不关闭新打开的窗口。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<input id="openBtn" type="button" value="打开窗口">
<input id="closeBtn" type="button" value="关闭窗口">
</body>
<script>
    //打开新窗口
    var newwidow;
    var openBtn = document.getElementById("openBtn");

    openBtn.onclick = function(){
        //打开新窗口
        newwidow=open("https://www.baidu.com");
    }

   //关闭窗口
    var closeBtn=document.getElementById("closeBtn");
    closeBtn.onclick=function (ev) {
        newwidow.close();
    }
</script>
</html>

我们只需要将新打开的浏览器对象用var存一下，然后在关闭函数中用newwidow点close（）方法就可以关闭新打开的窗口了

3. 与定时器有关的方式

            setTimeout()	在指定的毫秒数后调用函数或计算表达式。
                * 参数：
                    1. js代码或者方法对象
                    2. 毫秒值
                * 返回值：唯一标识，用于取消定时器
            clearTimeout()	取消由 setTimeout() 方法设置的 timeout。

            setInterval()	按照指定的周期（以毫秒计）来调用函数或计算表达式。
            clearInterval()	取消由 setInterval() 设置的 timeout。

案例

/*
分析：
1.在页面上使用img标签展示图片
2.定义一个方法，修改图片对象的src属性
3.定义一个定时器，每隔3秒调用方法一次。

*/

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script>
			var num=1;
			
			function turn(){
				num++;
				if(num>3){
					num=1;
				}
				var Image=document.getElementById("img");
				Image.src="img/imag_"+num+".jpg";
				
			}
			setInterval(turn,2000);
			
		</script>
	</head>
	<body>
		<img src="img/imag_1.jpg" width="100%" id="img"/>
	</body>

</html>

在这里插入图片描述

常见属性：

        1. 获取其他BOM对象：
            history
            location
            Navigator
            Screen:
        2. 获取DOM对象
            document

二、Location对象

1. 创建(获取)：

		1. window.location
		2. location

2. 方法：

		* reload()	重新加载当前文档。刷新

3. 属性

		* href	设置或返回完整的 URL。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	
	</head>
	<body>
		<input type="button" id="refresh"  value="刷新"/>
		<input type="button" id="go"  value="去百度"/>
	</body>
	<script>
		
		var refresh=document.getElementById("refresh");
		refresh.onclick=function(){
			location.reload();
		}
		var go=document.getElementById("go");
		go.onclick=function(){
			location.href="https://blog.csdn.net/qq_45353823";
		}
		
	</script>

</html>

综合上述的学习之页面跳转的案例

实现思路：
1.首页用p标签包裹内容
2.数字单独用span标签包裹
3.然后用css代码修改样式
4.然后通过js代码，对于span包裹的数字进行改变，可以用innerHTML，然后用setInterval去循环让数字变小
5.当数字小于等于0时，我们可以用location.href去改变浏览的地址

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	<style>
		p{
			text-align: center;
			
		}
		span{
			color: red;
		}
	</style>
	</head>
	<body>
		<p>
			<span id="time">5</span>秒后，自动跳转到我的博客主页！
		</p>
	</body>
	<script>
		var time=document.getElementById("time");
		var num=5;
		function f(){
			num--;
			if(num<=0){
				location.href="https://blog.csdn.net/qq_45353823";
			}
			time.innerHTML=num;
		}		
		setInterval(f,1000)
	</script>

</html>

在这里插入图片描述

William_Tao（攻城狮）

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
html之BOM

BOM概念：browser object model浏览器对象模型将浏览器的各个组成部分封装成对象；BOM的组成window：窗口对象history：历史记录对象location：地址栏对象screen：显示器屏幕对象navigator：浏览器对象window对象：特点：可以直接通过方法名，也可以通过window点+方法名<html><title>...
复制链接

扫一扫