JS听到了双生花的回响

日期对象

学会了日期对象可以让网页显示日期

是用来表示时间的对象，可以得到当前系统的时间

实例化

new关键字，就是实例化的代表

就比如说，你没有对象，但是你是程序员，这个时候你可以先定义一个类（你的理想型），再new一个对象出来，这就是实例化

获得当前时间：

获得指定时间：

时间对象方法

我们需要能够使用日期对象中的方法写出常见日期

因为日期对象返回的数据我们不能直接使用，所以需要转换为实际开发的常用格式

页面显示时间：让我们将当前的时间以 YYYY-MM-DD HH:mm的形式显示在页面

<script>const date = new Date()let time = date.getFullYear() + '-' + date.getMonth() + '-' + date.getDay() + ' ' + date.getHours() + ':' + date.getMinutes()document.write(time)
</script>

时间戳

世界是一个巨大的里牛渴死

这就是时间戳应用的实例孩子们

如果计算倒计时效果，前面就没办法直接计算，需要借助时间戳完成

时间戳：

1970年01月01日00时00分00秒起至现在的毫秒数，是一种特殊的计量时间的方式

算法：

将来的时间戳 - 现在的时间戳 = 剩余时间毫秒数

剩余时间毫秒数转换为剩余时间的年月日时分秒就是倒计时时间

比如将来时间戳 2000ms - 现在时间戳 1000ms = 1000ms

1000ms 转换为就是 0小时0分1秒

我们可以使用三种方法获取时间戳：

1.使用getTime()方法

2.简写+new Date()

3.使用Date.now()

这种方法无需实例化，但是只能得到当前时间的时间戳，前面两种可以返回指定时间的时间戳

总结一下：

倒计时效果

需求：计算模电作业截止还有多少时间

分析：

tips：通过时间戳得到的是毫秒，需要转换为秒再计算

这是总公式

<!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: 80px;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: 34px;height: 34px;border-radius: 2px;background-color: #303430;}.countdown .clock i {width: 20px;font-style: normal;}.countdown .title{font-size: 26px;}</style>
</head><body><div class="countdown"><p class="next">今天是2024年11月30日</p><p class="title">模电作业截止倒计时</p><p class="clock"><span id="hour">00</span><i>:</i><span id="minutes">25</span><i>:</i><span id="scond">20</span></p><p class="tips">23:30: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() {// 1. 得到当前的时间戳const now = +new Date()// 2. 得到将来的时间戳const last = +new Date('2024-11-30 23: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 : hlet m = parseInt(count / 60 % 60)m = m < 10 ? '0' + m : mlet s = parseInt(count % 60)s = s < 10 ? '0' + s : sconsole.log(h, m, s)//  5. 把时分秒写到对应的盒子里面document.querySelector('#hour').innerHTML = hdocument.querySelector('#minutes').innerHTML = mdocument.querySelector('#scond').innerHTML = s}// 先调用一次getCountTime()// 开启定时器setInterval(getCountTime, 1000)</script>
</body></html>

节点操作

DOM节点

DOM树里每个内容都称之为节点

节点类型：

元素节点可以让我们更好的厘清标签元素之间的关系

查找节点

点击关闭按钮，关闭的是二维码的盒子，还要获取erweima盒子

关闭按钮和erweima是父子关系，所以我们点击关闭按钮直接关闭它的爸爸就无需获取erweima元素了（我对这种命名方式很无语啊，这和直接叫个中文名有啥区别）

还有那身份认证，我真是服了

谁没由来送我个国外手机号，或者手机能用的VPN也行

节点关系：针对的找亲戚返回的都是对象

父节点查找用parentNode 属性，返回最近一级的父节点找不到返回为null

关闭二维码案例

李伟兴 09:31:13
<!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: relative;width: 1000px;height: 200px;background-color: pink;margin: 100px auto;text-align: center;font-size: 50px;line-height: 200px;font-weight: 700;}.box1 {position: absolute;right: 20px;top: 10px;width: 20px;height: 20px;background-color: skyblue;text-align: center;line-height: 20px;font-size: 16px;cursor: pointer;}</style>
</head><body><div class="box">我是广告<div class="box1">X</div></div><div class="box">我是广告<div class="box1">X</div></div><div class="box">我是广告<div class="box1">X</div></div><script>// // 1. 获取事件源// const box1 = document.querySelector('.box1')// // 2. 事件侦听// box1.addEventListener('click', function () {//   this.parentNode.style.display = 'none'// })// 1. 获取三个关闭按钮const closeBtn = document.querySelectorAll('.box1')for (let i = 0; i < closeBtn.length; i++) {closeBtn[i].addEventListener('click', function () {// 关闭我的爸爸 所以只关闭当前的父元素this.parentNode.style.display = 'none'})}</script>
</body></html>

以上是查找父节点的实例

让我们准备查找子节点childNodes

获得所有子节点、包括文本节点（空格、换行）、注释节点等

还有一种属性更加重要：

兄弟关系查找：

总结一下：

增加节点

在很多时候，我们需要在页面中增加元素（比如点击发布按钮就可以新增一条信息）

一般情况下，我们新增结点，是按照以下的步骤进行操作的：

增加节点一般分为创建节点和插入节点这两个步骤

创建元素节点方法：

追加节点：想要在页面中看到，还需要插入到某个父元素中

插入到父元素的最后一个子元素：

插入到父元素中某个子元素的前面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><ul><li></li></ul><script>const ul = document.querySelector('ul')const li = document.createElement('li')li.innerHTML = '我是li'ul.insertBefore(li,ul.children[0])</script>
</body>
</html>

学成在线案例渲染

<!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')// 1. 根据数据的个数，创建 对应的小lifor (let i = 0; i < data.length; i++) {// 2. 创建新的小liconst li = document.createElement('li')// 把内容给lili.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>`// 3. ul追加小liul.appendChild(li)}</script>
</body></html>

增加节点除了增加，还可以复制

复制一个原有的节点，把复制的节点放入指定的元素内部

克隆节点：

cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值

太好了我最喜欢干的事情就是CV了

删除节点

一个节点如果不需要就删了

在JS的原生DOM操作中，删除元素必须通过父元素删除

如果不存在父子关系则删除不成功

删除节点和隐藏节点是有区别的，隐藏节点存在，但是删除是从html中删除节点

M端事件

移动端有自己的独特之地，比如触屏事件touch（触摸事件），Android 和 IOS 都有

touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作

常见的触屏事件：

JS插件

如果用M端事件直接手搓轮播图有点麻烦，所以我们用对应的插件来解决这个问题

要学会使用swiper

https://www.swiper.com.cn/
https://www.swiper.com.cn/demo/index.html
https://www.swiper.com.cn/usage/index.html
https://www.swiper.com.cn/api/index.html

直接把插件下载下来

解压缩之后就是这样，css和js在modules里面

至于用法，则全部是复制粘贴

查看自己想要的效果，记住序号，然后复制粘贴

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 引入外部样式 --><link rel="stylesheet" href="../../../swiper/swiper-bundle.min.css"><style>.box {width: 800px;height: 300px;background-color: pink;margin: 100px auto;}html,body {position: relative;height: 100%;}body {background: #eee;font-family: Helvetica Neue, Helvetica, Arial, sans-serif;font-size: 14px;color: #000;margin: 0;padding: 0;}.swiper {width: 100%;height: 100%;}.swiper-slide {text-align: center;font-size: 18px;background: #fff;display: flex;justify-content: center;align-items: center;}.swiper-slide img {display: block;width: 100%;height: 100%;object-fit: cover;}</style>
</head><body><!-- Swiper --><div class="box"><div class="swiper mySwiper"><div class="swiper-wrapper"><div class="swiper-slide">Slide 1</div><div class="swiper-slide">Slide 2</div><div class="swiper-slide">Slide 3</div><div class="swiper-slide">Slide 4</div><div class="swiper-slide">Slide 5</div><div class="swiper-slide">Slide 6</div><div class="swiper-slide">Slide 7</div><div class="swiper-slide">Slide 8</div><div class="swiper-slide">Slide 9</div></div><div class="swiper-pagination"></div></div></div><script src="../../../swiper/swiper-bundle.min.js"></script><!-- Initialize Swiper --><script>var swiper = new Swiper(".mySwiper", {pagination: {el: ".swiper-pagination",},});</script></body></html>

就是挑喜欢的，然后进行引入

可以通过查看文档来判断不同的实例

综合案例

我们要完成一个学生信息表的制作案例

点击录入按钮可以录入数据，点击删除可以删除当前的数据

我们尽量减少dom操作，采用操作数据的形式

增加和删除都是针对于数组的操作，根据数组数据渲染页面

先看看增加的对应操作吧：

<script>// 获取元素const uname = document.querySelector('.uname')const age = document.querySelector('.age')const gender = document.querySelector('.gender')const salary = document.querySelector('.salary')const city = document.querySelector('.city')const tbody = document.querySelector('tbody')// 首先我们要声明一个空的数组，增加和删除都是对这个数组进行操作const arr = []// 录入模块// 准备表单提交事件const info = document.querySelector('.info')info.addEventListener('submit', function (e) {// 阻止默认行为，不跳转e.preventDefault()// 下面就是创建新的对象了const obj = {StuId: arr.length + 1,uname: uname.value,age: age.value,gender: gender.value,salary: salary.value,city: city.value}// 把对象追加到数组里面arr.push(obj)// 清空表单 重置this.reset()// 调用渲染函数render()})// 单独封装渲染函数，增加和删除都需要渲染function render() {// 要先清空tbody以前的行，把里面的数据都渲染完毕tbody.innerHTML = ' 'for (let i = 0; i < arr.length; i++) {const tr = document.createElement('tr')tr.innerHTML =`<td>${arr[i].StuId}</td><td>${arr[i].uname}</td><td>${arr[i].age}</td><td>${arr[i].gender}</td><td>${arr[i].salary}</td><td>${arr[i].city}</td><td><a href="javascript:">删除</a></td>`// 追加元素tbody.appendChild(tr)}}</script>

然后来进行删除方面的操作

// 删除操作// 事件委托tbody.addEventListener('click',function(e){if(e.target.tagName === 'A'){// 搞个自定义属性，方便找到索引// 得到当前元素的自定义属性arr.splice(e.target.dataset.id,1)render()}})

我们需要让表单新增添加验证，要不然该录入为空了

const items = document.querySelectorAll('[name]')// 在这进行表单验证// 如果不通过的话就直接中断，不需要添加数据// 先要遍历循环for(let i = 0;i<items.length;i++){if(items[i].value === ''){return alert('输入内容不能为空')}}

至此就全部完成啦：

<!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="./index.css" />
</head><body><h1>新增学员</h1><form class="info" autocomplete="off">姓名：<input type="text" class="uname" name="uname" />年龄：<input type="text" class="age" name="age" />性别:<select name="gender" class="gender"><option value="男">男</option><option value="女">女</option></select>薪资：<input type="text" class="salary" name="salary" />就业城市：<select name="city" class="city"><option value="北京">北京</option><option value="上海">上海</option><option value="广州">广州</option><option value="深圳">深圳</option><option value="曹县">曹县</option></select><button class="add">录入</button></form><h1>就业榜</h1><table><thead><tr><th>学号</th><th>姓名</th><th>年龄</th><th>性别</th><th>薪资</th><th>就业城市</th><th>操作</th></tr></thead><tbody><!-- <tr><td>1001</td><td>欧阳霸天</td><td>19</td><td>男</td><td>15000</td><td>上海</td><td><a href="javascript:">删除</a></td></tr> --></tbody></table><script>// 获取元素const uname = document.querySelector('.uname')const age = document.querySelector('.age')const gender = document.querySelector('.gender')const salary = document.querySelector('.salary')const city = document.querySelector('.city')const tbody = document.querySelector('tbody')// 首先我们要声明一个空的数组，增加和删除都是对这个数组进行操作const arr = []// 录入模块// 准备表单提交事件const info = document.querySelector('.info')info.addEventListener('submit', function (e) {// 阻止默认行为，不跳转e.preventDefault()// 获取所有带name属性的元素const items = document.querySelectorAll('[name]')// 在这进行表单验证// 如果不通过的话就直接中断，不需要添加数据// 先要遍历循环for(let i = 0;i<items.length;i++){if(items[i].value === ''){return alert('输入内容不能为空')}}// 下面就是创建新的对象了const obj = {StuId: arr.length + 1,uname: uname.value,age: age.value,gender: gender.value,salary: salary.value,city: city.value}// 把对象追加到数组里面arr.push(obj)// 清空表单 重置this.reset()// 调用渲染函数render()})// 单独封装渲染函数，增加和删除都需要渲染function render() {// 要先清空tbody以前的行，把里面的数据都渲染完毕tbody.innerHTML = ' 'for (let i = 0; i < arr.length; i++) {const tr = document.createElement('tr')tr.innerHTML =`<td>${arr[i].StuId}</td><td>${arr[i].uname}</td><td>${arr[i].age}</td><td>${arr[i].gender}</td><td>${arr[i].salary}</td><td>${arr[i].city}</td><td><a href="javascript:" data-id=${i}>删除</a></td>`// 追加元素tbody.appendChild(tr)}}// 删除操作// 事件委托tbody.addEventListener('click',function(e){if(e.target.tagName === 'A'){// 搞个自定义属性，方便找到索引// 得到当前元素的自定义属性arr.splice(e.target.dataset.id,1)render()}})</script>
</body></html>