Web APIs - 第4章笔记

目标: 了解DOM节点的增删改查，掌握利用数据操作页面，完成移动端通讯录案例

日期对象

节点操作

M端事件

JS插件

综合案例

日期对象

日期对象Date，是JavaScript内置对象，是用来表示日期和时间的对象

作用：可以得到当前系统日期和时间以及格式化日期和时间

基本语法

获得当前日期

获得指定日期

日期对象使用必须先实例化：创建一个日期对象并获取时间

在代码中发现了 new 关键字时，一般将这个操作称为实例化

<body><script>// 1. 实例化日期对象// 1.1 得到当前的日期和时间const date = new Date()console.log(date)// 1.2 得到指定的日期和时间const date1 = new Date('2099-12-12 08:08:08')console.log(date1)</script></body>

Date对象相关方法

使用场景：

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

方法	作用	说明
getFullYear()	获得年份	获取四位年份
getMonth()	获得月份	取值为 0 ~ 11，月份记得加1
getDate()	获取月份中的每一天	不同月份取值也不相同
getDay()	获取星期	取值为 0 ~ 6 0 表示星期日
getHours()	获取小时	取值为 0 ~ 23
getMinutes()	获取分钟	取值为 0 ~ 59
getSeconds()	获取秒	取值为 0 ~ 59

<body><script>// 2. 格式化日期对象-转换成开发中常见的日期和时间格式const myDate = new Date()console.log(myDate.getFullYear()) // 得到年份 数字型console.log(myDate.getMonth() + 1) // 得到月份 数字型的需要加1console.log(myDate.getDate()) // 得到几号 数字型的console.log(myDate.getDay()) // 得到星期  数字型console.log(myDate.getHours()) // 得到小时console.log(myDate.getMinutes()) // 得到分钟console.log(myDate.getSeconds()) // 得到秒数console.log(`现在的日期是:${myDate.getFullYear()}年${myDate.getMonth() + 1}月${myDate.getDate()}日`)</script></body>

Date对象另外的方法

方法	作用	说明
toLocaleString()	返回该日期对象的字符串（包含日期和时间）	2099/9/20 18:30:43
toLocaleDateString()	返回日期对象日期部分的字符串	2099/9/20
toLocaleTimeString()	返回日期对象时间部分的字符串	18:30:43

<body><div class="box"></div><script>const date = new Date()console.log(date.toLocaleString())  // 2023/1/27 23:19:20console.log(date.toLocaleDateString())  // 2023/1/27 console.log(date.toLocaleTimeString())  // 23:19:20</script></body>

随堂案例

需求：将当前日期以：yyyy年MM月DD号 hh:mm:ss 显示到页面中

分析：

①：封装一个函数 getDateTime，显示 2088年8月8号 08:08:56 格式

②：记得时间的数字要补0 成为 08:08:56 格式

③：字符串拼接后，通过 innerText 给 div标签显示到页面中，并添加定时器效果

<!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>.box {width: 400px;height: 50px;border: 1px solid red;margin: 50px auto;text-align: center;line-height: 50px;}</style>
</head><body><!-- 1. 准备了一个容器要来显示数据 --><div class="box"></div><script>function getDateTime() {// 2. 准备数据let date = new Date()let y = date.getFullYear()let m = date.getMonth() + 1let d = date.getDate()let timer = date.toLocaleTimeString()// 3. 将这个数据显示在box容器中document.querySelector('.box').innerHTML = `${y}年${m}月${d}日 ${timer}`}getDateTime() //保证第1秒没有空白setInterval(getDateTime, 1000)</script>
</body></html>

时间戳

什么是时间戳:

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

使用场景： 计算两个时间的差值，需要借助于时间戳完成

计算方法：

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

获取时间戳的方法

获取当前系统时间的时间戳

// 获得时间戳的三种方式
// 1. getTime()
const date = new Date()
console.log(date.getTime())// 2. +new Date() 转换成数字
console.log(+new Date())// 3. Date.now() 得到当前日期的时间戳 - 推荐使用
console.log(Date.now())  // ✨✨✨只能得到当前系统的时间戳

获取指定日期时间的时间戳

// 1. getTime()
const date = new Date('2025-1-1 00:00:00')
// const date = new Date('2025-1-1')
console.log(date.getTime())// 2. +new Date() ✨✨推荐使用
console.log(+new Date('2025-1-1'))

总结：

时间戳随堂案例

需求：请计算出当前时间，离 2025年元旦还有多少天，多少小时，多少分钟，多少秒，最终显示在页面上

计算方法：

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

分析：

获取将来(2025年元旦)时间戳 +new Date('2025-1-1')
获取现在的时间戳 Date.now()
(2025年元旦)时间戳 - 现在的时间戳得到时间戳差值
将时间戳差值转换成 XX天XX小时XX分钟XX秒显示在页面上

1. 计算方法可以寻求AI帮助 ,输入提示词：请使用javascript语法将毫秒转换成天，小时，分钟，秒字符串

开启定时器，每隔1秒钟执行一次页面输出

<!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: 600px;height: 100px;margin: 50px auto;background-color: #B20008;display: flex;align-items: center;padding: 10px;}.box .left {width: 200px;font-size: 20px;color: #fff;font-weight: 800;}.box .right {color: #fff;font-size: 18px;font-weight: 600;}.box .time {color: yellow;}</style>
</head><body><div class="box"><div class="left">距离：2025元旦(2025年1月1日)</div><div class="right">还有:<span class="time">xx天xx小时xx分钟xx秒</span></div></div><script>// 将毫秒转换成 天 小时  分钟 秒  -借助AI帮写，数学计算规则function formatMilliseconds(milliseconds) {// 计算各个时间单位const days = Math.floor(milliseconds / (1000 * 60 * 60 * 24));milliseconds %= (1000 * 60 * 60 * 24);const hours = Math.floor(milliseconds / (1000 * 60 * 60));milliseconds %= (1000 * 60 * 60);const minutes = Math.floor(milliseconds / (1000 * 60));milliseconds %= (1000 * 60);const seconds = Math.floor(milliseconds / 1000);// 创建一个数组来存储结果const timeParts = [];if (days > 0) {timeParts.push(`${days}天`);}if (hours > 0 || (timeParts.length > 0 && minutes >= 0)) {timeParts.push(`${hours}小时`);}if (minutes > 0 || (timeParts.length > 0 && seconds >= 0)) {timeParts.push(`${minutes}分钟`);}if (seconds > 0 || (timeParts.length === 0)) {timeParts.push(`${seconds}秒`);}// 将数组中的部分连接成最终的字符串return timeParts.join(' ');}// 1. 主要功能：向页面输出倒计时天数function printDateTime() {//  数据如何加工// 1. 获取两个时间戳 的差值 - 单位是毫秒 let ydTime = +new Date('2025-1-1')let nowTime = Date.now()// 使用未来 - 现在 得到了他们之间的距离（毫秒）let lessMiSec = ydTime - nowTimelet res = formatMilliseconds(lessMiSec)//    console.log(res)      // 3. 赋值到页面元素.time的盒子里面显示即可 //  输出：document.querySelector('.time').innerHTML = res}// 2. 当页面打开第一秒的时候，不会出现没有数据的情况printDateTime()// 3. 从第2秒开始，每隔1秒钟刷新一次数据的数据setInterval(printDateTime,1000)</script>
</body></html>

时间戳额外作业(自主完成)

需求：计算到下课还有多少时间（18:30）

分析：

①：核心：使用将来的时间戳减去现在的时间戳，封装函数 getTimer

②：把剩余的时间戳转换为时、分、秒（可以使用AI帮助生成转换函数）

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

③：把计算时分秒写到对应 span 盒子里面

④：添加定时器效果自动变化时间

<!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;}</style>
</head><body><div class="countdown"><p class="next">今天是2222年2月22日</p><p class="title">下班倒计时</p><p class="clock"><span id="hour">00</span><i>:</i><span id="minutes">25</span><i>:</i><span id="second">20</span></p><p class="tips">18:30:00下课</p></div><script>// 倒计时案例 当前距离  2023年1月28日 18:30 还剩多少时间// 1. 封装 getTimer 函数： 将来的时间戳减去现在的时间戳可以得到剩余的时间戳function getTimer() {// 1.1 得到将来的时间戳const date = new Date()const end = +new Date(date.toLocaleDateString() + ' 18:30:00')// 1.2 得到现在的时间戳const now = +new Date()// 1.3 得到剩余的时间戳(毫秒数) 记得转换为秒数let count = (end - now)// 2. 把剩余的时间戳转换为 时分秒// 一小时的毫秒数const hour = 1000 * 60 * 60;// 一分钟的毫秒数const minute = 1000 * 60;// 一秒的毫秒数const second = 1000;// 计算小时数let h = Math.floor(count / hour);count %= hour;h = h<10?'0'+h:h// 计算剩余的分钟数let m = Math.floor(count / minute);count %= minute;m = m<10?'0'+m:m// 剩余的毫秒数直接转换成秒let s = Math.floor(count / second);// console.log(h, m, s)s = s<10?'0'+s:s// 3. 把计算的时分秒写到对应的span盒子里面document.querySelector('#hour').innerHTML = hdocument.querySelector('#minutes').innerHTML = mdocument.querySelector('#second').innerHTML = sdocument.querySelector('.next').innerHTML = '今天是：' + date.toLocaleDateString()}getTimer() // 注意页面一打开就要先调用函数，防止默认的内容显示// 4. 添加定时器效果让时间自动变化setInterval(getTimer, 1000)</script>
</body></html>

DOM 节点操作

DOM树：DOM 将 HTML文档以树状结构直观的表现出来，我们称之为 DOM 树或者节点树

节点（Node）是DOM树(节点树)中的单个点。包括文档本身、元素、文本以及注释都属于是节点。

元素节点（重点）

- 所有的标签比如 body、 div

- html 是根节点

属性节点

- 所有的属性比如 href

文本节点

- 所有的文本

查找节点

利用节点关系查找节点，返回的都是对象

父节点

子节点

兄弟节点

有了查找节点可以使我们选择元素更加方便

 <div class="pop"><a href="javascript:;" class="close"></a></div>

父节点查找

语法：

子元素.parentNode

<!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>王者荣耀关闭登录案例</title><style>.pop {display: block;visibility: visible;position: fixed;z-index: 9999;left: 50%;top: 50%;width: 530px;height: 254px;margin-top: -127px;margin-left: -265px;background: url(./images/login.webp) no-repeat;}.close {position: absolute;right: 0;top: 0;width: 40px;height: 40px;}</style>
</head><body><div class="pop"><a href="javascript:;" class="close"></a></div><script>// 点击关闭按钮可以关闭父盒子const closeBtn = document.querySelector('.close')// 利用孩子选取父节点,返回的也是一个元素对象console.log(closeBtn.parentNode)closeBtn.addEventListener('click', function () {this.parentNode.style.display = 'none'})</script>
</body></html>

子节点查找

什么是子节点: li就是ul的子节点

语法:

父元素.children

获得所有子元素节点，返回的是一个伪数组

<body><ul><li>我是第1个孩子</li><li>我是第2个孩子</li><li>我是第3个孩子</li><li>我是第4个孩子</li></ul><script>// 1. 查询子节点const ul = document.querySelector('ul')console.log(ul.children)console.log(ul.children[0]) // 第一个孩子console.log(ul.children[2]) // 第三个孩子</script></body>

兄弟节点

什么是兄节点: li 之间互相为兄弟节点

语法

// 查找下一个兄弟节点
节点对象.nextElementSibling
节点对象.nextElementSibling.nextElementSibling....// 查找上一个兄弟节点
节点对象.previousElementSibling
节点对象.previousElementSibling.previousElementSibling

可以连写：节点对象.nextElementSibling.nextElementSibling.previousElementSibling....

<body><ul><li>我是第1个孩子</li><li>我是第2个孩子</li><li>我是第3个孩子</li><li>我是第4个孩子</li></ul><script>// 2. 查询兄弟节点const li2 = document.querySelector('ul li:nth-child(2)')// console.log(li2)console.log(li2.previousElementSibling) // 上一个兄弟console.log(li2.nextElementSibling)  // 下一个兄弟console.log(li2.nextElementSibling.nextElementSibling.previousElementSibling)  // 连写</script></body>

增加节点

很多情况下，我们需要在页面中增加元素

比如，点击发布按钮，可以新增一条信息

一般情况下，我们新增节点，按照如下操作：

创建一个新的节点

把创建的新的节点放入到指定的元素内部

创建节点

即创造出一个新的网页元素

创建元素节点语法：

追加节点到元素内

创建元素节点后，要想在界面看到，还得插入到某个父元素中

父元素最后一个子节点之后，插入节点元素

element.append()

父元素第一个子元素的之前，插入节点元素

element.prepend()

如下代码演示：

<body><ul><li>我是第1个孩子</li><li>我是第2个孩子</li><li>我是第3个孩子</li><li>我是第4个孩子</li>    </ul><script>// 1. 创建节点const li = document.createElement('li')li.innerHTML = '我是放到后面的'console.log(li)// 2. 追加给父元素const ul = document.querySelector('ul')// 2.1 append 放到ul 的最后面 类似css的 after伪元素ul.append(li)// 2.2 prepend放到 ul 的最前面 类似css的 before伪元素const firstli = document.createElement('li')firstli.innerHTML = '我是放到前面的'ul.prepend(firstli)</script></body>

删除节点

若一个节点在页面中已不需要时，可以删除它

语法：

element.remove()

把对象从它所属的 DOM 树中删除
删除节点和隐藏节点（display:none）有区别的：隐藏节点还是存在的，但是删除，则从DOM树中删除

<body><ul><li>我是第1个孩子</li><li>我是第2个孩子</li><li>我是第3个孩子</li><li>我是第4个孩子</li></ul><script>const li3 = document.querySelector('ul li:nth-child(3)')li3.style.display='none'const li2 = document.querySelector('ul li:nth-child(2)')li2.remove()document.querySelector('ul').addEventListener('click',function(e){e.target.remove()})</script></body>

M端事件

M端(移动端)有自己独特的地方：

比如触屏事件 touch（也称触摸事件），鸿蒙、Android 、IOS都有。

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

touchstart和touchmove的事件对象上的touches保存了滑动的位置信息，可以用来判断是左滑还是右滑

<!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>M端触摸事件</title><style>.box {width:200px;height: 200px;background-color: pink;     }</style>
</head><body><div class="box">div盒子</div><script>// 触摸事件const box = document.querySelector('.box')let startNum = 0  // 保存开始位置的数字let endNum = 0 // 保存结束位置的数字// 1. 手指触屏开始事件 touchstartbox.addEventListener('touchstart', function (e) {// 记录开始点击位置startNum = e.touches[0].clientX})// 2. 手指触屏滑动事件 touchmovebox.addEventListener('touchmove', function (e) {// 记录结束移动位置endNum = e.touches[0].clientX})// 3. 手指触屏结束事件  touchendbox.addEventListener('touchend', function (e) {// 判断左滑还是右滑let lessnum = endNum - startNumif (lessnum < 0) {alert('向左移动'+lessnum)      } else {alert('向右移动'+lessnum)}})</script>
</body></html>

注意点：

touch事件必须在移动端环境下才会生效，通过浏览器调试工具-> 点亮手机小图标来开启移动端模式
touchend事件中 e.touches 没有任何内容

index是数组元素的索引号

JS插件（扩展阅读）

插件: 就是别人写好的一些代码,我们只需要复制对应的代码,就可以直接实现对应的效果

学习插件的思路：

1.看官网。了解这个插件可以完成什么需求 Swiper中文网-轮播图幻灯片js插件,H5页面前端开发

2.查看基本使用流程。 Swiper使用方法 - Swiper中文网

3.写个小demo。看在线演示,找到符合自己需求的demo Swiper演示 - Swiper中文网

4.应用的开发中。

AlloyFinger

AlloyFinger 是腾讯 AlloyTeam 团队开源的超轻量级 Web 手势插件，为元素注册各种手势事件

github地址：https://github.com/AlloyTeam/AlloyFinger

使用步骤：

下载js库：http://alloyteam.github.io/AlloyFinger/alloy_finger.js
将AlloyFinger库引入当前文件：<scriptsrc="alloy_finger.js">

或者使用在线地址：

配置

new AlloyFinger(element, {  // element 是给哪个元素做滑动事件swipe: function (e) {// 滑动的时候要做的事情 e.direction 可以判断上下左右滑动 Left  Right 等}
})