JavaScript（下） BOM

最新推荐文章于 2024-07-16 19:07:40 发布

qq_40631424

最新推荐文章于 2024-07-16 19:07:40 发布

阅读量103

点赞数

本文链接：https://blog.csdn.net/qq_40631424/article/details/105298527

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

BOM：

概念: Browser object Model 浏览器对象模型

 * 将浏览器的各个组成部分封装成对象。

组成:

Window: 窗口对象

  1. 创建
  2. 方法
  		1.与弹出框有关的方法:
  			alert()  显示带有一段消息和一个确认按钮的警告框。
  			confirm()  显示带有一段消息以及确认按钮和取消按钮的对话框。
  				*如果用户点击确定按钮，则方法返回true
  				*如果用户点击取消按钮，则方法返回false
  			prompt( )   显示可提示用户输入的对话框。
  				*返回值:获取用户输入的值
  		2.与开发关闭有关的方法:
  			close()关闭浏览器窗口。
  				* 谁调用我，我关谁
  			open()打开一 一个新的浏览器窗口
  				* 返回新的window对象
  		3.与定时器有关的方式
  			* setTimeout( )  在指定的毫秒数后调用函数或计算表达式。
  				* 返回值:唯一标识，用于取消定时器
  				* 参数:
  					1. js代码或者方法对象
  					2. 毫秒值
  					3. 如：
  						setTimeout(fun,3000);//调用函数第一种，推荐使用
  						setTimeout("fun();,3000")//调用函数第二种
  						function fun(){
  												alter("boom~~")
  									}
  			* clearTimeout()取消 由setTimeout()方法设置的timeout。
  			* setInterval()按照指定的周期 (以毫秒计)来调用函数或计算表达式。
  				*返回值:唯一标识，用于取消定时器
  				* 参数:同setTimeout() 一样
  			* clearInterval()取消由setInterval() 设置的timeout.
  3. 属性
  	1.获取其他BOM对象:
  		history
  		location 
  		Navi gator
  		Screen:
  	2.获取DOM对象
  		document

  4. 特点
  	* Window对象不需要创建可以直接使用window使用。window.方法名();
  	* window引用 可以省略。方法名();

案例：轮播图

<body>
  
    <img id="img" src="../images/lunbotu_1.jpg" width="50%">
    
    <script type="text/javascript">
    /*
		分析:
		1.在页面上使用img标签展示图片
		2.定义一个方法，修改图片对象的src属性
		3. .定义一个定时器，每隔2秒调用方法一次。

	*/
    	var number = 1;
    	var img = document.getElementById("img");
    	//定时器，两秒换一次
    	setInterval(fun, 2000);
    	//fun()方法实现轮播
    	function fun(){
    		number++;
    		if(number > 3){
    			number = 1;
    		}
    		img.src = "../images/lunbotu_"+number+".jpg";
    	}	
    </script>
</body>

Navigator :浏览器对象
Screen :显示器屏幕对象
History :历史记录对象

Location :地址栏对象

  1.创建(获取) :
  	1. window. location
  	2. location
  2.方法:
  	* reload() 重新加载当前文档。 刷新
  		如Location. reload();
  3.属性
  	* href 设置或返回完整的 URL。
  		如：location.href = "https ://www. baidu.com";

案例：自动跳转

<style type="text/css">
		p{
			text-align: center;
		}
		span{
			color: red;
		}
</style>
<body>
    <p>
    	<span id="time">5</span>秒后跳转到指定页面...
    </p>
</body>
<script type="text/javascript">
/*分析:
1.显示页面效果<p>
2.倒计时读秒效果实现
2.1定义一个方法，获取span标签，修改span标签体内容，时间--
2.2定义一个定时器，1秒执行一-次该方法
3.在方法中判断时间如果<=日，则跳转到首页
*/
// 2.倒计时读秒效果实现
var second = 5;
var time = document . getElementById("time");
//定义-一个方法，获取span标签，修改span标签体内容， 时间--
function showTime(){
	second -- ;
	//判断时间如果<=日，则跳转到首页
	if(second <= 0){
	//跳转到首页
	location.href = "https : //www. baidu. com" ;
	}
	time. innerHTML = second +"";
}
//设置定时器，1秒执行-次该方法
setInterval (showTime , 1000);
 </script>