JS-WebAPIS(四)-编程知识

日期对象（常用）

• 实例化

在代码中发现了 new 关键字时，一般将这个操作称为实例化
创建一个时间对象并获取时间

获得当前时间

获得指定时间

• 时间对象方法

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

• 时间戳

使用场景： 如果计算倒计时效果，前面方法无法直接计算，需要借助于时间戳完成

什么是时间戳？

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

算法：

将来的时间戳 - 现在的时间戳 = 剩余时间毫秒数
剩余时间毫秒数转换为剩余时间的年月日时分秒就是倒计时时间
比如将来时间戳 2000ms - 现在时间戳 1000ms = 1000ms
1000ms 转换为就是 0小时0分1秒

三种方式获取时间戳：

使用 getTime() 方法

简写 +new Date()

使用 Date.now()

案例：倒计时案例

需求：计算到下课还有多少时间
分析：
①：用将来时间减去现在时间就是剩余的时间
②：核心：使用将来的时间戳减去现在的时间戳
③：把剩余的时间转换为天时分秒

注意：
1. 通过时间戳得到是毫秒，需要转换为秒在计算
2. 转换公式：

d = parseInt(总秒数/ 60/60 /24); // 计算天数
h = parseInt(总秒数/ 60/60 %24) // 计算小时
m = parseInt(总秒数 /60 %60 ); // 计算分数
s = parseInt(总秒数%60); // 计算当前秒数

<!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: 250px;height: 300px;background-color: rgb(143, 5, 5);margin: 100px auto;text-align: center;color: #fff;border: 1px solid transparent;}.box p:nth-of-type(1){margin: 20px;}.box p:nth-of-type(2){margin-top: 80px;font-size: 20px;}.box h3 {font-size: 30px;}.datetime span {display: inline-block;width: 30px;height: 30px;line-height: 30px;background: rgba(0, 0, 0, .7);}</style>
</head>
<body><div class="box"><p>今天是2024年2月22日</p><h3>过年倒计时</h3><div class="datetime"><span class="day">22</span>天<span class="h">22</span>: <span class="m">22</span>: <span class="s">22</span></div><p>2024.2.9过年</p></div><script>/* 知识点复习：1 时间对象Date()的使用 --获取当前时间2 定时器-间歇函数     --间隔一秒调用函数，刷新时间3 获取dom元素4 复习Math内置对象*///页面初始化第一次getCountTime()//调用定时器不断刷新时间setInterval(getCountTime,1000)function getCountTime(){//实例化时间对象const date = new Date()// const today = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()const p1 = document.querySelector('.box p:nth-of-type(1)')p1.innerHTML = `今天是${date.getFullYear()}年${date.getMonth()+1}月${date.getDate()}日`const day = new Date('2024.2.9') - date// let a = new Date(`${date}`)// console.log(Math.ceil(day/24/60/60/1000))// console.log(a.getDate())// console.log(a.getHours())// console.log(a.getMinutes())// console.log(a.getSeconds())document.querySelector('.day').innerHTML = Math.floor(day/24/60/60/1000)document.querySelector('.h').innerHTML = Math.floor(day/60/60/1000%24)document.querySelector('.m').innerHTML = Math.floor(day/60/1000%60)document.querySelector('.s').innerHTML = Math.floor(day/1000%60)//修改盒子颜色// console.log(getRandomColor(false))document.querySelector('.box').style.backgroundColor = getRandomColor(false)}function getRandomColor(flag = true){//如果flag=true  则返回#ffffff形式的if(flag){let arr = ['1','2','3','4','5','6','7','8','9','a','b','c','d','e','f']let result ='#'for(let i = 1;i<=6;i++){let random = Math.floor(Math.random()*arr.length)result+=arr[random]}return result}else{//如果flag=false   则返回rag(255,255,255)形式的let r = Math.floor(Math.random()*256)let g = Math.floor(Math.random()*256)let b = Math.floor(Math.random()*256)return `rgb(${r},${g},${b})`}}</script>
</body>
</html>

节点操作（常用）

• DOM 节点

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

节点类型（）

总结：

1. 什么是DOM 节点？

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

2. DOM节点的分类？

元素节点比如 div标签
属性节点比如 class属性
文本节点比如标签里面的文字

3. 我们重点记住那个节点？

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

• 查找节点

父节点查找：

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

子节点查找：

childNodes

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

children 属性（重点）

仅获得所有元素节点（只获取html标签）
返回的还是一个伪数组

兄弟节点查找：

1. 下一个兄弟节点

nextElementSibling 属性

2. 上一个兄弟节点

previousElementSibling 属性

• 增加节点（重点）

场景：

1.创建节点

即创造出一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点
创建元素节点方法：

2.追加节点

要想在界面看到，还得插入到某个父元素中
插入到父元素的最后一个子元素:

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

• 删除节点

若一个节点在页面中已不需要时，可以删除它
在 JavaScript 原生DOM操作中，要删除元素必须通过父元素删除
语法

注：

如不存在父子关系则删除不成功
删除节点和隐藏节点（display:none）有区别的：隐藏节点还是存在的，但是删除，则从html中删除节点

M端事件（移动端）

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

触屏事件 touch（也称触摸事件），Android 和 IOS 都有。
touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作。
常见的触屏事件如下：

JS插件（swiper）

插件: 就是别人写好的一些代码,我们只需要复制对应的代码,就可以直接实现对应的效果
学习插件的基本过程
熟悉官网,了解这个插件可以完成什么需求 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同时使用的时候, 类名需要注意区分

在官网下载后，从这个package夹中找到css和js文件，引入到项目中就可以用了，具体看文档

综合案例

学生信息表案例

说明：

本次案例，我们尽量减少dom操作，采取操作数据的形式

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

核心思路：
①：声明一个空的数组
②：点击录入，根据相关数据，生成对象，追加到数组里面
③：根据数组数据渲染页面-表格的行
④：点击删除按钮，删除的是对应数组里面的数据
⑤：再次根据数组的数据，渲染页面

<!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/index.css" />
</head><body><h1>新增学员</h1><form class="info" autocomplete="off">姓名：<input type="text" class="uname" name="uname" required />年龄：<input type="text" class="age" name="age" required />性别:<select name="gender" class="gender"><option value="男">男</option><option value="女">女</option></select>薪资：<input type="text" class="salary" name="salary" required />就业城市：<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>/* 本案例使用到的知识点1 dom对象的获取2 数组操作3 事件流-阻止默认行为4 对象的操作5 事件绑定6 事件对象 e的用法7 对象的自定义属性*/const add = document.querySelector('.add')const info = document.querySelector('.info')const tbody = document.querySelector('tbody')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 arr = []  //初始化数组用于存储数据const items = document.querySelectorAll('[name]')//1 为表单设置提交事件  //事件类型是提交事件info.addEventListener('submit', function (e) {//1.1 阻止表单默认行为，不然点击后会将内容提交给自己(这里的对象需要填写表单)e.preventDefault()console.log(11)//1.2初始化对象const obj = {stuId: arr.length + 1,uname: uname.value,age: age.value,gender: gender.value,salary: salary.value,city: city.value}//3 对表单元素进行验证for (let i = 0; i < items.length; i++) {if (items[i].value === '') {alert('内容不能为空！')//结束函数return}}//1.3将对象追加到数组种arr.push(obj)//重置表单this.reset()// console.log(arr)//1.4显然表单render()})function render() {//每次调用清空原来tbody种的元素tbody.innerHTML = ''for (let i = 0; i < arr.length; i++) {//创建trconst 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种tbody.appendChild(tr)}}//2点击a元素删除数组对象  --使用事件委托tbody.addEventListener('click', function (e) {//2.1只有点击a,才做操作if (e.target.tagName === 'A') {// console.log(111)//2.2获取a种的自定义属性值//  console.log(e.target.dataset.id)//根据自定义属性的值删除数组元素arr.splice(e.target.dataset.id, 1)//2.3删除操作后重新渲染render()}})</script></body></html>