BOM 浏览器对象模型
- BOM（Browser Object Model）是指浏览器对象模型，浏览器对象模型提供来独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM 由多个对象组成，其中代表浏览器窗口的 Window 对象是 BOM 的顶层对象，其他对象都是该对象的子对象
- 我们在浏览器中的一些操作都可以使用 BOM 的方式进行编程处理，比如：刷新浏览器、后退、前进、在浏览器中输入 URL 等。
在全局作用域中定义变量，尽量不要用 name 和 top
对话框
- alert()
- prompt()
- confirm()
confirm() 这个方法有返回值，根据按钮点击情况，如果点击确定 返回 true，如果点击取消 返回 false
以上方法有兼容问题，不要直接用，最好模拟写一个
onload 事件
- 我们可以给 window 对象或者 <img> 等元素添加 onload 加载事件，表示只有绑定事件的元素加载完毕才能触发事件，才能执行事件函数
- 其中 window 对象加载完毕；指的是所有 HTML 结构加载完，并且外部引入资源（js、css、img、视频）也加载完毕。
应用
- 利用 window.onload 事件，可以将 js 代码提前到 html 结构之前
- 注意：一个页面只能有一个 window.onload 事件
延时器
- 延时器是 windos 对象的一个方法，类似于定时炸弹
- 语法：window.setTimeout(func,time);
- 第一个参数：延时执行的函数，可以是匿名函数定义，或者是一个函数名的引用，注意不要加（）。
- 第二个参数：延时的时间，以毫秒计数，1000 毫秒等一 1 秒。
- 功能：在指定的时间后，延迟执行一个函数
清除延时器
- window 对象的一个方法
- 语法：window.clearTimeout(timeout);
- 参数：指定的延时器变量名引用
- 功能：清除指定的延时器
- 注意：清除的延时器需要存储到一个变量中，便于后期清除调用
函数节流操作
- 定义一个开关，给函数上一把锁，true表示锁住状态，不能执行后面的代码，false 表示打开状态，可以执行后面的代码
<body>
<input type="button" name="" id="btn" value="点">
</body>
<script>
var btn = document.getElementById("btn");
var lock = false;
btn.onclick = function() {
if (lock) {
return
};
}
console.log(Math.random());
lock = true;
setTimeout(function(){
lock = false;
},2000);
</script>
定时器
- 定时器是 window 对象的一个方法，相当于定时闹钟，每隔固定的时间响一次
- 语法：window.setInterval(func,interval);
- 第一个参数：每次执行的函数，可以是匿名函数定义，或者是一个函数名的引用，注意不要加（）
- 第二个参数：时间间隔，以毫秒计数，1000 毫秒等一 1 秒
- 功能：每隔一个指定的时间，周期性的执行一个函数
var i = 1;
window.setInterval(function(){
console.log(i++)
},500)
清除定时器
- window 对象的一个方法
- 语法：window.clearInterval(timer);
- 参数：指定的定时器变量名引用
- 功能：清除指定的定时器
- 注意：清除的定时器需要存储到一个变量中，便于后期清除调用
简单运动
原理
- 简单运动：是一种视觉暂留效果，只要元素变化过程时间够短，给人眼造成的效果就是一个运动的效果，人眼的视觉残留的时间 0.1 - 0.4 秒之间
- 制作方法：通过定时器，实现每隔一个极短的时间（50 - 100 毫秒左右），执行函数，函数内部让运动的属性值发生变化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
position: absolute;
top: 100px;
left: 0;
width: 100px;
height: 100px;
background-color: skyblue;
}
</style>
</head>
<body>
<input type="button" value="开始" id="start">
<div class="box" id="box"></div>
</body>
<script>
// 简单运动
// 获取元素
var start = document.getElementById("start")
var box = document.getElementById("box")
// 点击开始按钮，让box像右运动
// 全局变量存储 left 的属性值，会每次发生变化
// 信号量，初始值必须与属性初始值一致
var nowleft = 0;
// 定时器，制作运动过程
start.onclick = function () {
setInterval(function(){
// 信号量进行自加
nowleft += 10;
// 将最新的 nowleft 的值赋值给元素的 css 属性
box.style.left = nowleft + "px";
},100);
};
</script>
</html>
提高运动速度的方法
- 1、缩短时间间隔，增加了每秒移动的次数
- 2、加大步长，让每一次走的步长增加
清除定时器的问题
-
问题1 将定时器的开始和停止过程书写在不同的事件函数内部，容易出现用户错误点击情况
1 多次点击开始，会造成加速
2 多次点击开始，不能够再停止 -
问题2
要求元素走到指定位置停止，例如让元素停止在 500px 的位置
如果步长设置的不合理，停止的位置可能不是正好在 500 处
解决
-
设表先关
-
每次开启新的定时器之前，都清除一次前面的定时器
-
拉终停表
-
在定时器内部每次都要判断是否走到了终点，要不要停止定时器
-
如果走到或超过了终点，强行拉到终点，并停止定时器
封装动画函数
- 单一动画
- 多属性动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>封装动画函数</title>
<style>
* {
margin: 0;
padding: 0;
}
.box{
position: absolute;
top: 100px;
left: 0;
width: 100px;
height: 100px;
background-color: #0f0;
}
</style>
</head>
<body>
<input type="button" value="开始" id="start">
<div class="box" id="box"></div>
</body>
<script>
// 获取元素
var start = document.getElementById("start");
var box = document.getElementById("box");
// 补充 获取计算后样式的方法
console.log(window.getComputedStyle(box).width)
// box 是需要运动的元素
// 多属性运动
// 共同点：总时间、时间间隔是相同的，自定义
// 不同点：起始位置（通过程序方法自动获取当前页面最种显示效果）和结束位置（自定义指定的）
// 函数参数
// 参数1: 元素对象，它要进行运动
// 参数2: 结束位置，以对象数据方式传递
// 参数3: 总时间
// 调用函数
animate(box,{left: 400,width: 300,height: 200,opacity: 1},2000);
// 自定义动画函数
function animate(ele,end,time){
// 已知结束位置，总时间，时间间隔 50，缺少起始位置
// 起始位置要根据结束位置提供的属性进行获取
// 起始位置的对象，需要先定义一个空对象
var now = {};
// start.left = 100;
// end 对象遍历，获取属性名
for(var k in end){
now[k] = parseFloat(window.getComputedStyle(ele)[k]);
}
// console.log(start)
// 自定义时间间隔
var interval = 50;
// 计算总次数
var maxCount = time / interval;
// 次数累加器
var count = 0;
// 对象种的每个属性都有自己的步长，也可以放到一个步长对象种
var step = {};
// 遍历结束对象，计算每个属性的步长
for(var k in end){
step[k] = (end[k] - now[k]) / maxCount;
}
// console.log(step);
// =============== 准备工作结束，开启定时器 ===============
var timer;
timer = setInterval(function(){
// 让每个属性发生变化，赋值给 now 对象中的每一项
for(var k in end){
now[k] += step[k];
}
// 累计运动次数
count++
// 判断定时器是否结束
if(count >= maxCount){
// 拉钟停表
for(var k in end){
now[k] = end[k];
}
// nowLeft = endLeft;
// nowWidth = endWidth;
clearInterval(timer);
}
// 给属性赋值
// box.style.left = nowLeft + "px";
// box.style.width = nowWidth + "px";
for(var k in now){
// 判断如果是 不透明度属性，不要加 px 单位
if(k === "opacity"){
ele.style[k] = now[k];
}else{
ele.style[k] = now[k] + "px";
}
}
},interval)
}
</script>
</html>
location 对象
- location 对象是 window 对象下的一个属性，使用的使用可以省略 window 对象
- location 可以获取或者设置浏览器地址栏的 URL
URL
- 统一资源定位符 （Uniform Resource Locator URL）
- URL的组成：scheme://host:port/path?query#fragment
- 例如：https://www.baidu.com
- scheme：通信协议，常用的http ftp maito等
- host：主机，服务器（计算机）域名系统（DNS）主机名或 IP 地址
- port：端口号，整数，可选，省略时使用方案的默认端口，如http的默认端口为80
- path：路径，由零或多个'/'符号隔开的字符串，一般用来表示主机上的一个目录或文件地址
- query：查询，可选，用于给动态网页传递参数，可有多个参数，用'&'符号隔开，每个参数的名和值用'='符号隔开。例如：name=zs
- fragment：信息片段，字符串，锚点
history
- history 对象是 window 对象下的一个属性，使用的时候可以省略 window 对象
- history 对象可以与浏览器历史记录进行交互，浏览器历史记录是对用户所访问的页面按时间进行的记录和保存
- back()
- forward()
- go()
网友评论