JS（API）
变量声明（let const）
const优先，尽量使用const，原因是：
1.const语义更好
2.很多变量我们声明的时候就知道他不会被更改了，那为什么不用const？
3.实际开发中也是，比如react框架，基本const
const生命的值不能更改而且const声明变量的时候需要里面进行初始化
对于引用数据类型，const声明的变量，里面存的不是值是地址
所以用const声明对象可以修改里面的属性
API基本认识
作用和分类
作用：就是使用JS去操作html和浏览器
分类：DOM（文档对象模拟），BOM（浏览器对象模型）
什么是DOM
是用来呈现以及与任意HTML或XML文档交互的API（DOM是浏览器提供的一套专门用来操作网页内容的功能）
作用：开发网页内容特效和实现用户交互
DOM树
将HTML文档以树状结构直观的表现出来，我们称之为文档树或DOM树
描述网页内容关系的名词
作用：文档树直观的体现了标签与标签之间的关系
DOM对象
浏览器根据html标签生成的JS对象（任何标签都是js的对象）（修改这个对象的属性会自动映射到标签身上）
DOM的核心思想
把网页内容当做对象来处理
document对象
1.是DOM里提供的一个对象
2.所以他提供的属性和方法都是用来访问和操作网页内容的
3.网页所有内容都在document里面
获取DOM对象
根据CSS选择器来获取DOM元素
查找元素DOM元素就是利用js选择页面中标签元素
选择匹配的第一个元素
1.语法
document.querySelector('css选择器')
2.参数
包含一个或多个有效的CSS选择器字符串
3.返回值
CSS选择器匹配的第一个元素，一个HTMLElement对象 <div class = "box">123</div>
<div id = "box">123</div>
<ul>
<li>数据一</li>
<li>数据二</li>
<li>数据三</li>
<li>数据四</li>
</ul>
1.关键字
const box =document.querySelector('div')
2.类（class）
const box =document.querySelector('.box')
3.id
const box =document.querySelector('#box')
4.获取第一个li
const li =document.querySelector('ul li:first-child')获取一个DOM元素我们使用.querySelector（），可以直接操作修改
box.style（属性）.color = "red"（属性值）选择匹配的多个元素
1.语法
document.querySelector('css选择器')
2.参数
包含一个或多个有效的CSS选择器字符串
3.返回值
CSS选择器匹配的NodeList对象集合
4.例子
document.querySelectorAll('ul li'）获取多个DOM元素我们使用.querySelectorAll（），不可以直接操作修改，只能通过遍历的方式一次给里面的元素做修改
因为他的返回值是一个伪数组
1.有长度有索引号的数组
2.但是没有pop（），push（）等数组方法
想得到里面的每一个对象，则需要遍历（for）的方法获得
注意：哪怕只有一个元素，通过querySelectorAll（）获取过来的也是一个伪数组，里面只有一个元素e而已
其他获取DOM元素方法
1.根据id获取一个元素
document.getElementById('nav')
2.根据标签获取一类元素 获取页面 所有div
document.getElementByTagName('div')
3.根据 类名获取元素 获取页面 所有类名为
document.getElementClassName('w')操作元素内容
1.DOM对像都是根据标签生成的，所以操作标签，本质上就是操作DOM对象
2.就是操作对象使用的点语法
3.如果想要修改标签元素的里面的内容，则可以使用如下几种方式：
对象.innerText 属性
将文本内容添加/更新到任意标签位置
显示纯文本，不解析标签
<div class = "box"> 我是文字内容</div>
<script>
1.获取元素
const box = document.querySelector('.box')
2.修改文字内容
box.innerText = '我是一个盒子'
3.不解析标签
box.innerText = <strong>'我是一个盒子'</strong>——不会显示加粗的文字内容，因为innerText不解析标签
</script>对象.innerHTML 属性
将文本内容添加/更新到任意标签位置
会解析标签，多标签建议使用模板字符
console.log(box.innerHTML)//我是文字内容
1.更换文字内容
box.innerHTML = '我是一个盒子'
//我是一个盒子
2.解析标签去修改文字内容
box.innerHTML = <strong>'我是一个盒子'</strong>//加粗版的我是一个盒子操作元素属性
操作元素常用属性
还可以通过js设置/修改标签元素属性，比如通过src更换图片
最常见的属性比如：href，title，stc等
1.语法
对象.属性 = 值
1.获取元素
const pic = document.querySelector ('img')
2.操作元素
pic.src = './adkfafkka.jpg'
pic.title = '丘珊珊'操作元素样式属性
还可以通过js设置修改标签元素的样式属性。
1.比如通过轮播图小圆点自动更换颜色样式
2.点击按钮可以滚动图片，这是移动的图片的位置left等等
学习路劲：
1.通过style属性操作CSS
语法
对象.style.样式属性 = '值'
1.获取元素
const box = document.querySelector('.box')
2.修改样式属性 对象.style.样式属性 = '值'（别忘了跟单位）
box.style.width = '300px'
3.多组单词的采取——小驼峰命名法
box.style.backgroundColor = 'hotpink'修改样式通过style属性引出
如果属性有-连接符，需要转换为小驼峰命名法
赋值的时候，需要的时候不要忘记加CSS单位
2.操作类名（className）操作CSS
如果修改的样式比较多 ，直接通过style属性修改比较繁琐，我们可以通过借助于CSS类名的形式（给元素加一个类名）
语法
元素.className = 'active'//active是一个CSS类名
====>
<div class = "nav"></div>
div.className = 'box'
====>约等于
<div class = "box"></div>
====>
新值变旧值，把原来的类覆盖掉注意:
1.由于class是关键字，所以使用className去代替
2.className是使用新值换旧值，如果需要添加一个类，需要保留之前的类名
3.通过classList操作类控制CSS
为了解决className容易覆盖以前的类名，我们可以通过class List方式追加和删除类名
语法
1.追加一个类
元素.classList.add('类名')
2.删除一个类
元素.classList.remove('类名')
3.切换一个类(有就删掉，无就加上)
元素.classList.toggle('类名')轮播图的代码（初级版）
<body>
<div class="slider">
<div class="slider-wrapper">
<img src="img/1.jpg" alt="" />
</div>
<div class="slider-footer">
<p>对人类来说会不会太超前了？</p>
<ul class="slider-indicator">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="toggle">
<button class="prev"><</button>
<button class="next">></button>
</div>
</div>
</div>
<script>
// 1. 初始数据
const sliderData = [
{ url: 'img/1.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },
{ url: 'img/2.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },
{ url: 'img/3.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },
{ url: 'img/1.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },
{ url: 'img/2.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
{ url: 'img/3.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
{ url: 'img/1.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },
{ url: 'img/2.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },
]
function getrandom(n, m) { //取得n~m的随机函数
return Math.floor(Math.random() * (m - n + 1)) + n
}
//1、得到一个随机数
const random = Math.floor(Math.random() * sliderData.length)
//2、把对应数据渲染到标签里面
//2.1 获取图片
const img = document.querySelector('.slider-wrapper img')
//2.2 修改图片路径
img.src = sliderData[random].url
const p = document.querySelector('.slider-footer p')
p.innerHTML = sliderData[random].title
const footer = document.querySelector('.slider-footer')
footer.style.backgroundColor = sliderData[random].color
//小圆点
const li = document.querySelector(`.slider-indicator li:nth-child(${random + 1})`)
li.className = 'active'
</script>
</body>操作表单元素属性
表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质把表单类型转换为文本框
正常的有属性有取值的，跟其他的标签属性没有任何区别
语法
获取：DOM对象.属性名
设置：DOM对象。属性名 = 新值
表单.value = '用户名'
表单.type = 'password'<input type = "text" value = "电脑">
1.获取元素
const uname = document.querySelector('input')
2.获取值 获取表单里面的值 用的 表单.value
console.log(uname.value)
3.修改表单里的内容
uname.value= '我要买电脑'
4.修改表单的样式
uname.type='password'
//是的表单的样式从文本框变成密码框表单属性中添加就有效果，移除就没有效果，一律使用布尔值表示，如果为true代表添加了该属性，如果是false代表移除了该属性
disabled
checked
selected
把它的值改变可以禁用和允许表单的使用
自定义属性
标准属性：标签天生自带的属性 比如class id title等，可以直接使用点语法操作比如：disabled，checked，selected
自定义属性
1.在html5中推出来了专门的data-自定义属性
2.在标签上一律以data-开头
3.在DOM对象上一律以dataset对象方式获取
<body>
<div class = "box" data-id = "10"></div>
<script>
const box = document.querySelector('.box')
console.log(box.dataset.id)
</script>
</body>定时器——间歇函数
网页中经常会需要一种功能：每隔一段时间需要自动执行一段代码，不需要我们手动去触发，例如：网页中的倒计时（要实现这种需求，需要定时器函数）
定时器函数有两种：1.间歇函数
间歇函数的使用
1.开启定时器
setInterval（函数名，间隔时间）
作用：每隔一段时间调用这个函数
间隔时间单位是毫秒（1秒=1000毫秒）
写函数名不加小括号
2.关闭定时器
let 变量名 = setInterval（函数名，间隔时间）（创建）
clearInterval（变量名）
轮播图——定时器版
<body>
<div class="slider">
<div class="slider-wrapper">
<img src="./images/slider01.jpg" alt="" />
</div>
<div class="slider-footer">
<p>对人类来说会不会太超前了？</p>
<ul class="slider-indicator">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="toggle">
<button class="prev"><</button>
<button class="next">></button>
</div>
</div>
</div>
<script>
// 1. 初始数据
const sliderData = [
{ url: './images/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },
{ url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },
{ url: './images/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },
{ url: './images/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },
{ url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
{ url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
{ url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },
{ url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },
]
//开始定时器
let i = 0
setInterval(function () {
//2 获取图片对象
const img = document.querySelector('.slider-wrapper img')
// 修改对象的src属性 图片对象的src属性 === 数组随机对象中的url属性
img.src = sliderData[i].url
//3 获取p对象
const p = document.querySelector('.slider-footer p')
p.innerHTML = sliderData[i].title
//4 获取li对象，并移除其他的active属性（循环方式）
// const list = document.querySelectorAll(`.slider-indicator li`)
// for(let i = 0;i<list.length;i++){
// list[i].classList.remove('active')
// }
//排他思想的方式
document.querySelector('.slider-indicator .active').classList.remove('active')
const li = document.querySelector(`.slider-indicator li:nth-child(${i + 1})`)
li.classList.add('active')
i++
console.log(i)
if(i === 8){
//如果i=8时（最后一张图片），将i重置为0
i = 0
}
}, 1500)
</script>
</body>
————————————————
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/weixin_45533131/article/details/135642330事件监听
什么是事件
事件是在编程是系统内发生的动作或者发生的事情，比如用户在网页上单击一个按钮
什么是事件监听
就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为绑定事件或者注册事件，比如鼠标经过显示下拉菜单，比如点击可以播放轮播图等等
语法：元素对象.addEventListener（'事件类型'，要执行的函数）
事件监听三要素：
1.事件源：那个dom元素被事件触发了，要获取dom元素
2.事件类型：用什么方式触发，比如鼠标单击click，鼠标经过mouse over等
3.事件调用的函数：要做什么事
事件类型
1.鼠标事件
cilck 鼠标点击
mouseenter 鼠标经过
mouseleave 鼠标离开
2.焦点事件（表单获得光标）
focus 获得焦点
blur 失去焦点
3.键盘事件
keydown 键盘按下触发
keyup 键盘抬起触发
4.文本事件（表单输入触发）
input 用户输入事件
事件对象
事件对象：也是一个对象，这个对象里有时间触发时的相关信息（例如鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息）
使用场景:可以判断用户按下哪个键（比如按下回车键可以发布新闻）
可以判断鼠标点击了哪个元素，从而做相应的操作
语法：
元素.addEventListener('click',function(e){})
1.在事件绑定的回调函数的第一个参数就是事件对象
2.一般命名为event，ev，e事件对象常用属性
type:获取当前的事件类型
clientX/clientY：获取光标相对于浏览器可见窗口左上角的位置
offsetX/offsetY：获取光标相对于当前DOM元素左上角的位置
key：用户按下的键盘键的值，现在不提倡使用keyCode
环境对象
指的是函数内部特殊的变量this，它代表这当前函数运行时所在的环境
（弄清楚this的指向，可以让我们代码更简洁）
1.函数的调用方式不同，this指代的对象也不同【谁调用，this就是谁】是判断this指向的初略规则
普通函数------指向window
事件监听------指向调用者
箭头函数------没有this
回调函数
如果将函数A作为参数传递给函数B时，我们称为A为回调函数
（简单理解：当一个函数当做参数来传递给另外一个函数的时候这个函数就是回调函数）
常用场景：
function fn（）{
console.log（'我是回调函数。。。'）
}
//fn传递给setInterval，fn就是回调函数
setInterval（fn，1000 ）1.把函数当作另一个函数的参数传递，这个函数就叫回调函数
2.回调函数本质还是函数，只不过把它当成参数使用
3.使用匿名函数作为回调函数比较常见
事件流
事件流与两个阶段说明
事件流指的是事件完整执行过程中的流动路径，假设页面里有个div，当触发事件时，会经历两个阶段，分别时捕获阶段，冒泡阶段。
实际工作都是使用事件冒泡为主。
1.事件捕获
（捕获阶段）：从父到子
概念：
从DOM的根元素开始去执行对应的事件（从外到里）
事件捕获需要写对应代码才能看到效果
代码：
DOM.addEventListener（事件类型，事件处理函数，是否使用捕获机制）说明：
1.addEventListener第三个参数传入true代表是捕获阶段触发（很少使用）
2.若传入false代表冒泡阶段触发，默认就是false
3.若是用L0事件监听，则只有冒泡阶段，没有捕获
<body>
<div class = "father">
<div class = "son></div>
</div>
<script>
const fa = document.querySelector('.father')
const son = document.querySelector('.son')
ducument.addEventListener('click',function(){alert('我是爷爷')}，true)
fa.addEventListener('click',function(){alert('我是爸爸')}，true)
son.addEventListener('click',function(){alert('我是儿子')},true)
</script>
</body>2.事件冒泡
概念：
当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡（当一个元素触发事件后，会依次向上调用所有父级元素的同名事件）
事件冒泡时默认存在的
L2事件监听第三个参数时false，或者默认都是冒泡
<body>
<div class = "father">
<div class = "son></div>
</div>
<script>
const fa = document.querySelector('.father')
const son = document.querySelector('.son')
ducument.addEventListener('click',function(){alert('我是爷爷')}，true)
fa.addEventListener('click',function(){alert('我是爸爸')}，true)
son.addEventListener('click',function(){alert('我是儿子')},true)
</script>
</body>3.阻止冒泡
1.因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素，若想把事件就限制在当前元素内，就需要阻止事件冒泡，阻止事件冒泡需要拿到事件对象
语法：
事件对象.stopPropagation()
//此方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效2.我们在某些情况下需要阻止默认行为的发生，比如阻止链接的跳转，表单域跳转
语法：
e.preventDefault()
例子：
<form action = "http://www.baidu.com">
<input type = "submit" value = "提交">
</form>
<script>
const form = document.querySelector('form')
form.addEventDeListener('click'),function(e){
e.preventDefault()
}
</script>4.解绑事件
L0 事件移除解绑
const btn = document.querySelector('button')
btn.onclick = function () {
alert('点击了')
btn.onclick = null
}L2 事件移除绑定
const btn = document.querySelector('button')
function fn (){
alert('点击了')
}
btn.addEventListener('click',fn)
btn.removeEventListener('click',fn)鼠标经过事件的区别
mouseover和mouseout会有冒泡效果
mouseenter和mouseleave没有冒泡效果（推荐）
两种注册事件的区别
传统on注册（L0）
1.同一个对象，后面注册的事件会覆盖前面注册（同一个事件）
2.直接使用null覆盖偶就可以实现事件的解绑
3.都是冒泡阶段执行的
事件监听注册（L2）
1.语法：DOM.addEventListener（事件类型，事件处理函数，是否使用捕获机制）
2.后面注册的事件不会覆盖前面注册的事件（同一个事件）
3.可以通过第三个参数去确定是在冒泡或者捕获阶段执行
4.必须使用removeEventListener（事件类型，事件处理函数，获取捕获或者冒泡阶段）
5.匿名函数无法被解绑
事件委托
事件委托是利用事件流的特征解决一些开发需求的知识技巧
优点：减少注册次数，可以提高程序性能
原理：事件委托其实就是利用事件冒泡的特点
给父元素注册事件当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事件
const ul = document.querySelector('ul')
ul.addEventListener('click',function(e){
if(e.target.tagName=== ''LI)
{
this.style.color = 'pink'
}
})其他事件
1.页面加载事件
加载外部资源（如图片，外联CSS和js等）加载完毕时触发的事件
为什么要学：有些时候需要等页面资源全部处理完了做一些事情，老代码喜欢把script写在head中，这时候这直接找dom元素找不到
（1）事件名：load
监听页面所有资源（给window加）加载完毕：
window.addEventListener('load',function(){
//执行操作
})注意：不光可以监听整个页面资源加载完毕，也可以针对某个领域绑定load事件
（2）事件名：DOMContentLoaded
给document加
当初是的HTML文档被完全加载和解析完成之后，DOMContentLoaded事件被触发，而无需等待样式表，图像等完全加载
2.元素滚动事件
滚动条在滚动的时候持续触发的事件
为什么要学：很多网页需要检测用户把页面滚动到某个区域后做一些处理，比如固定导航栏，比如返回顶部
事件名：scroll
监听整个页面的滚动
window.addEventListener('scroll',function(){
//执行操作
})给window或document加都可以
1.scrollLeft（属性）
2.scrollTop（属性）
以上两个属性，可以获取被卷去的大小，获取元素内容往左，往上滚出去看不到的距离，这两个值都是可读写的。
3.scrollTo()方法可把内容滚动到指定的坐标
语法：
元素.scrollTo（x,y）
例子：
window.scrollTo(0,1000)
//让页面滚动到y轴1000像素的位置获取位置——我们可以检测页面滚动的距离，比如页面滚动100px就可以显示一个元素，或者固定一个元素
window.addEventListener('svroll',function(){
const n = document.documentElement.scrollTop
console.log(n)
})
//document.documentElement
HTML文档返回对象为 HTML元素3.页面尺寸事件
会在窗口尺寸改变尺寸的时候触发事件
事件名：resize
window.addEventListener('resize',function(){
//执行操作
})window.addEventListener('load',function(){
let w = document.documentElement.clientWidth
console.log(w)
})
//clientWidth获取元素宽高获取元素宽高
获取元素的可见部分宽高（不包含边框，margin，滚动条等）
1.clientWidth
2.clientHeight
元素尺寸与位置
使用场景：前面案例滚动多少距离，都是我们自己算的，最好是页面滚动到某个元素，就可以做某些事，简单来说就是通过技术方式得到元素在页面中的位置，这样我们可以做，页面滚动到这个位置，就可以做某些操作，省去计算了
尺寸
获取宽高——（内容 + padding + border）
1.获取元素的自身宽高，包含元素自身设置的宽高，padding，border
2.offsetWidth和offsetHeight
3.获取出来的是数值，方便计算
4.注意：获取的是可是宽高，如果盒子是隐藏的，获取的结果是0；
获取位置
1.获取元素距离自己定位父级元素的左，上距离
2.offsetLeft和offsetTop（注意是只读属性）
！！！获取元素距离自己定位父级元素的左、上距离，如果都没有则以文档左上角为准。
例题一：
<body>
<div class="header">我是顶部导航栏</div>
<div class="content">
<div class="sk">秒杀模块</div>
</div>
<div class="backtop">
<img src="./images/close2.png" alt="">
<a href="javascript:;"></a>
</div>
<script>
const sk = document.querySelector('.sk')
const header = document.querySelector('.header')
// 页面滚动事件
window.addEventListener('scroll', function () {
// 当页面滚动到 秒杀模块的时候，就改变 头部的 top值
// 页面被卷去的头部 >= 秒杀模块的位置 offsetTop
const n = document.documentElement.scrollTop
header.style.top = n >= sk.offsetTop ? 0 : '-80px'
})
</script>
</body>
例题二：
<script>
// 1. 事件委托的方法 获取父元素 tabs-list
const list = document.querySelector('.tabs-list')
const line = document.querySelector('.line')
// 2. 注册点击事件
list.addEventListener('click', function (e) {
// 只有点击了A 才有触发效果
if (e.target.tagName === 'A') {
// 得到当前点击元素的位置
// console.log(e.target.offsetLeft)
// 把我们点击的a链接盒子的位置 然后移动
line.style.transform = `translateX(${e.target.offsetLeft}px)`
}
})
</script>
3.element.getBoundingClientRect()
方法返回元素的大小及其相对于视口的位置
时间对象
1.日期对象：用来表示时间的对象
2.作用：可以得到当前系统时间
实例化：
1.在代码中发现了 new 关键字时，一般将这个操作称为实例化
2.创建一个时间对象并获取时间
语法：
const date = new Date()
例子：
const date = new Date('2023-5-25')//获得指定时间
const date = new Date()//得到当前时间日期对象的方法
使用场景：因为日期对象返回的数据我们不能直接使用，所以需要转换为实际开发中常用的格式
1.getFullYear()——获得四位数的年份
2.getMonth()——获得月份（0~11）
3.getDate()——获取月份中的每一天
4.getDay()——获取星期（0~6）
5getHours()——获取小时（0~23）
6.getMinutes()——获取分钟（0~59）
7.getSeconds()——获取秒（0~59）
例子：
<body>
<div></div>
<script>
const div = document.querySelector('div')
function getMyDate() {
const date = new Date()
let h = date.getHours()
let m = date.getMinutes()
let s = date.getSeconds()
h = h < 10 ? '0' + h : h
m = m < 10 ? '0' + m : m
s = s < 10 ? '0' + s : s
return `今天是: ${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}号 ${h}:${m}:${s}`
}
div.innerHTML = getMyDate()
setInterval(function () {
div.innerHTML = getMyDate()
}, 1000)
</script>
</body>
时间戳
使用场景：
如果计算倒计时效果，前面方法无法直接计算，需要借助于时间戳完成
时间戳是什么
时间戳：是指1970年01月01日00时00分00秒起至现在的
毫秒数
算法：
将来的时间戳 - 现在的时间戳 = 剩余时间毫秒数
剩余时间毫秒数 转换为 剩余时间的 年月日时分秒 就是 倒计时时间
比如：将来时间戳 2000ms - 现在时间戳 1000ms = 1000ms，1000ms 转换为就是 0小时0分1秒
三种方式获取时间戳
1.使用getTime（）方法
const date = new Date()
console.log(date.getTime())
2.简写+new Date（）
console.log(+new Date())
3.使用Date.now（）
console.log(Date.now())
第三个办法无需实例化，但是只能得到当前的时间戳，而前面两种可以返回指定时间的时间戳
倒计时案例：
<script>
// 函数封装 getCountTime
function getCountTime() {
// 1. 得到当前的时间戳
const now = +new Date()
// 2. 得到将来的时间戳
const last = +new Date('2022-4-1 18:30:00')
// console.log(now, last)
// 3. 得到剩余的时间戳 count 记得转换为 秒数
const count = (last - now) / 1000
// console.log(count)
// 4. 转换为时分秒
// h = parseInt(总秒数 / 60 / 60 % 24) // 计算小时
// m = parseInt(总秒数 / 60 % 60) // 计算分数
// s = parseInt(总秒数 % 60) // 计算当前秒数
// let d = parseInt(count / 60 / 60 / 24) // 计算当前天数
let h = parseInt(count / 60 / 60 % 24)
h = h < 10 ? '0' + h : h
let m = parseInt(count / 60 % 60)
m = m < 10 ? '0' + m : m
let s = parseInt(count % 60)
s = s < 10 ? '0' + s : s
console.log(h, m, s)
// 把时分秒写到对应的盒子里面
document.querySelector('#hour').innerHTML = h
document.querySelector('#minutes').innerHTML = m
document.querySelector('#scond').innerHTML = s
}
// 先调用一次
getCountTime()
// 开启定时器
setInterval(getCountTime, 1000)
</script>
节点操作
1.DOM节点
DOM树里每一个内容都称之为节点
节点类型
1.元素节点
所有标签比如body，div
html是根节点
2.属性节点
所有的属性比如href，class
3.文本节点
所有文本（比如标签里面的文字）
4.其他
2.查找节点
节点关系：针对的找亲戚返回的都是对象
1.父节点
parentNode属性，返回最近一级的父节点 找不到返回为 null
语法：子元素.parentNode
const baby=document.querySelector（'.baby'）
console.log(baby)//返回div.baby
console.log(baby.parentNode)//返回div.dad2.子节点
childNodes属性，获得所有子节点、包括文本节点（空格、换行）、注释节点等
children 属性（重点）仅获得所有元素节点，返回的还是一个伪数组，
语法：父元素.children
3.兄弟节点
下一个兄弟节点：
nextElementSibling
属性上一个兄弟节点：
previousElementSibling
属性
3.增加节点
很多情况下，我们需要在页面中增加元素（比如：点击发布按钮，可以新增一条信息）
一般情况下，我们新增节点，按照如下操作：
1.创建一个新的节点
2.把创建的新的节点放入到指定的元素内部
1.创建节点
创造出与新的网页元素，再添加到网页内，一般先创建节点，然后插入节点
创捷元素节点方法：
document.createElement('标签名')
2.追加节点
要想在界面看到，还得插入到某个父元素中
插入到父元素的最后一个子元素
父元素.appendChild（要插入的元素）插入到父元素中某个子元素的前面
父元素.insertBefore(要插入的元素,在哪个元素前面)克隆节点：
元素.cloneNode(布尔值)特殊情况下我们新增节点按如下操作： 复制一个原有的节点，把复制的节点放到指定的元素内部
cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值。
若为true，则克隆时会包含后代节点一起克隆。若为false(默认)，则克隆时不包含后代节点。
4.删除节点
在 JavaScript 原生 DOM 操作中，要删除元素必须通过父元素删除。
语法：
父元素.removeChlid(子元素)！！如不存在父子关系则删除不成功
删除节点和隐藏节点（display:none） 是有区别的：
隐藏节点还是存在的，但是删除，则从html中删除节点
M端事件
移动端也有自己独特的地方。
比如：触屏事件 touch（也称触摸事件），Android 和 IOS 都有
touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作。
常见的触屏事件如下：
touchstart——手指触摸到一个DOM元素时触发
touchmove——手指在一个DOM元素上滑动时触发
touchend——手指从一个DOM元素上移开时触发
JS插件
插件: 就是别人写好的一些代码,我们只需要复制对应的代码,就可以直接实现对应的效果
学习插件的基本过程
熟悉官网，了解这个插件可以完成什么需求 https://www.swiper.com.cn/
看在线演示，找到符合自己需求的demo https://www.swiper.com.cn/demo/index.html
查看基本使用流程 https://www.swiper.com.cn/usage/index.html
查看APi文档，去配置自己的插件 https://www.swiper.com.cn/api/index.html
注意：多个swiper同时使用的时候， 类名需要注意区分
重绘和回流
浏览器是如何进行界面渲染的？
a.解析（Parser）HTML，生成DOM树(DOM Tree)
b.同时解析（Parser） CSS，生成样式规则 (Style Rules)
c.根据DOM树和样式规则，生成渲染树(Render Tree)
d.进行布局 Layout(回流/重排):根据生成的渲染树，得到节点的几何信息（位置，大小）
e.进行绘制 Painting(重绘): 根据计算和获取的信息进行整个页面的绘制
f.Display: 展示在页面上
回流(重排)
当 Render Tree 中部分或者全部元素的尺寸、结构、布局等发生改变时，浏览器就会重新渲染部分或全部文档的过程称为回流。
重绘
由于节点(元素)的样式的改变并不影响它在文档流中的位置和文档布局时(比如：color、background-color、outline等)，称为重绘。
重绘不一定引起回流，而回流一定会引起重绘。
windom对象
BOM
1.BOM浏览器对象模型
2.window对象是一个全局对象，也可以说js中的顶级对象
3.像document，alert（），console.log（）这些都是window的属性，基本BOM的属性和方法都是window的
4.所有通过var定义在全局作用域中的变量，函数都会变成window对象的属性和方法
5.window对象下的属性和方法调用的时候可以省略window
定时器——延时函数
js内置的一个用来让代码延迟执行的函数叫setTimeout
语法：
setTimeout（回调函数，等待的毫秒数）setTimeout仅仅只执行一次，所以可以理解为就是一段代码延迟执行，平时省略window
清除延时函数：
let timer = setTimeout(回调函数，等待的毫秒数)
clearTimeout（timer）注意点：
1.延时器需要等待，所以后面的代码先执行
2.每一次调用延时器都会产生一个新的延时器