BOM学习
- 概念：Browser Object Model
- 将浏览器的各个组成部分封装成对象
- 更多详细学习：https://www.w3school.com.cn/jsref/index.asp
- 组成：
- Window：窗口对象
- Navigator：浏览器对象
- Screen：显示器屏幕对象
- History：历史记录对象
- Location：地址栏对象
- Window：窗口对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Window对象</title>
<script> /** * Window 窗口对象 * 1. 创建 * 2. 方法 * 1. 与弹出框有关的方法 * alert() 显示带有一段消息和一个确认按钮的警告框。 * confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。 * 如果用户点击取消按钮，则方法返回false * 如果用户点击确定按钮，则方法返回true * prompt() 显示可提示用户输入的对话框。 * 2. 与打开关闭有关的方法 * close() 关闭浏览器窗口。 * open() 打开一个新的浏览器窗口或查找一个已命名的窗口。 * 会返回一个Window对象 * 3. 与定时器有关的方法 * setTimeout() 在指定的毫秒数后调用函数或计算表达式。 * *参数： * 1. js代码或者方法对象 * 2. 毫秒值 * 3. 返回值 * *返回值：唯一标识，用于取消定时器 * clearTimeout() 取消由 setTimeout() 方法设置的 timeout。 * * setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。 * clearInterval() 取消由 setInterval() 设置的 timeout。 * * 3. 属性： * 1. 获取其他BOM对象 * history 对 History 对象的只读引用。请参数 History 对象。 * location 用于窗口或框架的 Location 对象。请参阅 Location 对象。 * Navigator 对 Navigator 对象的只读引用。请参数 Navigator 对象。 * Screen 对 Screen 对象的只读引用。请参数 Screen 对象。 * 2. 获取DOM对象 * * 4. 特定 * Window对象不需要创建可以直接使用 window使用。window.方法名() * window引用可以省略。方法名(); * 比如：alert(); or window.alert(); */ // var f=confirm("是否退出？"); // document.write(f); // //输入框，括号里面是填提示 // var s =prompt("balala"); // document.write(s); //打开一个窗口 // open();//括号填网址URL // function f(){
// document.write("嘻嘻"+"<br>"); // // alert("爆炸"); // } //一次性的定时器 // setTimeout("f()",3000); // to1=setTimeout(f,3000); // //循环定时器 // var id2=setInterval(f,2000); // function f2(){
// clearInterval(id2); // } // setTimeout(f2,6000); //获取history对象 var h1 = history; alert(h1); </script>
</head>
<body>
<!-- <input type="button" id="quxiaob" value="取消定时">-->
<!--<input type="button" id="openbut" value="打开窗口">-->
<!--<input type="button" id="closebut" value="关闭窗口">-->
<!--<script>-->
<!-- var openb=document.getElementById("openbut");-->
<!-- var newwindow;-->
<!-- openb.οnclick=function (){-->
<!-- //打开一个窗口-->
<!-- newwindow=open("./03_点灯开关.html");-->
<!-- }-->
<!-- var closeb=document.getElementById("closebut");-->
<!-- closeb.οnclick=function (){-->
<!-- //打开一个窗口-->
<!-- newwindow.close();-->
<!-- }-->
<!--</script>-->
<!--<script>-->
<!-- var to1=setTimeout(f,3000);-->
<!-- //用按钮取消定时器-->
<!-- var tob=document.getElementById("quxiaob");-->
<!-- tob.οnclick=function (){-->
<!-- clearTimeout(to1);-->
<!-- alert(to1);-->
<!-- }-->
<!--</script>-->
</body>
</html>
- Location：地址栏对象
- 创建(获取)
- location
- window.location
- 方法：
- reload() 重新加载当前文档。
- 属性
- href 设置或返回完整的URL
- 创建(获取)
- History：历史记录对象
- 创建(获取)
- window.history
- history
- 方法：
- back() 加载 history 列表中的前一个 URL。
- forward() 加载 history 列表中的下一个 URL。
- go(参数) 加载 history 列表中的某个具体页面。
- 参数：
- 正数：前进几个历史记录
- 负数：后退几个历史记录
- 参数：
- 属性：
- length 返回的是当前窗口历史列表中的URL数量。
- 创建(获取)
定时器案例-轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>案例-轮播图</title>
<script> /** * 分析： * 1.在页面上使用img标签展示图片 * 2.定义一个方法，修改图片对象的src属性 * 3.定义一个定时器，每个3秒就调用方法一次 */ </script>
</head>
<body>
<img src="../image/banner_1.jpg" id="lunbotu" width="100%">
<script> var lun = document.getElementById("lunbotu"); setInterval(lunbo,3000); var k=1; function lunbo(){
var list=["../image/banner_1.jpg","../image/banner_2.jpg","../image/banner_3.jpg"] lun.src=list[k]; k++; k%=3; } </script>
</body>
</html>
自动跳转首页案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自动跳转首页</title>
<style> p{
text-align: center; } p span{
color: red; } </style>
<script> /** * 分析： * 1. 显示页面效果 * 2. 倒计时读秒效果实现 * 2.1 定义一个方法，获取span标签，修改标签体内容，时间 * 2.2 定义一个定时器，1秒执行一次该方法 */ </script>
</head>
<body>
<p><span id="scend">5</span> 秒之后，自动跳转到首页...</p>
<script> var sce = document.getElementById("scend"); var t=setInterval(time,1000); var zt=5; function time(){
sce.textContent=--zt; if (zt==0){
clearInterval(t); goTB(); } } function goTB(){
location.href="https://www.taobao.com"; } </script>
</body>
</html>
京公网安备 11010502036488号