第六章 BOM-CFANZ编程社区

第一节 BOM编程

BOM:Browser Object Model，浏览器对象模型。

BOM编程: 在浏览器中，js代码是通过内嵌在浏览器中的javascript解释器(js引擎)来运行的。在浏览器加载页面的时候，如果页面中有js代码，js解释器会将浏览器的各个部分封装成对应的对象，然后通过访问这些对象的属性和方法来实现特定的功能，这就是BOM编程。一句话:通过js操作浏览器的各个组件。

1.window对象

window对象是一个顶层对象，其中包含很多属性和方法，其中的属性也对应一些子对象:document,history,location,screen等等。

属性/方法	说明
history	历史记录对象
location	地址栏对象
document	文档对象
screen	客户窗口屏幕
event	事件对象
stauts	状态条
open	打开子窗口的方法
alert	消息提示框
prompt	输入提示框
confirm	确认框
setTimeout（函数,时间间隔）	定时器方法。等待特定时间间隔，执行一次函数。默认只执行一次函数
clearTimeout(定时器对象)	清除定时器对象
setInterval(函数,时间间隔)	定时器方法。每隔特定的时间间隔，执行一次函数。默认执行若干次函数。
clearInterval(定时器对象)	清除定时器对象

2.history历史记录对象

history记录了用户在浏览器中的浏览器记录，通过history可以访问用户的浏览记录历史信息。对应于浏览器工具栏上的前进和后退按钮。

方法:

history.forward():前往下一页

history.back():返回上一页

history.go(索引):跳到某一页

<!DOCTYPE html>
<html>
 <head>
  <title> 2-夏天 </title>
  <style type="text/css">
 </style>

 <script type="text/javascript">
    
 </script>

 </head>

 <body>
	<h1>夏天</h1>
	<a href="1-spring.html">跳转回春天</a><br/>
	<a href="javascript:window.history.back()">后退到上一个页面</a><br/>
	<input type="button"  
	       onclick="window.history.back()" 
	       value='后退到上一个页面'/>
 </body>
</html>

3.location地址栏对象

<!DOCTYPE html>
<html>
 <head>
  <title> 1-春天 </title>
  <style type="text/css">
 </style>

 <script type="text/javascript">
    
 </script>

 </head>

 <body>
	<h1>春天</h1>
	<a href="2-summer.html">跳转到夏天</a><br/>
	<a href="javascript:window.history.forward()">前进到下一个页面</a><br/>
	<span onclick="window.history.forward()">前进到下一个页面</span>
 </body>
</html>

<!DOCTYPE html>
<html>
 <head>
  <title> new document </title>
  <style type="text/css">
 </style>

 <script type="text/javascript">
	// 下拉框选项切换的时候，调用该函数
    function jump(){
		// 如果下拉选项的value是空的，则不做跳转
		if(selWebSite.value==""){
			// return:终止函数执行
			return;
		}

		// 显示当前下拉框选中的选项
		//selWebSite.value:下拉框当前选项的值
		//alert(selWebSite.value);
		// 根据选项的地址，跳转页面(设置浏览器地址栏的地址)
		window.location.href=selWebSite.value;
	}
 </script>

 </head>

 <body>
	<!--使用下拉框跳转到任意页面-->
	网站:
	<!--onchange: 下拉框选项切换事件-->
	<select onchange="jump()" id="selWebSite">
		<option value="">请选择</option>
		<option value="http://www.baidu.com">百度</option>
		<option value="http://www.taobao.com">淘宝</option>
		<option value="http://www.jd.com">京东</option>
	</select>
 </body>
</html>

4.window对象的常用方法

window.alert();//弹出消息框
window.prompt();//输入消息框
window.confirm();//确认框
window.setTimeout(函数名,延时时间); //延迟指定时间(毫秒)调用一次函数
window.setInterval(函数名,延时时间); //每隔特定时间(毫秒)，重复调用函数

// 清除定时器
window.clearTimeout(定时器对象)
window.clearInterval(定时器对象)

定时器方法

setTimeout(函数名,延时时间):延迟指定的时间后，执行一次函数

setInterval(函数名,延迟时间):每隔指定的延迟时间，就执行一次函数

基本使用

语法:
setTimeout(函数名,毫秒数);
setTimeout("函数名()",毫秒数);
等待指定时间执行一次函数
------------------------------------------
   function test(){
		alert("我被执行了啊");
	
		// 在函数内部，调用函数自己：递归调用，实现无限循环的效果
		setTimeout(test,100);
	}

    // 定时器对象
	// setTimeout(函数名,毫秒数); 1s = 1000ms
	// 等待特定时间，执行一次函数
	//setTimeout(test,3000);
	//setTimeout("test()",3000);

	setTimeout(test,100);

语法:
setInterval(函数名,毫秒数);
setInterval("函数名()",毫秒数);
每隔指定时间，执行一次函数
-------------------------------------------------
   function demo(){
		alert("我被调用了一下啊");
	}

	// 每隔指定时间，调用一次函数:默认实现无限循环效果
	//setInterval(demo,1000);
	setInterval("demo()",1000);

电子时钟

<!DOCTYPE html>
<html>
 <head>
  <title> new document </title>
  <style type="text/css">
 </style>

 <script type="text/javascript">
    //电子时钟
	//1.如何获取当前的系统时间: new Date()
	//2.定时显示这个系统时间,让这个时间一直变化
	
	// 定义变量，用于存储定时器对象
	var dingshiqi;


	// 开始显示电子时钟
	function kaishi(){
		//获取系统当前时间
		var t = new Date();
		//将时间设置到div中:需要解决两个问题 a.让时间变化 b.让时间显示好看的格式
		//document.getElementById("myClock").innerHTML=t;
		// 好看的时间格式: 2021-12-16 11:06:45
		// 从时间对象中提取年份
		var year = t.getFullYear(); // 获取完整年份
		var month = t.getMonth()+1; // 获取月份: 系统返回的月份 0-11
		var day = t.getDate();      // 获取日期
		//alert(year+"-"+month+"-"+day);

		var hour = t.getHours(); //获取小时 
		var min = t.getMinutes(); // 获取分钟
		var sec = t.getSeconds(); // 获取秒
		//alert(hour+":"+min+":"+sec);
		// 拼接年月日，时分秒
		var time = year+"-"+month+"-"+day+" "+hour+":"+min+":"+sec;
		// 将时间设置到div中
		myClock.innerHTML=time;
		
		//定时执行:
		// setTimeout:会返回定时器对象，我们用变量接收它
		dingshiqi = setTimeout(kaishi,1000);
	}

	// 结束定时器对象
	function jieshu(){
		// 清理定时器对象，结束定时执行的操作
		clearTimeout(dingshiqi)
	}

 </script>

 </head>

 <body>
	<input type="button" value="开始" onclick="kaishi()"/>
	<input type="button" value="结束" onclick="jieshu()"/>
	<div id="myClock"></div>
 </body>
</html>

短信倒计时

<!DOCTYPE html>
<html>
 <head>
  <title> new document </title>
  <style type="text/css">
 </style>

 <script type="text/javascript">

	// 定义全局变量，用于存储定时器对象
	var t;

    //发送验证码，要求一次只能发送一个，10s之后才能继续发送
	function sendYZM(){
		//1.点击一次发送之后，按钮要禁用
		btnSend.disabled=true; // 让按钮禁用, disabled(禁用)
		//2.点击发送之后，按钮的文本要显示倒计时信息
		// 倒计时计数变量
		var i = 5;
		t = setInterval(function(){
			//alert(i);
			btnSend.value="发送验证码("+ i+"s)";
			//倒计时
			i--;
			//当i为-1的时候，结束定时器，并恢复按钮
			if(i==-1){
				//3.倒计时结束，按钮恢复使用
				clearTimeout(t); //清理定时器
				btnSend.disabled=false; // 让按钮恢复使用
				btnSend.value="发送验证码"; // 恢复按钮文本
			}
		},1000);
		
	}
	//扩展:如何让0显示出来
 </script>

 </head>

 <body>
	手机号:
	<input type="text" name="phone" id="phone"/><br/>
	验证码:
	<input type="text" name="yzm" id="yzm"/>
	<!--disabled:禁用按钮-->
	<input type="button" 
		   id="btnSend" 
		   value="发送验证码"
		   onclick="sendYZM()"
		   />
 </body>
</html>

5.HTML事件对象

onclick:元素的单击事件

onload:页面加载完成事件

事件对象：当一个事件被触发的时候，事件发生时的相关信息会被浏览器封装到一个对象中，这个对象被称为事件对象。

早期IE浏览器事件对象: window.event

标准浏览器事件对象: 是使用与事件绑定的函数参数表示。

<!DOCTYPE html>
<html>
 <head>
  <title> new document </title>
  <style type="text/css">
 </style>

 

 </head>

 <body>
	<div id="mydiv" style="font-size:20px;">
	
	</div>

	<script type="text/javascript">
		// IE浏览器的事件对象
		// window.event:事件发生时的事件对象，它存储了事件相关信息

		// 绑定文档对象的鼠标移动事件
		document.onmousemove = function(){
			// 当鼠标在页面移动的时候，显示鼠标的位置
			// window.event.clientX: 鼠标在页面上移动时的X轴坐标
			// window.event.clientY: 鼠标在页面上移动时的Y轴坐标
			mydiv.innerHTML=window.event.clientX +" "+
						    window.event.clientY+" "+
							window.event.type;
		}

		// 绑定文档对象的鼠标单击事件
		document.onclick=function(){
			mydiv.innerHTML= window.event.clientX +" "+
						     window.event.clientY+" "+
							 window.event.type;
		}

		// 绑定文档对象的键盘按键事件
		document.onkeypress=function(){
			mydiv.innerHTML=window.event.keyCode+" "+window.event.type;
		}
	</script>
 </body>
</html>

<!DOCTYPE html>
<html>
 <head>
  <title> new document </title>
  <style type="text/css">
 </style>

 

 </head>

 <body>
	<div id="mydiv" style="font-size:20px;">
	
	</div>

	<script type="text/javascript">
		// 标准浏览器的事件对象
		// 通过与事件绑定函数的参数传入:参数名可以随便定义

		// 绑定文档对象的鼠标移动事件
		document.onmousemove = function(e){
			
			mydiv.innerHTML=e.clientX +" "+
						    e.clientY+" "+
							e.type;
		}

		// 绑定文档对象的鼠标单击事件
		document.onclick=function(x){
			mydiv.innerHTML= x.clientX +" "+
						     x.clientY+" "+
							 x.type;
		}

		// 绑定文档对象的键盘按键事件
		document.onkeypress=function(a){
			mydiv.innerHTML=a.keyCode+" "+a.type;
		}
	</script>
 </body>
</html>