webAPI （05）
页面加载事件
- 很多业务和功能 都需要使用到外部资源（外部css js 图片 视频）
- 写代码 ，我们会把所有的代码 都写在 window load 事件中来确保 资源全部都可以使用
<script>
window.addEventListener("load", function (event) {
console.log("你好");
</script>
页面加载事件的作用
-
DOMContentLoaded
-
页面的标签 都加载完毕就触发了，不需要等待标签的内容回来
-
video 标签一生成，事件就触发
-
load 事件等待 vide标签生成了 ，同时 video标签内的视频也加载回来 才触发
-
video加载分两部
-
只是加载标签而已 很快 DOMContentloaded 块
-
会去加载 标签对应的视频 比较慢 load 慢
<script>
document.addEventListener("DOMContentLoaded", function () {
console.log("DOMContentLoaded 标签加载完毕就触发了");
});
</script>
<!-- 以前写js 习惯写在head标签中 -->
<script>
// 等待标签加载完毕了，才去获取dom元素
document.addEventListener("DOMContentLoaded", function () {
const h1 = document.querySelector("h1");
h1.innerText = "我是恁爹";
// js先执行，但是 dom元素还没有开始加载
});
</script>
元素家族
scroll家族
- 获取宽高
- 获取元素的内容总宽高（不包含滚动条） 返回值不带单位
- scrollWidth 和 scrollHeight
- 获取位置
- 获取元素内容往左 、 往上滚出去看不到的距离
- scrolLeft 和 scrollTop
- 这两个属性是可以修改的
<script>
const div = document.querySelector(".bbxx");
// console.log(div.scrollWidth);// 加滚动条会少17px
// console.log(div.scrollHeight);
div.addEventListener("scroll", function () {
// console.log(this.scrollTop); // 获取当前容器的滚动距离
console.log(this.scrollLeft); // 获取当前容器的滚动条距离
/*
1 页面滚动 使用 window.addEventListener("scroll") 事件
2 页面的滚动距离 document.documentElement.scrollTop
1 元素滚动 dom.addEventListener("scroll")
2 获取元素滚动的距离
this.scrollTop
this.scrollLeft
3 scrollWidth 整个可以滚动的区间的宽度
4 scrollHeight 整个可以滚动的区域的高度
小细节 pc端 的滚动条 大小 17px
小细节 移动端的滚动条 不占大小
*/
});
</script>
offset 家族
- 获取宽高
- 获取元素的自身宽高 、 包含元素自身设置的宽高 、 padding 、 border
- offsetWidth 和 offsetHeiqht
- 获取位置
- 获取元素距离自己定位父级元素的左 、 上距离
- offsetLeft 和 offsetTop
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
position: fixed;
top: 100px;
left: 100px;
width: 500px;
height: 500px;
background-color: yellow;
}
.box1{
width: 300px;
height: 300px;
background-color: blue;
overflow: scroll;
margin: 10px;
}
</style>
</head>
<body>
<div class="box">
<h1>你好呀</h1>
<div class="box1"></div>
</div>
<script>
const box1 = document.querySelector('.box1')
// 获取宽度和高度 包括这滚动条的大小
// console.log(box1.offsetHeight); // 300
// console.log(box1.offsetWidth); // 300
// 获取当前元素距离 定位了的父元素的大小（找不到定位了的父元素，相对于页面来计算）
console.log(box1.offsetTop);
console.log(box1.offsetLeft);
</script>
</body>
</html>
client 家族
- 获取宽高
- 获取元素的可见部分宽高（不包含边框 ， 滚动条等）
- clientWidth 和 clientHeight
- 获取位置
- 获取左边框和上边框宽度
- clientLeft 和 clientTop
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 300px;
height: 300px;
background-color: yellow;
margin: 50 auto;
overflow: scroll;
border-top: 5px solid #000;
border-left: 2px solid #ccc;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
const box = document.querySelector('.box')
console.log(box.clientHeight); // 不包含滚动条（类似 scrollheight）
console.log(box.clientWidth); // 不包含滚动条 （类似scrollwidth）
// 获取边框的大小
console.log(box.clientTop); // 上边框
console.log(box.clientLeft); // 左边框
// scrollWidth 获取容器的宽度（包含滚动的区域）
// offsetWidth 获取可视区域的宽度（包含滚动条）
// clientWidth 获取可视区域的宽度（不包含滚动条）
// scrollLeft 获取左侧滚动的距离
// offsetLeft 获取和已经定位了的父级元素的左距离
// clientLeft 获取左边框的大小
</script>
</body>
</html>
案例
-
轮播图案例
-
分析：
需求①：小图标鼠标经过事件
鼠标经过小图片，当前高亮，其余兄弟变淡 添加类
需求② ：大图片跟随变化
对应的大图片跟着显示，如果想要过渡效果，可以使用opacity效果，可以利用CSS淡入 淡出的效果，还是添加类
需求③：右侧按钮播放效果
点击右侧按钮，可以自动播放下一张图片
需要一个变化量 index 不断自增
然后播放下一张图片
如果到了最后一张，必须要还原为第1张图片
教你一招： 索引号 = 索引号 % 数组长度 （放到播放前面）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>QQ音乐轮播图</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
li {
list-style: none;
}
.main {
width: 700px;
margin: auto;
background: #000;
}
.slides {
height: 320px;
position: relative;
}
.slides ul li {
/* display: none; */
position: absolute;
top: 0;
left: 0;
opacity: 0;
/* 这里实现淡入淡出的关键 */
transition: all 0.3s;
}
.slides li.active {
/* display: block; */
opacity: 1;
}
.slides .extra {
width: 700px;
height: 53px;
line-height: 53px;
position: absolute;
bottom: 0px;
background-color: rgba(0, 0, 0, 0.8);
z-index: 10;
}
.slides .extra h3 {
width: 82%;
margin: 0;
margin-right: 20px;
padding-left: 20px;
color: #98e404;
font-size: 28px;
float: left;
font-weight: 500;
font-family: "Microsoft Yahei", Tahoma, Geneva;
}
.slides .extra a {
width: 30px;
height: 29px;
display: block;
float: left;
margin-top: 12px;
margin-right: 3px;
background-image: url(./assets/icon_focus_switch.png);
}
.slides .extra .prev {
background-position: 0 0;
}
.slides .extra .prev:hover {
background-position: -30px 0;
}
.slides .extra .next {
background-position: -60px 0;
}
.slides .extra .next:hover {
background-position: -90px 0;
}
.indicator {
padding: 10px 0;
}
.indicator ul {
list-style-type: none;
margin: 0 0 0 4px;
padding: 0;
overflow: hidden;
}
.indicator ul li {
position: relative;
float: left;
width: 60px;
margin: 0 4px 0 5px;
text-align: center;
cursor: pointer;
}
.indicator li img {
display: block;
border: 0;
text-align: center;
width: 60px;
}
.indicator li .mask {
width: 60px;
height: 60px;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.4);
}
.indicator li .border {
display: none;
width: 54px;
position: absolute;
bottom: 0;
left: 0;
z-index: 20;
border: 3px solid #98e404;
}
/* li里面的mask 和 border 刚开始都是显示的 */
/* 我们写一个样式css */
.indicator .active .mask {
display: none;
}
.indicator .active .border {
display: block;
}
</style>
</head>
<body>
<div class="main">
<div class="slides">
<ul>
<li class="active">
<a href="#"
><img src="./assets/b_01.jpg" alt="第1张图的描述信息"
/></a>
</li>
<li>
<a href="#"
><img src="./assets/b_02.jpg" alt="第2张图的描述信息"
/></a>
</li>
<li>
<a href="#"
><img src="./assets/b_03.jpg" alt="第3张图的描述信息"
/></a>
</li>
<li>
<a href="#"
><img src="./assets/b_04.jpg" alt="第4张图的描述信息"
/></a>
</li>
<li>
<a href="#"
><img src="./assets/b_05.jpg" alt="第5张图的描述信息"
/></a>
</li>
<li>
<a href="#"
><img src="./assets/b_06.jpg" alt="第6张图的描述信息"
/></a>
</li>
<li>
<a href="#"
><img src="./assets/b_07.jpg" alt="第7张图的描述信息"
/></a>
</li>
<li>
<a href="#"
><img src="./assets/b_08.jpg" alt="第8张图的描述信息"
/></a>
</li>
<li>
<a href="#"
><img src="./assets/b_09.jpg" alt="第9张图的描述信息"
/></a>
</li>
<li>
<a href="#"
><img src="./assets/b_10.jpg" alt="第9张图的描述信息"
/></a>
</li>
</ul>
<div class="extra">
<h3>第1张图的描述信息</h3>
<a class="prev" href="javascript:;"></a>
<a class="next" href="javascript:;"></a>
</div>
</div>
<div class="indicator">
<ul>
<li class="active">
<img src="assets/s_01.jpg" />
<span class="mask"></span>
<span class="border"></span>
</li>
<li>
<img src="assets/s_02.jpg" />
<span class="mask"></span>
<span class="border"></span>
</li>
<li>
<img src="assets/s_03.jpg" />
<span class="mask"></span>
<span class="border"></span>
</li>
<li>
<img src="assets/s_04.jpg" />
<span class="mask"></span>
<span class="border"></span>
</li>
<li>
<img src="assets/s_05.jpg" />
<span class="mask"></span>
<span class="border"></span>
</li>
<li>
<img src="assets/s_06.jpg" />
<span class="mask"></span>
<span class="border"></span>
</li>
<li>
<img src="assets/s_07.jpg" />
<span class="mask"></span>
<span class="border"></span>
</li>
<li>
<img src="assets/s_08.jpg" />
<span class="mask"></span>
<span class="border"></span>
</li>
<li>
<img src="assets/s_09.jpg" />
<span class="mask"></span>
<span class="border"></span>
</li>
<li>
<img src="assets/s_10.jpg" />
<span class="mask"></span>
<span class="border"></span>
</li>
</ul>
</div>
</div>
<script>
// 获取小图片的li标签
const listt = document.querySelectorAll(".indicator ul li");
// console.log(listt);
// 获取大图对应的li标签
const lis = document.querySelectorAll(".slides ul li");
// 遍历来绑定点击事件
for (let index = 0; index < listt.length; index++) {
listt[index].addEventListener("click", function () {
for (let i = 0; i < lis.length; i++) {
// 把小图的 active 移除掉
listt[i].classList.remove("active");
// 把大图的 active 类 移除掉
lis[i].classList.remove("active");
}
// 给当前点击的li标签对应下标的 小图 添加 active 类
this.classList.add("active");
// 给当前点击的li标签对应下标的大图 添加 active 类
lis[index].classList.add("active");
// 设置标题文字
document.querySelector("h3").innerText = `第${
index + 1
}张图的描述信息`;
});
}
</script>
</body>
</html>
window 对象
BOM
- BOM 是浏览器对象模型
定时器 - 延时函数
- js 内置的一个用来让代码延迟执行的函数， 叫 setTimeout
- setTimeout 仅仅只执行一次，所以可以理解为就是把一段代码延迟执行， 平时省略 window
- 清除延时函数：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 开启延时器
let timi = setTimeout(function () {
console.log('我马上出来');
},5000)
// 关闭延时器
clearTimeout(timi)
</script>
</body>
</html>
延时器案例 - 广告
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 500px;
height: 500px;
background-color: aqua;
margin: 50 auto;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div>
男人秃头怎么办， 请。。。。。。。
</div>
<script>
const div = document.querySelector('div')
setTimeout(function () {
div.style.display = 'none'
console.log('请关闭');
},5000)
</script>
</body>
</html>
递归
- 递归函数就是函数对自身的调用， 是循环运算的一种算法模式
- 递归必须由两部分组成
- 递归调用的过程
- 递归终止的条件：在没有限制的情况下 ， 递归运算会无终止的自身调用 。 因此，在递归运算中要结合 if 语句进行控制， 只有在某个条件成立时才允许执行递归，否则不允许调用自身
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
/*
递归
1 一个函数调用自己
2 使用场景
有一个函数，可以打印出 一个dom元素的所有祖先元素
不可能提前知道 这个a标签有多少个父元素
这个函数接收一个参数，= dom
如果这个dom元素有父元素，就继续调用自己函数
3 使用场景
1 假设你现在得了肺炎 警察叔叔
先找你 -> 找你的邻居（得了肺炎） -> 找你的邻居的邻居（得了肺炎）->找你的邻居的邻居（得了肺炎）...
直到找到一个邻居 没事 警察叔叔 不找结束了
*/
// let index = 0;
// function func() {
// index++;
// console.log(index);
// func();
// }
// func();
const button = document.querySelector('button');
getParent(button);
function getParent(dom) {
console.log(dom);
if (dom.parentNode) {
// 如果有父元素
getParent(dom.parentNode);
} else {
console.log('结束啦');
}
}
</script>
</body>
</html>
小案例
- 使用延时器来实现定时器的功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>16-使用延时器来实现定时器-递归.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
// 定时器 不主动清除，定时器永远执行下去
// 延时器 只会执行一次
// 延时器实现定时器的功能
// 在延时器 又开启一个延时器，
// 递归 自己调用自己 函数自己调用自己
let index=0;
function func() {
console.log(++index);
setTimeout(func,1000);
};
func();
</script>
</body>
</html>
location 对象
- location 的数据类型是对象 ， 他拆分并保存了 URL 地址的各个组成部分
- 常用属性和方法：
- href 属性获取完整的 URL 地址，对其赋值是用于地址的跳转
- search 属性获取地址中携带的参数， 符号？后部分
- hash 属性获取地址中的哈希值 ， 符号 # 后面部分
- reload 方法用来刷新当前页面， 传入参数 true 时表示强制刷新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<button>我马上出来</button>
<script>
// 使用a标签 href 属性 可以实现页面跳转
// 在js中 ，也可以直接跳转 location.href 来跳转
// location.href 也可以实现刷新 location.href = location.href
// search 后一个阶段会用到它 了 获取url上 ？ 后面一串字符
// hash 学习到了vue阶段就会用到了 获取# 后面一串字符
const button = document.querySelector("button");
button.addEventListener("click", function () {
// location.href = "http://www.baidu.com"
// console.log(location.href); //file:///G:/%E5%B0%B1%E4%B8%9A%E7%8F%AD/02-webAPI%E5%AD%A6%E4%B9%A0/day%2005/12-location%E7%9A%84%E4%BD%BF%E7%94%A8.html
// 刷新功能
// location.href = location.href; // 刷新功能
// reload 实现刷新
// location.reload(true); // 刷新功能
console.log(location.hash);
});
// 延时出来
setTimeout(function () {
// location.href = "http://www.baidu.com";
},5000);
</script>
</body>
</html>
navigator对象
- navigator 的数据类型是对象 ，该对象下记录了浏览器自身的相关信息
- 常见属性和方法
- 通过 userAqent 检测浏览器的版本及平台
histroy对象
- history 的数据类型是对象，该对象与浏览器地址栏的操作相对应，如前进 、 后退 、历史记录等
- 常见属性和方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="./02-页面加载事件的作用.html">xxxx</a>
<button class="xxx">前进</button>
<button class="zzz">后退</button>
<script>
const xxx = document.querySelector('.xxx')
xxx.addEventListener('click',function () {
// history.forward() // 前进
history.go(1) // 前进一个
})
const zzz = document.querySelector('.zzz')
zzz.addEventListener('click',function () {
history.back() // 后退
history.go(-1)
})
</script>
</body>
</html>
