BOM

最新推荐文章于 2023-08-15 01:00:00 发布

夜色的最黑暗。

最新推荐文章于 2023-08-15 01:00:00 发布

阅读量69

点赞数

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

本文链接：https://blog.csdn.net/qq_42385761/article/details/109188160

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

BOM

BOM定义

<script type="text/javascript">
	//BOM 【browser object model】 浏览器对象模型，每一个浏览器厂商都有属于自己的特定BOM对象
	//给我们提供一些获取浏览器信息，即为内置window对象
	//作为BOM对象的属性和方法，可以省略window
	console.log(window);
	console.log(typeof window);//object
	//获取地址栏信息
	console.log(window.location.href);
	//获取电脑屏幕的信息
	console.log(window.screen.width);
	console.log(window.screen.height);
	//获取浏览器的信息(用的哪个浏览器、声明版本)
	console.log(window.navigator.userAgent);
</script>
<script type="text/javascript">
	//以前使用过的方法
	alert();
	window.alert();
	window.prompt();
	window.document;
</script>

定时器的基本使用

<script type="text/javascript">
	//定时器是BOM的对象的一个方法，可以省略window
	//setInterval(callback,time):第一个参数必填，第二个可有可无，单位是毫秒
	//开启定时器
	var time = setInterval(function(){
		//书写任意代码
		console.log("我是定时器，么么哒");
	},2000);
	console.log(time);
	//清除定时器
	clearInterval(time);
	//定时器是异步语句：如果某一个语句很耗时，就称之为异步语句
	//异步语句有一个特征：先执行定时器后面的代码
	console.log("定时器后面的代码");
</script>

运动套路

<script type="text/javascript">
	//运动套路，定时器+修改元素的left和top
	var div = document.querySelector("div");
	var l = 0;
	var t = 0;
	//开启定时器
	setInterval(function(){
		l+=10;
		t +=5;
		if(l >= 300){
			l = 300;
		}
		t = t > 300 ? 300:t;
		//修改节点left
		div.style.left = l + "px";
		div.style.top = t + "px";
	},100);
</script>

练习变脸

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			div{
				/*定位才有left*/
				position: absolute;
				width: 187px;
				height: 156px;
				background: url(../img/6.jpg);
				/*背景图片定位*/
				background-position: 0px -312px;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>
<script type="text/javascript">
	//获取元素
	var div = document.querySelector("div");
	//设置变量
	step = 0;
	l = 0;
	isMove = false;
	//设置定时器
	setInterval(function(){
		if(isMove) return;
		step++;
		l += 10;
		if(step > 2) step = 0;
		div.style.backgroundPosition = -step*187+"px -312px";
		div.style.left = l + "px";
	},100);
	
	document.onclick = function(){
		isMove = !isMove;
	}
</script>

夜色的最黑暗。

关注

0
点赞
踩
0

收藏

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

BOMBOM定义<script type="text/javascript"> //BOM 【browser object model】浏览器对象模型，每一个浏览器厂商都有属于自己的特定BOM对象 //给我们提供一些获取浏览器信息，即为内置window对象 //作为BOM对象的属性和方法，可以省略window console.log(window); console.log(typeof window);//object //获取地址栏信息 console.log(windo
复制链接

扫一扫