JavaScript BOM
JavaScript BOM
- BOM(Browser Object Model):浏览器对象模型。
- 将浏览器的各个组成部分封装成不同的对象,方便我们进行操作。
1、Windows窗口对象
-
定时器
- 唯一标识 setTimeout(功能,毫秒值):设置一次性定时器。
- clearTimeout(标识):取消一次性定时器。
- 唯一标识 setInterval(功能,毫秒值):设置循环定时器。
- clearInterval(标识):取消循环定时器。
-
加载事件
- window.onload:在页面加载完毕后触发此事件的功能。
-
代码实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>window窗口对象</title> <script> //一、定时器 function fun(){ alert("该起床了!"); } //设置一次性定时器 //let d1 = setTimeout("fun()",3000); //取消一次性定时器 //clearTimeout(d1); //设置循环定时器 //let d2 = setInterval("fun()",3000); //取消循环定时器 //clearInterval(d2); //加载事件 window.onload = function(){ let div = document.getElementById("div"); alert(div); } </script> </head> <body> <div id="div">dddd</div> </body> <!-- <script> //一、定时器 function fun(){ alert("该起床了!"); } //设置一次性定时器 //let d1 = setTimeout("fun()",3000); //取消一次性定时器 //clearTimeout(d1); //设置循环定时器 //let d2 = setInterval("fun()",3000); //取消循环定时器 //clearInterval(d2); //加载事件 let div = document.getElementById("div"); alert(div); </script> --> </html>
2、Location地址栏对象
-
href 属性
就是浏览器的地址栏。我们可以通过为该属性设置新的 URL,使浏览器读取并显示新的 URL 的内容。
-
代码实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>location地址栏对象</title> <style> p{ text-align: center; } span{ color: red; } </style> </head> <body> <p> 注册成功!<span id="time">5</span>秒之后自动跳转到首页... </p> </body> <script> //1.定义方法。改变秒数,跳转页面 let num = 5; function showTime() { num--; if(num <= 0) { //跳转首页 location.href = "index.html"; } let span = document.getElementById("time"); span.innerHTML = num; } //2.设置循环定时器,每1秒钟执行showTime方法 setInterval("showTime()",1000); </script> </html>
3、案例-动态广告
-
案例分析和实现
<!-- 广告图片 --> <img src="img/ad_big.jpg" id="ad_big" width="100%"/>
-
在 css 样式中,display 属性可以控制元素是否显示
style="display: none;"
-
设置定时器,3 秒后显示广告图片
//1.设置定时器,3秒后显示广告图片 setTimeout(function(){ let img = document.getElementById("ad_big"); img.style.display = "block"; },3000);
-
设置定时器,3 秒后隐藏广告图片
//2.设置定时器,3秒后隐藏广告图片 setTimeout(function(){ let img = document.getElementById("ad_big"); img.style.display = "none"; },6000);
4、小结
- BOM(Browser Object Model):浏览器对象模型。
- 将浏览器的各个组成部分封装成不同的对象,方便我们进行操作。
- Window:窗口对象
- Location:地址栏对象
- Navigator:浏览器对象
- History:当前窗口历史记录对象
- Screen:显示器屏幕对象
- Window 窗口对象
- setTimeout()、clearTimeout():一次性定时器
- setInterval()、clearInterval():循环定时器
- onload 事件:页面加载完毕触发执行功能
- Location 地址栏对象 href 属性:跳转到指定的 URL 地址