BOM
一、BOM概述
1. 概念：Browser Object Model 浏览器对象模型
* 将浏览器的各个组成部分封装成对象。
2. 组成：
* Window：窗口对象
* Navigator：浏览器对象
* Screen：显示器屏幕对象
* History：历史记录对象
* Location：地址栏对象二、window窗口对象
1、window弹出方法
1. 创建 2. 方法 1. 与弹出框有关的方法： alert() 显示带有一段消息和一个确认按钮的警告框。 confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。 * 如果用户点击确定按钮，则方法返回true * 如果用户点击取消按钮，则方法返回false prompt() 显示可提示用户输入的对话框。 * 返回值：获取用户输入的值 3. 属性： 1. 获取其他BOM对象： history location Navigator Screen: 2. 获取DOM对象 document 4. 特点 * Window对象不需要创建可以直接使用 window使用。 window.方法名(); * window引用可以省略。 方法名(); ------------------------------------------- <script> var flsg = confirm("您确定要退出吗？"); if(flsg) { alert("欢迎再次光临！") }else { alert("手别抖...") } var username = prompt("请输入用户名："); alert(username); </script>
2、window打开、关闭方法
与打开关闭有关的方法： close() 关闭浏览器窗口。 * 谁调用我 ，我关谁 open() 打开一个新的浏览器窗口 * 返回新的Window对象 ------------------------------------------ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" id="openBtn" value="打开窗口"> <input type="button" id="closeBtn" value="关闭窗口"> <script> var openBtn = document.getElementById("openBtn"); var newwindow; openBtn.onclick = function () { newwindow = open("https://www.baidu.com"); } var closeBtn = document.getElementById("closeBtn") closeBtn.onclick = function () { newwindow.close(); } </script> </body> </html>
3、window定时器方法
与定时器有关的方式 setTimeout() 在指定的毫秒数后调用函数或计算表达式。 * 参数： 1. js代码或者方法对象 2. 毫秒值 * 返回值：唯一标识，用于取消定时器 clearTimeout() 取消由 setTimeout() 方法设置的 timeout。 setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。 clearInterval() 取消由 setInterval() 设置的 timeout。 ---------------------------- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> //一次性定时器 function fun() { alert("boom...") } var id = setTimeout("fun();",3000) //3s clearTimeout(id); //取消定时器 //循环定时器 setInterval(fun,2000); </script> </body> </html>
4、轮播图案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>轮播图</title> </head> <body> /* * 1.在页面上使用img标签展示图片 * 2.定义一个方法，修改图片对象的src属性 * 3.定义一个定时器，每隔3秒调用方法一次. * */ <img id="banner" src="img/banner_1.jpg" width="100%"> <script> var number = 1; function changeImg(){ number ++; if(number > 3){ number = 1; } document.getElementById("banner").src = "img/banner_"+number+".jpg"; } setInterval(changeImg,2000); </script> </body> </html>
5、window属性
1. 获取其他BOM对象： history location Navigator Screen: 2. 获取DOM对象 document ------------------------------------ <script> var h1 = window.history; var h2 = history; alert(h1); alert(h2); var s1 = window.document.getElementById(""); var s2 = document.getElementById(""); </script>
三、Location：地址栏对象
1. 创建(获取)： 1. window.location 2. location 2. 方法： * reload() 重新加载当前文档。刷新 3. 属性 * href 设置或返回完整的 URL。 ---------------------------------------------- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>location</title> </head> <body> <input type="button" id="btn" value="刷新"> <input type="button" id="gobaidu" value="去百度"> <script> //reload方法，定义一个按钮，点击按钮，刷新当前页面 var btn = document.getElementById("btn") btn.onclick = function () { location.reload(); } //获取href var href = location.href; alert(href); //点击按钮，访问ITcast官网 var gobaidu = document.getElementById("gobaidu"); gobaidu.onclick = function () { location.href = "https://www.baidu.com" } </script> </body> </html>
自动跳转首页案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自动跳转首页</title> <style> p{ text-align: center; } span{ color: red; } </style> </head> <body> <p> <span id="time">5</span>秒之后，自动跳转首页... </p> <script> /* 分析： 1.显示页面效果<p> 2.倒计时读秒效果实现 2.1定义一个方法，获取span标签，修改span标签体内容，时间-- 2.2.定义一个定时器，1秒执行一次该方法 3、在方法中判断时间如果<=e，则跳转到首页 */ var second = 5; function showtime(){ second --; if(second <= 0) { location.href = "https://www.baidu.com"; } var time = document.getElementById("time"); time.innerHTML = second +""; } setInterval(showtime,1000); </script> </body> </html>
四、History：历史记录对象
1. 创建(获取)： 1. window.history 2. history 2. 方法： * back() 加载 history 列表中的前一个 URL。 * forward() 加载 history 列表中的下一个 URL。 * go(参数) 加载 history 列表中的某个具体页面。 * 参数： * 正数：前进几个历史记录 * 负数：后退几个历史记录 3. 属性： * length 返回当前窗口历史列表中的 URL 数量。 ----------------------------------------- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>history</title> </head> <body> <input type="button" id="btn" value="获取历史记录个数"> <a href="History2.html">History2</a> <input type="button" id="forward" value="前进"> <script> var btn = document.getElementById("btn"); btn.onclick = function () { var length = history.length; alert(length); } var forward=document.getElementById("forward"); forward.onclick = function () { // history.forward(); history.go(1); } </script> </body> </html> ----------------------------------------- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>轮播图</title> </head> <body> /* * 1.在页面上使用img标签展示图片 * 2.定义一个方法，修改图片对象的src属性 * 3.定义一个定时器，每隔3秒调用方法一次. * */ <img id="banner" src="img/banner_1.jpg" width="100%"> <input type="button" id="back" value="后退"> <script> var number = 1; function changeImg(){ number ++; if(number > 3){ number = 1; } document.getElementById("banner").src = "img/banner_"+number+".jpg"; } setInterval(changeImg,2000); var back=document.getElementById("back"); back.onclick = function () { // history.back(); history.go(-1); } </script> </body> </html>
