Javascript-BOM对象

最新推荐文章于 2021-02-12 12:11:56 发布

W_Meng_H

最新推荐文章于 2021-02-12 12:11:56 发布

阅读量541

点赞数

分类专栏： # JavaWeb开发

本文链接：https://blog.csdn.net/w_meng_h/article/details/79770311

版权

JavaWeb开发同时被 2 个专栏收录

16 篇文章 1 订阅

订阅专栏

JavaScript

9 篇文章 0 订阅

订阅专栏

BOM编程基础

全称 Browser Object Model，浏览器对象模型。

JavaScript是由浏览器中内置的javascript脚本解释器程序来执行javascript脚本语言的。

为了便于对浏览器的操作，javascript封装了对浏览器的各个对象使得开发者可以方便的操作浏览器。

BOM定义了JavaScript可以进行操作的浏览器的各个功能部件的接口。

BOM对象

BOM对象：浏览器对象模型(操作与浏览器相关的内容)

Window对象

Window 对象表示浏览器中打开的窗口。

setInterval():它有一个返回值，主要是提供给clearInterval使用。

setTimeout():它有一个返回值，主要是提供给clearTimeout使用。

clearInterval():该方法只能清除由setInterval设置的定时操作

clearTimeout():该方法只能清除由setTimeout设置的定时操作

弹出框的几个方法：

<script>
	//警告框
	//alert("aaa");
	
	//确认按钮
	//confirm("您确认删除吗？");
	
	//提示输入框
	prompt("请输入价格：");
</script>
</head>

Location对象

Location 对象包含有关当前 URL 的信息。

href:该属性可以完成通过JS代码控制页面的跳转。

<html>
	<head>
		<meta charset="UTF-8">
		<title>location对象</title>
		<script>
			function tiao(){
				window[可以省略不写].location.href="http://www.itcast.cn";
			}
		</script>
	</head>
	<body>
		<a href="#" οnclick="tiao()">跳转到传智播客首页</a>
	</body>
</html>

History对象

History 对象包含用户（在浏览器窗口中）访问过的 URL。

历史页面：使用location页面(把href属性值改为当前的history)

<input type="button"  value="返回上一个页面" οnclick="javascript:history.back()"/>

go(参数)

参数：-1 返回上一个历史记录页面；-2返回上上一个历史记录页面，1进入下一个历史记录页面。

让按钮点击失效：

οnclick=”javascript:volid(0)”

Navigator对象

Navigator 对象包含有关浏览器的信息。(该对象开发中不怎么常用)

Screen对象

Screen 对象包含有关客户端显示屏幕的信息。(该对象开发中不怎么常用)

举例：

JS完成首页轮播图效果案例

获取元素 document.getElementById(“id名称”)

事件(onload)

定时操作：setInterval(“changeImg()”,3000);

Html部分代码

确定事件：onload 加在body里面！

<body οnlοad="init()">

给指定的图片位置定义一个id：

<img src="../img/1.jpg" width="1300px" id="img1"/>

JS代码：

<script>
	function init(){
		setInterval("changeImg()",3000);
	}
	
	var i=1;
	function changeImg(){
		i++;
		var imgEl = document.getElementById("img1");
		imgEl.src="../img/"+i+".jpg";
		if(i==3){
			i=0;
		}
	}
</script>

JS完成页面定时弹出广告

获取图片的位置(document.getElementById(“”))

隐藏图片：display：none

定时操作：setInterval(“显示图片的函数”，3000);

Html部分代码：

<img src="../XXX.jpg" width="1300px" style="display: none;" id="img1"/>

确定事件

<body οnlοad="init()">

JS代码：

<script type="text/javascript">
	var time;
	function init(){
		//设置显示图片的定时操作
		time = setInterval("showAd()",3000);
	}
	//显示图片的函数
	function showAd(){
		//获取广告图片的
		var imgEl = document.getElementById("img1");
		//设置图片的属性(display)让其显示
		imgEl.style.display="block";
		
		//清除显示图片的定时操作
		clearInterval(time);
		
		//设置隐藏广告图片的定时操作
		time = setInterval("hiddenAd()",3000);
	}
	//书写隐藏广告图片的函数
	function hiddenAd(){
		//获取广告图片并设置隐藏的属性
		document.getElementById("img1").style.display="none";
		//清除隐藏图片的定时操作
		clearInterval(time);
	}
</script>

W_Meng_H

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript-BOM对象

BOM编程基础全称 Browser Object Model，浏览器对象模型。JavaScript是由浏览器中内置的javascript脚本解释器程序来执行javascript脚本语言的。为了便于对浏览器的操作，javascript封装了对浏览器的各个对象使得开发者可以方便的操作浏览器。BOM定义了JavaScript可以进行操作的浏览器的各个功能部件的接口。BOM对象BOM对象：浏览器对象模型(...
复制链接

扫一扫