JavaScript---BOM

最新推荐文章于 2024-06-11 18:02:04 发布

lkfmiaomiao

最新推荐文章于 2024-06-11 18:02:04 发布

阅读量79

点赞数

本文链接：https://blog.csdn.net/lkfmiaomiao/article/details/100877580

版权

JavaScript—BOM(浏览器对象模型）

window对象是最根上的对象

console.log(window);

window对象下的方法

 1. alert();
 2. close();
 3. open();
 4. setInterval();
 5. setTimeout();
 6. clearInterval();
 7. clearTimeout();

1.弹出窗口

alert();

2.确认框

var flag=confirm('你确定要放弃H5吗？');

3.新开窗口

open();
//打开指定网址的窗口
open('https://www.baidu.com/');

4.关闭窗口

close();

5.延迟执行

var win=open('https://www.baidu.com/');
				setTimeout(function(){
					win.close();
				},3000)；

6.周期执行

var i=0;
setInterval(function(){
				  console.log(i++);
				},1000);

7.清除定时器

var id;
btn.onclick=function(){
var i=0;
id=setInterval(function(){
 console.log(i++);
				},1000);
				console.log(id);
			}
			//关闭周期执行的操作
			stop.onclick=function(){
				clearInterval(id);
			}
			}

window对象下的对象

 1. history
 2. location
 3. screen
 4. navigator
 5. document

实现轮播图效果代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>轮播图</title>
		<style>
			*{
				padding:0;
				margin:0;
			}
			#box{
				width:800px;
				height:120px;
				margin:0 auto;
				border:3px solid red;
				position:relative;
				overflow:hidden;
			}
			#slide{
				width:2320px;
				position:absolute;
				
			}
			#slide img{
				width:200px;
				height:150px;
				float:left;
				margin-right:20px;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div id="slide">
				<img src="img/m1.png" />
				<img src="img/m2.png" />
				<img src="img/m3.png"/>
				<img src="img/mi.png"/>
				<img src="img/mi4.png" />
				<img src="img/景物.jpg"/>
				<img src="img/m1.png" />
				<img src="img/m2.png" />
				<img src="img/m3.png"/>
				<img src="img/mi.png"/>
			</div>
		</div>
	</body>
	<script>
		var slide=document.getElementById('slide');
		var box=document.getElementById('box');
		var i=0;
		//定时器
		function move(){
			//判断图片轮播是到最后一张了
//			if(i<=-1320){
//				i=0;
//				slide.style.left=0+'px';
//			}else{
//				i--;
//			}
			i=i<=-1320?0:i-1;
			slide.style.left=i +'px';
			
		}
		var id=setInterval(move,10);
		
		//鼠标滑过盒子时
		box.onmouseover=function(){
			//清除定时器
			clearInterval(id);
		}
		//鼠标滑出盒子时
		box.onmouseout=function(){
			//周期执行
//			id=setInterval(function(){
//				slide.style.left=i-- +'px';
//			},50);
				id=setInterval(move,10);
		}
		
		//
	</script>
</html>

lkfmiaomiao

关注

0
点赞
踩
0

收藏

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

JavaScript—BOM(浏览器对象模型）window对象是最根上的对象console.log(window);window对象下的方法 1. alert(); 2. close(); 3. open(); 4. setInterval(); 5. setTimeout(); 6. clearInterval(); 7. clearTimeout();1.弹出窗口...
复制链接

扫一扫