前言
本篇文章是JavaScript
基础知识的BOM
篇,如果前面的《JavaScript基础知识-DOM篇》看完了,现在就可以学习BOM
了。
注意: 所有的案例都在这里链接: 提取密码密码: yvxo
,文章中的每个案例后面都有对应的序号。
1. BOM 基本概念
BOM
(Browser Object Model):浏览器对象模型,提供了一套操作浏览器的工具。
BOM
中包含的内容很多,但是有很多东西是用不到的。在BOM
中我们需要掌握定时器
。
2. window 对象
-
window
对象是一个全局对象,也可以说是JavaScript
中的顶级对象 - 像
document
、alert()
、console.log()
这些都是window
的属性,其实BOM
中基本所有的属性和方法都是属性window
的。 - 所有定义在全局作用域中的变量、函数都会变成
window
对象的属性和方法 -
window
对象下的属性和方法调用的时候可以省略window
示例代码: [01-window对象.html]
普通函数调用的时候:
var name = "项羽";
var age = "28";
function Teacher() {
this.name = "虞姬";
this.age = 22;
console.log(this);
}
// 没有 new 的时候就相当于普通函数调用
var obj = Teacher(); // 打印的this 指的是全局对象window
console.log(name); // 虞姬
console.log(age); // 22
/*
为什么会是 虞姬 和 22 ? 不是定义了一个全局变量name = "项羽"吗?
因为 Teacher作为一个普通函数调用,它里面的this指的就是全局对象
js 代码一步步往下执行,一开始是定义了一个name="项羽"的全局变量,
但是下面的this有将"虞姬"指向了全局对象,所以最后打印的是虞姬 22
*/
构造函数的时候:
var name = "项羽";
var age = "28";
function Teacher() {
this.name = "虞姬";
this.age = 22;
console.log(this);
}
// 没有 new 的时候就相当于普通函数调用
var obj = new Teacher(); // 打印的this 指的是构造函数对象 Teacher
console.log(name); // 项羽
console.log(age); // 28
/*
Teacher作为构造函数的时候,它内部的this指向的是 对象Teacher
此时的全局变量name="项羽" 将不会再受this的影响,所以,打印的是 项羽 28
*/
2.1 window.onload
window.onload
事件会在窗体加载完成后执行,通常我们称之为入口函数
。
window.onload = function(){
//里面的代码会在窗体加载完成后执行。
//窗体加载完成包括文档树的加载、还有图片、文件的加载完成。
}
注意:
- 如果有图片加载,那么代码一定要写到
window.onload
里面,否则会出现图片没有加载完成,获取到的宽度和高度不对的情况。 - 浏览器会对页面的加载做优化,在加载图片的时候,图片的引入会延迟。
- 一个页面中不能有两个
onload
函数,写在下面的会覆盖掉上面的。
示例代码: [02-window.onload对象(一)]
为什么下面的代码会报错呢?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>window.onload</title>
<!-- script写在上面直接报错 -->
<!--
因为代码是一步步向下执行的,在head里的script获取btn或者box的时候,
是获取不到的,因为下面的页面结构还没加载到:
-->
<script>
var btn = document.getElementById('btn');
var box = document.getElementById('box');
btn.onclick = function() {
box.style.width = "500px";
box.style.height = "500px";
}
</script>
</head>
<body>
<button id="btn">按钮</button>
<div id="box" style="width:200px;height:200px;background:pink;"></div>
</body>
</html>
此时就可以用window.onload
入口函数:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>window.onload</title>
<script>
// 这里定义了一个入口函数,就是说等页面所有文档树加载完才会执行这里面的代码:
window.onload = function() {
var btn = document.getElementById('btn');
var box = document.getElementById('box');
btn.onclick = function() {
box.style.width = "500px";
box.style.height = "500px";
}
}
</script>
</head>
<body>
<button id="btn">按钮</button>
<div id="box" style="width:200px;height:200px;background:pink;"></div>
</body>
</html>
示例代码:图片加载 [03-window.onload对象(二)]
为什么获取的宽度和高度都为0
呢,js
代码不是写在最后面了吗?
<body>
<!-- html 部分-->
<img id="img" src="../image/levi.jpg" alt="">
<!-- js 部分 -->
<script>
var img = document.getElementById('img');
console.log(img.width); // 0
console.log(img.height); // 0
</script>
</body>
效果图:
这是因为,浏览器会对页面的加载做优化,在加载图片的时候,图片的引入会延迟。这时候需要用window.onload
:
<head>
<script>
// 当文档加载完成的时候执行,如果有图片,等到图片也加载完成才会执行。
window.onload = function() {
var img = document.getElementById('img');
console.log(img.width);
console.log(img.height);
}
</script>
</head>
<body>
<img id="img" src="../image/levi.jpg" alt="">
</body>
效果图:
2.2 window.open
window.open()
打开一个窗口
语法:window.open(url, [name], [features]);
参数1:需要载入的url地址
参数2:新窗口的名称
_self:在当前窗口打开
_blank:在新的窗口打开
参数3:窗口的属性,指定窗口的大小
返回值:会返回刚刚创建的那个窗口,用于关闭
示例代码: [04-window.open.html]
<!-- html 部分 -->
<button id="btn">点击在新窗口跳转到百度</button>
<button id="btn2">点击在本窗口跳转到百度</button>
<!-- js 部分 -->
<script>
var btn = document.getElementById('btn');
var btn2 = document.getElementById('btn2');
btn.onclick = function() {
// 在新窗口打开,新窗口的大小为300 * 300
var newWin = window.open("http://www.baidu.com", "_blank", "width=300,height=300");
}
btn2.onclick = function() {
// 在当前窗口打开,新窗口的大小根据当前窗口改变的,设置的无效
var newWin = window.open("http://www.baidu.com", "_self");
}
</script>
效果图:
2.3 window.close
window.close()
关闭一个窗口 在火狐浏览器下会失效解决办法
newWin.close();//newWin是刚刚创建的那个窗口
window.close(); //把当前窗口给关闭了
示例代码: [05-window.close.html]
<!-- html 部分 -->
<button id="btn">点击在新窗口跳转到百度</button>
<button id="btn2">点击在本窗口跳转到百度</button>
<button id="btn3">点击关闭打开的新窗口</button>
<button id="btn4">点击关闭本窗口</button>
<!-- js 部分 -->
<script>
var btn = document.getElementById('btn');
var btn2 = document.getElementById('btn2');
btn.onclick = function() {
// 在新窗口打开,新窗口的大小为300 * 300
var newWin = window.open("http://www.baidu.com", "_blank", "width=300,height=300");
btn3.onclick = function() {
// 关闭打开的新窗口
newWin.close();
}
}
btn2.onclick = function() {
// 在当前窗口打开,新窗口的大小根据当前窗口改变的,设置的无效
var newWin2 = window.open("http://www.baidu.com", "_self");
}
btn4.onclick = function() {
// 关闭本窗口
window.close();
}
</script>
效果图:
3. 定时器
定时器里面不能用this
,因为在定时器里面,this
,指向的是全局对象window
。
3.1 延时定时器
延时定时器可以让代码延迟一段时间之后才执行。定时器不是我们调用,我们只需要把函数的地址传过去,时间到了,window
会自己调用。
1、设置延时定时器
语法:setTimeOut(callback, time);
参数1:回调函数,时间到了就会执行。
参数2:延时的时间 单位:毫秒
返 回:定时器的id,用于清除
示例代码: [06-延时定时器.html]
var timer = setTimeOut(function(){
//1秒后将执行的代码。
console.log("哈哈");
}, 1000);
2.清除延时定时器
语法:clearTimeOut(timerId);
// 参数:定时器id
clearTimeOut(timerId);
示例代码:
<!-- html 部分 -->
<button id="btn1">开启</button>
<button id="btn2">关闭</button>
<!-- js 部分 -->
<script>
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
// 定义一个全局变量
var timeId;
// 开启定时器
btn1.onclick = function() {
//设置了一个定时器,会返回一个定时器id
timeId = setTimeout(function() {
// 两秒后在页面显示 Boom!
document.write("<h1> Boom! </h1>");
}, 2000);
}
// 清除定时器
btn2.onclick = function() {
//清除定时器, 需要定时器id
clearTimeout(timeId);
}
</script>
效果图:两秒后执行代码,两秒钟之内清除定时器,就不会执行
3.2 间歇定时器
间歇定时器让定时器每隔一段时间就会执行一次,并且会一直执行,到清除定时器为止。
1、设置间歇定时器
语法:var intervalID = setInterval(func, delay);
参数1:重复执行的函数
参数2:每次延迟的毫秒数
返 回:定时器的id,用于清除
示例代码:
var timer = setInterval(function(){
//重复执行的代码。
}, 1000);
2、清除间歇定时器
语法:clearInterval(intervalID);
参数:定时器id
示例代码: [07-间歇定时器.html]
<!-- html 部分 -->
<button id="btn1">开启</button>
<button id="btn2">关闭</button>
<!-- js 部分 -->
<script>
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
// 定义一个全局变量 存放定时器
var timer;
// 开启定时器
btn1.onclick = function() {
//设置了一个定时器,会返回一个定时器 id
timer = setInterval(function() {
// 每隔1秒 就会创建一个 h2 标签
var tag = document.createElement("h2");
tag.innerHTML = "我是间歇定时器";
document.body.appendChild(tag);
}, 1000);
};
// 清除定时器
btn2.onclick = function() {
//清除定时器, 需要定时器id
clearInterval(timer);
document.body.innerHTML = "<h1>间歇定时器已清除</h1>";
};
</script>
效果图:
2.3 定时器综合练习
1、获取短信验证码案例 [08-定时器综合练习-获取短信验证码.html]
<!-- html 部分-->
<input type="button" value="点击获取短信验证码" id="btn">
<!-- js 部分 -->
<script>
var btn = document.getElementById('btn');
var timer = null;
btn.onclick = function() {
// 倒计时的秒数
var num = 5;
// 当按钮点击的时候 禁用button
btn.disabled = true;
timer = setInterval(function() {
// 每隔一秒修改num的值
num--;
// 修改btn的value值 这里不可以用this 因为定时器里的this指的是window对象
btn.value = num + "秒后可再次发送";
// 当num = 0 秒的时候,清除定时器
if (num == 0) {
clearInterval(timer);
btn.disabled = false;
btn.value = "点击获取短信验证码";
}
}, 1000);
}
</script>
效果图:
2、倒计时案例 [09-定时器综合练习-倒计时案例.html]
<!-- 样式部分 -->
<style>
.time {
width: 160px;
height: 40px;
margin: 100px auto;
line-height: 40px;
font-size: 24px;
font-weight: 700;
}
#h,
#m,
#s {
float: left;
display: block;
width: 40px;
height: 40px;
text-align: center;
background-color: #F9F9F9;
box-shadow: 1px 1px 2px #616161;
color: #453246;
border-radius: 5px;
}
.split {
width: 20px;
float: left;
text-align: center;
}
</style>
<!-- html 部分 -->
<div class="time">
<span id="h">00</span>
<span class="split">:</span>
<span id="m">00</span>
<span class="split">:</span>
<span id="s">00</span>
</div>
<!-- js 部分 -->
<script>
var h = document.getElementById('h');
var m = document.getElementById('m');
var s = document.getElementById('s');
setTime();
var timer = setInterval(setTime, 1000);
function setTime() {
// 获取当前时间
var newTime = new Date(); // 此时测试的时间是 2017-12-11 15:24:00(根据本地时间一直在变)
// 定义一个未来的时间
var futureTime = new Date("2017-12-11 16:30:31");
// 获取时间差 单位是毫秒 首先我们需要转成秒 而且时间戳获取的时候 有很多小数 需要取整一下
var time = parseInt((futureTime - newTime) / 1000);
// time现在已经是秒了 我们需要将它转换成小时
// 1h = 3600s
var hours = parseInt(time / 3600);
// 将获取的小时添加到页面中
// 注意因为时钟是两位数,这里的小时可能只是一个个位数,所以需要拼接一个 "0"
// 因为 分钟、秒都需要拼0,所以我们可以封装一个函数
h.innerHTML = addZero(hours);
// 获取分钟
// 先将 time 转换成分钟 再去取余60
var minutes = parseInt(time / 60) % 60;
// 将获取的分钟添加到页面中
m.innerHTML = addZero(minutes);
// 获取秒
var seconds = time % 60;
s.innerHTML = addZero(seconds);
// 还要做个判断 当time这个时间差小于等于0的时候 清除定时器
if (time <= 0) {
// 如果不置0的话 还会继续减
time = 0;
clearInterval(timer);
}
}
// 拼接 0 函数
function addZero(num) {
// 如果传进来的参数小于10 就要给他拼 0
return num < 10 ? '0' + num : num;
}
</script>
效果图:
3、电子表案例 [10-定时器综合练习-电子表.html]
<!-- 样式部分 -->
<style>
#box {
width: 300px;
height: 50px;
background-color: #F9F9F9;
box-shadow: 1px 1px 2px #616161;
color: #453246;
border-radius: 5px;
margin: 100px auto;
font: bold 24px/50px 楷体;
text-align: center;
}
</style>
<!-- html 部分 -->
<div id="box"></div>
<!-- js 部分 -->
<script>
var box = document.getElementById('box');
// 封装一个获取当前时间的函数
function getTime() {
// 获取当前时间
var date = new Date();
console.log(date);
// 获取当前的年份
var year = date.getFullYear();
// 获取当前时间的月份
var month = addZero(date.getMonth() + 1);
// 获取当前的天
var day = addZero(date.getDate());
// 获取小时
var hours = addZero(date.getHours());
// 获取分钟
var minutes = addZero(date.getMinutes());
// 获取秒
var seconds = addZero(date.getSeconds());
// 将时间格式设置为如下格式
var str = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
return str;
}
// 拼 0 函数
function addZero(num) {
return num < 10 ? "0" + num : num;
}
// 定时器会延迟一秒执行,在外面定义一遍 会补偿这个一秒
box.innerHTML = getTime();
setInterval(function() {
box.innerHTML = getTime();
}, 1000);
</script>
效果图:
4、机械表案例 [11-定时器综合练习-机械表.html]
<!-- 样式部分 -->
<style>
.clock {
width: 600px;
height: 600px;
margin: 100px auto;
background: url(../image/机械表/clock.jpg) no-repeat;
position: relative;
}
.clock div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(../image/机械表/hour.png) no-repeat center center;
}
#m {
background-image: url(../image/机械表/minute.png);
}
#s {
background-image: url(../image/机械表/second.png);
}
</style>
<!-- html 部分 -->
<div class="clock">
<div id="h"></div>
<div id="m"></div>
<div id="s"></div>
</div>
<!-- js 部分 -->
<script>
var h = document.getElementById("h");
var m = document.getElementById("m");
var s = document.getElementById("s");
function setTime() {
// 获取当前时间
var date = new Date();
// 设置秒针
var seconds = date.getSeconds() + (date.getMilliseconds() / 1000);
s.style.transform = "rotate(" + 6 * seconds + "deg)";
// 设置分针
// 60分钟一圈360度 每分钟相当于 6度 这样只会一分分钟的走
// 我们想要的效果是秒针旋转地同时 分针也在微弱的旋转 seconds/60得到一个小数 加上分钟 再去乘以角度
var minutes = date.getMinutes() + seconds / 60;
m.style.transform = "rotate(" + 6 * minutes + "deg)";
// 设置时针
// 12个小时是一圈360度 每个小时相当于 30度
var hours = date.getHours() + minutes / 60;
h.style.transform = "rotate(" + 30 * hours + "deg)";
}
// 页面一加载就执行一次
setTime();
// 让window每隔15ms就执行一次 1秒钟 分成 25份就已经有动画效果 分成60份,很细腻
setInterval(setTime, 15);
</script>
效果图:
4. Location对象
location
对象也是window
的一个属性,location
其实对应的就是浏览器中的地址栏。
4.1 常用的属性和方法
location.href
:控制地址栏中的地址
location.href = "http://www.baidu.com"; //让页面跳转到百度首页
location.reload()
让页面重新加载
location.reload(true);//强制刷新,相当于ctrl+F5
location.reload(false);//刷新,相当于F5
location
的其他属性
console.log(window.location.hash); // 哈希值 其实就是锚点
console.log(window.location.host); // 服务器 服务器名+端口号
console.log(window.location.hostname); // 服务器名
console.log(window.location.pathname); // 路径名
console.log(window.location.port); // 端口
console.log(window.location.protocol); // 协议
console.log(window.location.search); // 参数
示例代码:定时跳转网址 [12-location对象-定时跳转.html]
<!-- html 部分 -->
<a href="#" id="link">注册成功,5秒后跳转</a>
<!-- js 部分 -->
<script>
var num = 5;
var link = document.getElementById('link');
var timer = setInterval(function() {
num--;
link.innerHTML = "注册成功," + num + "秒后跳转";
// 如果倒计时等于0的时候,自动跳转到网址
if (num == 0) {
clearInterval(timer);
location.href = "https://segmentfault.com/u/marsman_levi";
}
}, 1000);
</script>
效果图:
5. Navigator 对象
window.navigator
的一些属性可以获取客户端的一些信息
navigator.userAgent:返回浏览器版本
navigator.onLin:返回网络状态 true / false
示例代码:获取浏览器版本 [13-navigator对象.html]
// 打印浏览器版本
console.log(navigator.userAgent);
// 打印网络状态
console.log(navigator.onLine);
效果图:
6. Screen 对象
window.screen
的一些属性可以获取屏幕的宽高
1、获取屏幕的可占用宽高
返回访问者屏幕的宽度、高度,以像素计,减去界面特性,比如窗口任务栏。
screen.availWidth:获取屏幕的可用宽度
screen.availHeight:获取屏幕的可用高度
2、获取屏幕宽高
screen.width:获取屏幕的宽度
screen.height:获取屏幕的高度
示例代码: [14-screen对象.html]
document.write("当前屏幕可占用宽度:" + screen.availWidth + "<br>"); // 1864
document.write("当前屏幕可占用高度:" + screen.availHeight + "<br>"); // 1080
document.write("当前屏幕宽度:" + screen.width + "<br>"); // 1920
document.write("当前屏幕高度:" + screen.height + "<br>"); // 1080
效果图:
7. History 对象
history
对象表示页面的历史
1、后退 history.back()
history.back()
方法加载历史列表中的前一个URL
。这与在浏览器中点击后退按钮是相同的:
history.back();
history.go(-1);
2、后退 history.forward()
history forward()
方法加载历史列表中的下一个URL
。这与在浏览器中点击前进按钮是相同的:
history.forward();
history.go(1);
8. javascript 弹框
在javascript
中可以创建3
种弹框,分别是:警告框、确认框、提示框。
1、警告框 alert
- 警告框经常用于确保用户可以得到某些信息。
- 当警告框出现后,用户需要点击确定按钮才能继续进行操作。
window.alert("呵呵呵");
// window.alert() 方法可以不带上window对象,直接使用alert()方法。
alert("呵呵呵");
2、确认框 confirm
- 确认框通常用于验证是否接受用户操作。
- 当确认卡弹出时,用户可以点击 "确认" 或者 "取消" 来确定用户操作。
- 当你点击 "确认", 确认框返回
true
, 如果点击 "取消", 确认框返回false
。
var result = confirm();
if (result == true) {
alert("你真的是猪!");
} else {
alert("你不是猪!");
}
3、提示框 prompt
- 提示框经常用于提示用户在进入页面前输入某个值。
- 当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵。
- 如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为
null
。
// 参数一:提示内容 参数er:可以省略,输入框默认显示内容
var person = prompt("请输入你的名字", "Levi丶");
if (person != null && person != "") {
alert("你好" + person);
}
4、弹框换行
弹窗使用 反斜杠 + "n"(\n)
来设置换行。
alert("大家好\n我是\nLevi丶");
9. javascript Cookie
Cookie
用于存储web
页面的用户信息
1、什么是Cookie?
-
Cookie
是一些数据, 存储于你电脑上的文本文件中。 - 当
web
服务器向浏览器发送web
页面时,在连接关闭后,服务端不会记录用户的信息。 -
Cookie
的作用就是用于解决 "如何记录客户端的用户信息":- 当用户访问
web
页面时,他的名字可以记录在cookie
中。 - 在用户下一次访问该页面时,可以在
cookie
中读取用户访问记录。
- 当用户访问
Cookie
以名/值对形式存储,如下所示:
username=Levi
当浏览器从服务器上请求web
页面时,属于该页面的cookie
会被添加到该请求中。服务端通过这种方式来获取用户的信息。
2、使用 JavaScript 创建Cookie
JavaScript
可以使用document.cookie
属性来创建 、读取、及删除cookie
。
JavaScript中,创建cookie
如下所示:
document.cookie = "username = Levi";
你还可以为cookie
添加一个过期时间(以 UTC
或 GMT
时间)。默认情况下,cookie
在浏览器关闭时删除:
document.cookie="username = Levi; expires = Tue Dec 12 2017 11:32:33 GMT+0800";
你可以使用path
参数告诉浏览器cookie
的路径。默认情况下,cookie
属于当前页面
document.cookie="username = Levi; expires = Tue Dec 12 2017 11:32:33 GMT+0800; path = /";
3、使用 JavaScript 读取 Cookie
在 JavaScript 中, 可以使用以下代码来读取cookie
:
var x = document.cookie;
document.cookie
将以字符串的方式返回所有的cookie
,类型格式cookie1=value;
cookie2=value;
cookie3=value;
4、使用 JavaScript 修改 Cookie
在 JavaScript 中,修改cookie
类似于创建cookie
,如下所示:
document.cookie="username = LXH; expires = Tue Dec 12 2017 11:32:33 GMT+0800; path = /";
旧的cookie
将被覆盖。
5、使用 JavaScript 删除 Cookie
删除cookie
非常简单。您只需要设置expires
参数为以前的时间即可,如下所示
document.cookie="username = Levi; expires = Thu, 01 Jan 1970 00:00:00 GMT;";
注意,当您删除时不必指定 cookie 的值。
6、Cookie 字符串
document.cookie
属性看起来像一个普通的文本字符串,其实它不是。
即使您在document.cookie
中写入一个完整的cookie
字符串, 当您重新读取该cookie
信息时,cookie
信息是以名/值对的形式展示的。
如果您设置了新的cookie
,旧的cookie
不会被覆盖。 新cookie
将添加到document.cookie
中,所以如果您重新读取document.cookie
。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。