JavaScript Window

最新推荐文章于 2023-02-25 22:40:53 发布

fanlinqiang

最新推荐文章于 2023-02-25 22:40:53 发布

阅读量321

点赞数

JavaScript 专栏收录该内容

37 篇文章 2 订阅

订阅专栏

Window 对象 http://www.w3school.com.cn/jsref/dom_obj_window.asp

什么是BOM？ Browser Object Model

所谓的浏览器对象模型，指的是把整个浏览器看做一个对象。（该对象就是window）

通过修改window对象的属性来修改浏览器的设置，通过调用window对象的方法，来控制浏览器的行为

即面向window编程，但实际上操作的是浏览器（这是面向对象编程思想最标准的体现）

window对象和浏览器的关系，就如同： {

遥控器和电视机的关系。通过操作遥控器，来控制电视机的行为。

键盘和计算机。通过操作键盘，来控制计算机的行为。

方向盘和汽车。通过操作方向盘，来控制汽车的行为。

}

理解了这几个例子，就理解了什么叫面相对象。

window对象是什么？

是javascript编程语言的最核心对象，有了它才能跟浏览器进行交互。

也叫全局对象，即所有定义在全局范围的变量和函数，都属于window对象的一部分

全局变量（即定义变量时前不加var），实际上是window的属性

举例说明：

alert(); 全局方法，可以弹出一个警告框。

然而实际上，它是window对象的一部分。也就是说，完整的写法如下：

window.alert();

parseInt(); 全局方法，可以将变量强转为整数

完整的写法如下：

window.parseInt();

window对象的结构

window对象的原理

var global = {

Math : function(){...},

Date : function(){...},

doucment : {...},

alert : function(){...},

console : {...},

window : this

}

location对象

href属性控制浏览器地址栏的内容

reload()方法刷新页面

reload(true) 刷新页面，不使用缓存

navigator对象（以下属性不兼容）

- appName 浏览器名称

- appVersion 浏览器版本

- platform操作系统

- 最新的浏览器已经全面放弃以上这些属性

- userAgent 用户代理信息，通过该属性可以获取浏览器及操作系统信息

history对象

back() //回退

forward() //前进

go(-2) //跳转指定页面

常见方法

alert()

close()

blur()

confirm() //用户交互、有boolean返回值；是一个阻塞式的方法，alert（）也是阻塞式方法

prompt() //接收用户的反馈信息，返回值是字符串

eval()

eval()方法动态的执行代码,

1、将字符串解析为可执行的JavaScript语句

2、可以将字符串（符合对象格式的）转化为对象类型

//eval方法赋予了JS动态执行代码的能力，让它变成了一个名副其实的灵活的语言（使用风险较大，已逐渐被淘汰）

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</textarea>

<br>

</body>

</html>

var btn = window.document.getElementById("exec");

btn.onclick = function(){

var code = document.getElementById("code").value;

eval(code); //解析字符串，并当做JavaScript运行

}

</script>

定时器 setTimeout

setTimeout(function(){

alert();

},1000);

//表示该函数延迟1000毫秒执行

setTimeout("此处填写代码等同于eval效果",3000};

定时器 setInterval --------从效果上看，它是异步执行的，

此函数有返回值（定时器编号起始为一）

setInterval(function(){

alert();

},1000);

//表示该函数每隔1000毫秒执行一次

setInterval("此处填写代码等同于eval效果",3000};

//时间间隔是有限制的最小值大约在15

示例：

JS是单线程还是多线程？

浏览器都是单线程的, 所有的代码执行都是同步

当有多个定时器出现时，会交叉生成任务，存入浏览器的任务执行队列当中

setInterval(function(){console.log(1111);},0);

console.log(2222);

输出顺序：

2222

1111

回调函数就是将函数的执行权转让给别人

js中是所有异步效果都是由回调函数来实现的

onload事件

当页面加载完成的时候，触发该事件的发生，如果该事件绑定了函数，即执行该函数。

事件绑定函数的方法

 
  obj.onclick = function(){..... 
  } 
 
  obj.onload = function(){..... 
  } 
 
  obj.onmouseover = function(){ 
 
  } 
 
  ...... 
 
  比较传统的绑定方法： 
 
  <script> 
 
       function method(){......} 
 
  </script> 
 
  <div οnclick="method()"></div>

this关键字

  参考this文档 

onscroll事件

当滚动条的距离发生改变时，触发该事件的发生，如果该事件绑定了函数，即执行该函数

console.log(window.οnscrοll=function(){}); //null 说明函数是具有返回值的

定时器应用--进度条

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Document</title>  
	<style>
		div{height:50px;width:350px;border:1px dotted #666;margin:50px auto; }
		p{width:300px;height:100%;margin:0;float:left;}
		span{float:right;line-height:50px;height:50px;}
		i{width:0px;height:100%;display:block;background:blue;}
	</style>
	<script>
	
		window.οnlοad=function(){
			var _i=document.getElementById("_i");
			var _span=document.getElementById("_span");
			var _width=0;
			var t=setInterval(function(){
					
					_i.style.width=_width+"px";
					_span.innerHTML=parseInt(_width/3)+"%";
					_width+=30;
					if(_width>300) clearInterval(t);
				
				},1000);
		}
		
			
		
		
		
	</script>
</head>  
<body id="_body">  
	<div id="_div">
		<p><i id="_i"></i></p>
		<span id="_span">0</span>
	</div>
	
	
</body>  
</html>

onscroll事件 ---应用

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
body{height:2500px; padding:0; margin:0;}
#div1{height:30px; width:100%; background:#0AF;}
#div2{height:30px; width:100%; background:red; top:400px; position:absolute;}
</style>

<script type="text/javascript">
	
	window.onscroll = function(){
		var oDiv = document.getElementById("div2");
		//var scrolltop = ;
		var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;  //兼容  火狐||google
		console.log(scrolltop);
		if(scrolltop > 400) {
			oDiv.style.position = "fixed";
			oDiv.style.top = 0;
		} else {
			oDiv.style.position = "absolute";
			oDiv.style.top = "400px";
		}
	}
</script>
<style>
	li:nth-child(even){
		background:#ff0000;
	}
</style>
</head>

<body>
<div id="div1">
	顶部信息栏
</div>
<div id="div2">
	留言信息
</div>

</body>
</html>

定时器应用--进度条

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Document</title>  
	<style>
		div{height:50px;width:350px;border:1px dotted #666;margin:50px auto; }
		p{width:300px;height:100%;margin:0;float:left;}
		span{float:right;line-height:50px;height:50px;}
		i{width:0px;height:100%;display:block;background:blue;}
	</style>
	<script>
	
		window.οnlοad=function(){
			var _i=document.getElementById("_i");
			var _span=document.getElementById("_span");
			var _width=0;
			var t=setInterval(function(){
					
					_i.style.width=_width+"px";
					_span.innerHTML=parseInt(_width/3)+"%";
					_width+=30;
					if(_width>300) clearInterval(t);
				
				},1000);
		}
		
			
		
		
		
	</script>
</head>  
<body id="_body">  
	<div id="_div">
		<p><i id="_i"></i></p>
		<span id="_span">0</span>
	</div>
	
	
</body>  
</html>

onscroll事件 ---应用

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
body{height:2500px; padding:0; margin:0;}
#div1{height:30px; width:100%; background:#0AF;}
#div2{height:30px; width:100%; background:red; top:400px; position:absolute;}
</style>

<script type="text/javascript">
	
	window.onscroll = function(){
		var oDiv = document.getElementById("div2");
		//var scrolltop = ;
		var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;  //兼容  火狐||google
		console.log(scrolltop);
		if(scrolltop > 400) {
			oDiv.style.position = "fixed";
			oDiv.style.top = 0;
		} else {
			oDiv.style.position = "absolute";
			oDiv.style.top = "400px";
		}
	}
</script>
<style>
	li:nth-child(even){
		background:#ff0000;
	}
</style>
</head>

<body>
<div id="div1">
	顶部信息栏
</div>
<div id="div2">
	留言信息
</div>

</body>
</html>

fanlinqiang

关注

0
点赞
踩
0

收藏

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

Window 对象 http://www.w3school.com.cn/jsref/dom_obj_window.asp什么是BOM？ Browser Object Model所谓的浏览器对象模型，指的是把整个浏览器看做一个对象。（该对象就是window）通过修改window对象的属性来修改浏览器的设置，通过调用window对象的方法，来控制浏览器的行
复制链接

扫一扫