当前位置：首页 > news >正文

JavaScript基础(七)之web APIs

news 来源：原创 2025/4/28 13:02:28

第二部分：Web APIs

五、DOM-节点操作

5.1 日期对象

5.1.1 实例化

5.1.2 时间对象方法

5.1.3 时间戳

5.2 节点操作

5.2.1 DOM节点

5.2.2 查找节点

父节点查找：

子节点查找：

兄弟关系查找：

5.2.3 增加节点

创建节点

5.2.4 删除节点

5.3 M端事件

5.4 JS插件

5.5 重绘和回流

5.6 综合案例

五、DOM-节点操作

5.1 日期对象

目标：掌握日期对象，可以让网页显示日期

日期对象:用来表示时间的对象

作用：可以得到当前系统时间

5.1.1 实例化

目标：能够实例化日期对象

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

获得当前时间：

获得指定时间：

示例代码：

5.1.2 时间对象方法

目标：能够使用日期对象中的方法写出常见日期

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

案例-页面显示时间

需求：将当前时间以：YYYY-MM-DD HH:mm 形式显示在页面 2008-08-08 08:08

分析：
①调用日期对象方法进行转换
②记得数字要补0
③字符串拼接后，通过innerText给标签

<!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>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 : h;m = m < 10 ? "0" + m : m;s = s < 10 ? "0" + s : s;return `今天是：${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日${h}:${m}:${s}`;}setInterval(function() {div.innerHTML = getMyDate();}, 1000);</script>
</body></html>

5.1.3 时间戳

目标：能够获得当前时间戳

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

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

算法：

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

三种方式获取时间戳：

1. 使用getTime()方法

2. 简写+new Date()

3. 使用Date.now()

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

总结：

1. 实例化日期对象怎么写?

new Date()

2. 日期对象方法里面月份和星期有什么注意的?

月份是0~11，星期是0~6

3. 获取时间戳有哪三种方式?重点记住那个?

date.getTime()
+new Date()
Date.now()
重点记住+new Date()因为可以返回当前时间戳或者指定的时间戳

案例-毕业倒计时效果

需求：计算到下课还有多少时间

分析：
①用将来时间减去现在时间就是剩余的时间
②核心：使用将来的时间戳减去现在的时间戳
③把剩余的时间转换为天时分秒

注意：
1. 通过时间戳得到是毫秒，需要转换为秒在计算
2. 转换公式：
d = parseInt(总秒数/ 60/60 /24); // 计算天数
h =parseInt(总秒数/ 60/60 %24); // 计算小时
m=parseInt(总秒数/60 %60 ); //计算分数
s=parrseInt(总秒数%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>