日期对象
事件对象在前端开发里经常用来表示日期：
可以获取当前系统的时间
实例化
使用new关键字来实例化一个对象：
const date = new Date()console.log(date);获取当前时间
const date = new Date('2008-8-8')console.log(date);获取指定时间
写得越详细获得更详细的时间
const date = new Date('2008-8-8 08:30:00')
获取指定日期的用途一般是用在倒计时的情况
日期对象及方法
但是这种写法明显不适合普通人类使用，日期对象返回的数据我们不能直接使用，所以需要转换为实际开发中常用的格式：
上面介绍的全是方法，而方法是属于对象的，什么对象呢？当然是你实例化的日期对象！
const date = new Date()console.log(date.getMonth());现在是一月，但是getMonth显示的是0，因为月份的取值为0-11，0就表示1月；
在实际用的时候要+1
console.log(date.getMonth()+1)天数就不一样，表示的范围是一周七天内的天数，数字显示的范围为0-6，0指的是星期天，在洋人那里把周天看作一周的第一天，所以0是周天、1是周一......以此类推，天数的日期是正确的
来自己写一个获取系统时间的函数：
<!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>div {width: 300px;height: 40px;border: 1px solid pink;text-align: center;line-height: 40px;}</style>
</head><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 : hm = m < 10 ? '0' + m : ms = s < 10 ? '0' + s : sreturn `今天是${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日${h}时${m}分${s}秒`}div.innerHTML = getMyDate()setInterval(function () {div.innerHTML = getMyDate()}, 1000)</script>
</body></html>
也可以使用系统自带的格式化：
const div = document.querySelector('div')const date = new Date()div.innerHTML = date.toLocaleString()setInterval(function () {const date = new Date()div.innerHTML = date.toLocaleString()}, 1000)
一定要记得实例化
时间戳
应用场景：计算倒计时，前面的方法无法直接计算
时间戳: 是指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式
相当于每个时间都是独一无二的
Ø 将来的时间戳 - 现在的时间戳 = 剩余时间毫秒数Ø 剩余时间毫秒数 转换为 剩余时间的 年月日时分秒 就是 倒计时时间比如 将来时间戳 2000ms - 现在时间戳 1000ms = 1000ms1000ms 转换为就是 0小时0分1秒
获取时间戳的方法有三种：
1、使用getTime()方法，可以返回指定时间的时间戳
2、简写，使用隐式转换+new Date()，可以返回指定时间的时间戳
3、使用Date.now()此方法无须实例化，但是只能得到当前时间的时间戳
倒计时案例制作：计算我开学还有多久......
<!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>.countdown {width: 240px;height: 305px;text-align: center;line-height: 1;color: #fff;background-color: brown;/* background-size: 240px; *//* float: left; */overflow: hidden;}.countdown .next {font-size: 16px;margin: 25px 0 14px;}.countdown .title {font-size: 33px;}.countdown .tips {margin-top: 60px;font-size: 23px;}.countdown small {font-size: 17px;}.countdown .clock {width: 142px;margin: 18px auto 0;overflow: hidden;}.countdown .clock span,.countdown .clock i {display: block;text-align: center;line-height: 34px;font-size: 23px;float: left;}.countdown .clock span {width: 40px;height: 34px;border-radius: 2px;background-color: #303430;}.countdown .clock i {width: 20px;font-style: normal;}</style>
</head><body><div class="countdown"><p class="next">今天是年月日</p><p class="title">开学倒计时</p><p class="clock"><span id="day">00</span><i>天</i><span id="hour">00</span><i>时</i><span id="minutes">25</span><i>分</i><span id="second">20</span><i>秒</i></p><p class="tips">2月23日00:00:00开学</p></div><script>// 随机颜色函数// 1. 自定义一个随机颜色函数function getRandomColor(flag = true) {if (flag) {// 3. 如果是true 则返回 #fffffflet str = '#'let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']// 利用for循环随机抽6次 累加到 str里面for (let i = 1; i <= 6; i++) {// 每次要随机从数组里面抽取一个 // random 是数组的索引号 是随机的let random = Math.floor(Math.random() * arr.length)// str = str + arr[random]str += arr[random]}return str} else {// 4. 否则是 false 则返回 rgb(255,255,255)let r = Math.floor(Math.random() * 256) // 55let g = Math.floor(Math.random() * 256) // 89let b = Math.floor(Math.random() * 256) // 255return `rgb(${r},${g},${b})`}}// 页面刷新随机得到颜色const countdown = document.querySelector('.countdown')countdown.style.backgroundColor = getRandomColor()// 函数封装 getCountTimefunction getCountTime() {const last = +new Date('2025-2-23 00:00:00')const now = +new Date()console.log(now, last);const count = parseInt(last - now) / 1000let d = parseInt(count / 60 / 60 / 24); // 计算天数let h = parseInt(count / 60 / 60 % 24) // 计算小时let m = parseInt(count / 60 % 60); // 计算分数let s = parseInt(count % 60); // 计算当前秒数h = h < 10 ? '0' + h : hm = m < 10 ? '0' + m : ms = s < 10 ? '0' + s : sconsole.log(h, m, s)const nowTime = new Date()const year = nowTime.getFullYear()const month = nowTime.getMonth() + 1const date = nowTime.getDate()// 5. 把时分秒写到对应的盒子里面document.querySelector('#day').innerHTML = ddocument.querySelector('#hour').innerHTML = hdocument.querySelector('#minutes').innerHTML = mdocument.querySelector('#second').innerHTML = sdocument.querySelector('.next').innerHTML = `今天是${year}年${month}月${date}日`}// 先调用一次getCountTime()// 开启定时器setInterval(getCountTime, 1000)</script>
</body></html>
节点操作
节点简介
学过树的孩子们都知道，树是有一个个节点的，dom树也是如此
元素节点：比较重要，在后期在增删改查里，主要指的是元素节点，也就是所有的标签
比如body、 div，html 是根节点
属性节点：所有的属性，比如a标签的href
文本节点：所有的文本
其他......
节点的增删改查
这里的增删改查是根据节点之间的关系进行增删改查，比如html是head的父节点，在已知head标签的时候就可以通过父子关系查找到html标签
查找结点
eg:
节点关系分为三种：父节点、子节点、兄弟节点
父节点
访问最近一级父节点：parentNode 属性
const baby=document.querySelector('.baby')console.log(baby)//返回dom对象console.log(baby.parentNode)//返回的也是dom对象
如果想获取爷节点：
console.log(baby.parentNode.parentNode)//返回的是爷爷（爸爸的爸爸叫爷爷）
对于点击关闭按钮就可以关闭广告的这个功能来说，外面就可以不用再单独获取父节点的对象了
原来的代码：
学会查找父节点以后：
子节点
childNodes属性获取子节点
获得所有子节点、包括文本节点（空格、换行）、注释节点等
children 属性 （重点）
仅获得所有元素节点
返回的还是一个伪数组
展开可以查看详细信息：
在选择的时候其实只选择了直系亲儿子，但是亲儿子里的内容也一并被拿过来了
对简化代码很有帮助
兄弟节点
下一个兄弟节点 nextElementSibling 属性
先前一个兄弟节点 previousElementSibling 属性
const baby1=document.querySelector('.baby1')console.log(baby1.previousElementSibling)console.log(baby1.nextElementSibling)
以此类推也可以拿到下下一个节点，做某些上一页、下一页的时候会用到
同样，返回的都是对象
增加结点
dom树里本来没有，但是通过js添加的节点,适合临时启用的dom对象
eg:
创建节点
创建节点只代表创建出来了，真正想在界面里看到还得插入到某个父元素里，需要
追加节点
（头插法尾插法(?
例如在ul下面的li里再添加一个li：创建一个li->选择ul->在ul的前面/后面添加进去
注意在获取节点的时候，children永远是以伪数组呈现的，所以可以用下标【0】来确定插在最前面；如果伪数组为空也不会报错，直接插入
其实就是用js来写标签
<!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>学车在线首页</title><link rel="stylesheet" href="./css/style.css"><style></style>
</head><body><!-- 4. box核心内容区域开始 --><div class="box w"><div class="box-hd"><h3>精品推荐</h3><a href="#">查看全部</a></div><div class="box-bd"><ul class="clearfix"></ul></div></div><script>// 1. 重构 let data = [{src: 'images/course01.png',title: 'Think PHP 5.0 博客系统实战项目演练',num: 1125},{src: 'images/course02.png',title: 'Android 网络动态图片加载实战',num: 357},{src: 'images/course03.png',title: 'Angular2 大前端商城实战项目演练',num: 22250},{src: 'images/course04.png',title: 'Android APP 实战项目演练',num: 389},{src: 'images/course05.png',title: 'UGUI 源码深度分析案例',num: 124},{src: 'images/course06.png',title: 'Kami2首页界面切换效果实战演练',num: 432},{src: 'images/course07.png',title: 'UNITY 从入门到精通实战案例',num: 888},{src: 'images/course08.png',title: 'Cocos 深度学习你不会错过的实战',num: 590},]const ul = document.querySelector('.box-bd ul')for (let i = 0; i <data.length; i++) {const li = document.createElement('li')li.innerHTML = `<a href="#"><img src="${data[i].src}" alt=""><h4>${data[i].title}</h4><div class="info"><span>高级</span>·<span>${data[i].num}</span>人在学</div></a>`ul.appendChild(li)}</script>
</body></html>
克隆节点
做轮播图这种有一定重复性的效果时，里面相似的标签也可以直接复制(克隆)先前的：
（复制已经有的li）
(进行追加)
在JavaScript中，
Node.cloneNode()方法用于克隆一个节点。克隆可以是浅克隆（只复制节点本身，不包括其子节点，也就是只复制标签本身）或者是深克隆（复制节点及其所有后代节点）。默认情况下，该方法执行的是浅克隆。
删除结点
要删除一个结点必须经过父节点的同意
const dad=document.querySelector('.dad')console.log(dad.children[0]);dad.removeChild(dad.children[0])
（删除前后）
如不存在父子关系则删除不成功
删除节点和隐藏节点（display:none） 有区别的： 隐藏节点还是存在的，但是删除，则从html中删除节点
M端事件
m端事件就是移动端事件，移动端也有自己独特的事件，比如触屏事件 touch（也称触摸事件），Android 和 IOS 都有
简单了解：
touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指（或触控笔 ）对屏幕或者触控板操作。
常见的触屏事件如下：
js插件
使用一些别人做好的成片（前端cv工程师）
学习插件的基本过程
Ø 熟悉官网,了解这个插件可以完成什么需求 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同时使用的时候, 类名需要注意区分
使用插件的步骤：
引入对应文件->引入css/js源码
