前端学习笔记-Web APls篇-04

Dom节点&移动端滑动

1.日期对象

日期对象:用来表示时间的对象
作用:可以得到当前系统时间

1.1实例化

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

创建一个时间对象并获取时间

获得当前时间

获得指定时间

1.2时间对象方法

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

案例：

获得当前的时间：

法一：

<!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 : 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>

法二：

<!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')// 得到日期对象const date = new Date()div.innerHTML = date.toLocaleString()  // 2022/4/1 09:41:21setInterval(function () {const date = new Date()div.innerHTML = date.toLocaleString()  // 2022/4/1 09:41:21}, 1000)// div.innerHTML = date.toLocaleDateString()  // 2022/4/1// div.innerHTML = date.toLocaleTimeString()  // 2022/4/1</script>
</body></html>

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() 因为可以返回当前时间戳或者指定的时间戳

案例：