10 JavaScript高级BOM 01
一、BOM（浏览器对象模型-------->Browser Object Model）
先看看组成
1.概念
将浏览器的各个组成部分封装成对象。
2. 组成：
* Window：窗口对象（重要）
* Location：地址栏对象（重要）
* History：历史记录对象
* Navigator：浏览器对象（不用）
* Screen：显示器屏幕对象（不用）
3.Window：窗口对象
1. 与弹出框有关的方法：
confirm() 方法
显示带有一段消息以及确认按钮和取消按钮的对话框。
* 如果用户点击确定按钮，则方法返回true
* 如果用户点击取消按钮，则方法返回false
2. 与打开关闭有关的方法：
close() 关闭浏览器窗口。
* 谁调用我 ，我关谁
open() 打开一个新的浏览器窗口
* 返回新的Window对象
3.与定时器有关的方式
setTimeout(参数1，参数2) 在指定的毫秒数后调用函数或计算表达式。
* 参数：
1. js代码或者方法对象
2. 毫秒值
* 返回值：唯一标识，用于取消定时器
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
setInterval(参数1，参数2) 按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval() 取消由 setInterval() 设置的 timeout。
clearInterval() 取消由 setInterval() 设置的 timeout。
4. 特点
* Window对象不需要创建可以直接使用 window使用。 window.方法名();
* window引用可以省略。 方法名();
4. Location：地址栏对象
1. 创建(获取)：
1. window.location
2. location
2. 方法：
* reload() 重新加载当前文档。刷新
3. 属性
* href 设置或返回完整的 URL
练习1---开关灯（事件绑定的两种方式）
<body>
<img id="lamp" src="img/off.gif" alt="电灯">
<script>
//第一种方式
var lamp = document.getElementById("lamp");
var flag = false;//关了
lamp.onclick = function () {
if (flag){
lamp.src = "img/off.gif";
flag = false;
}else {//打开
lamp.src = "img/on.gif";
flag = true;
}
}
//第二种方式
/* var lamp = document.getElementById("lamp");
var flag = false;//关了
var fun = function () {
if (flag){
lamp.src = "img/off.gif";
flag = false;
}else {//打开
lamp.src = "img/on.gif";
flag = true;
}
}
lamp.onclick = fun;*/
</script>
</body>
练习2 已下三张图片实现轮播图
banner_1.jpg
banner_2.jpg
banner_3.jpg
代码如下
<body>
<img id="img1" src="img/banner_1.jpg" alt="轮播图">
<script>
var img = document.getElementById("img1");
//1.定义fun方法，用来执行轮播操作
var num = 1;
//第一种定义方法
var fun = function () {
num++;
if (num > 3){
num = 1;
}
img.src = "img/banner_"+num+".jpg";
}
//第二种定义方法
/* function fun(){
num++;
if (num > 3){
num = 1;
}
img.src = "img/banner_"+num+".jpg";
}*/
//2.定时器，每隔2s执行fun方法
setInterval(fun,2000);
</script>
</body>
练习3------->倒计时5s跳到百度首页
<body>
<p>
<span id="span">5</span> s后自动跳转到百度首页
</p>
<script>
//1.定义方法执行操作
var num = 5;
function fun() {
var span = document.getElementById("span");
if(num <= 0) {
location.href = "https://www.baidu.com";
} else {
num--;
span.innerHTML = num;
}
}
setInterval(fun, 1000);
</script>
</body>
练习4：点击"显示定时器按钮"，弹出是否确认，点击确认后，倒计时五秒弹出内容"我是定时器"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#divs {
text-align: center;
}
span {
color: red;
}
</style>
</head>
<body>
<div id="divs">
<input id="inputs" type="button" value="显示定时器的警告框" name="wtg" />
<p>
<span id="spans">5</span>秒后弹出框
</p>
</div>
<script>
var inputs = document.getElementById("inputs");
var num = 5;
var id;
inputs.onclick = function() {
var flag = confirm("是否确定？");
if(flag) {
id = setInterval(function() {
if(num <= 0) {
clearInterval(id);
alert("我是定时器");
return;
}
num--;
document.getElementById("spans").innerHTML = num;
}, 1000);
}
};
</script>
</body>
</html>
练习5 每天的23:59:59,弹框"执行一次方法"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//每天的23:59:59,执行一次方法
function fun2() {
var hours = new Date().getHours()+"";
var minutes = new Date().getMinutes()+"";
var seconds = new Date().getSeconds()+"";
var str = hours+":"+minutes+":"+seconds;
if (str == "23:59:59"){
alert("方法每天执行一次")
}
}
setInterval(fun2,1000);
</script>
</head>
<body>
</body>
</html>