【JavaScript】二十一、日期对象

文章目录

1、实例化日期对象
2、相关方法
3、时间戳
4、案例：毕业🎓倒计时效果

1、实例化日期对象

获得当前时间

const date = new Date()

获得指定时间

const date = new Date('2025-4-14 20:46:00')
console.log(date)

在这里插入图片描述

2、相关方法

方法	作用	说明
getFullYear()	获得年份	获取四位年份
getMonth()	获得月份	取值为 0 ~ 11，因此实际开发要额外+1
getDate()	获取月份中的每一天	不同月份取值也不相同
getDay()	获取星期	取值为 0 ~ 6，星期天是0，可借助数组返回星期x
getHours()	获取小时	取值为 0 ~ 23
getMinutes()	获取分钟	取值为 0 ~ 59
getSeconds()	获取秒	取值为 0 ~ 59
toLocaleString()	获取YYYY/MM/DD HH:mm:ss格式	小于10时不会补0，即是2025/4/14 21:15:05，不是2025/`04`/014
toLocaleDateString()	获取年月日	2025/4/14
toLocaleTimeString()	获取时分秒	21:17:01

getDay()获取星期时返回的是0～6，且星期天是0，可用数组这么转换一下：

在这里插入图片描述

需求：将当前时间以:YYYY-MM-DD HH:mm 形式显示在页面并实时刷新

<!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>div {width: 300px;height: 40px;border: 1px solid purple;text-align: center;line-height: 40px;}</style>
</head><body><div></div><script>// 补0function format(num = 0) {return num < 10 ? '0' + num : num}// 当前时间function getCurrentTime() {const date = new Date()const year = date.getFullYear()const month = format(date.getMonth() + 1)    //月份要加1const day = format(date.getDate())const hour = format(date.getHours())const minute = format(date.getMinutes())const second = format(date.getSeconds())return `${year}-${month}-${day} ${hour}:${minute}:${second}`}const div = document.querySelector('div')// 加这行，防止刚刷新页面，定时任务没触发而导致页面空白div.innerHTML = getCurrentTime()// 定时器setInterval(function () {div.innerHTML = getCurrentTime()}, 1000)</script>
</body></html>

效果：

在这里插入图片描述

3、时间戳

时间戳是指从1970年01月01日00时00分00秒起至现在的(毫)秒数，分为：

10位时间戳(秒级)
13位时间戳(豪秒级)

时间不可倒流，因此时间戳是唯一的，在不停的向前，获取时间戳可以通过：

getTime() 方法

const date = new Date()
console.log(date.getTime())

// 还可以返回指定时间的时间戳
const date = new Date('2025-4-15 17:18:00')
console.log(date.getTime())

+new Date()

// 本质做了一个类型转换，+转为数字型
// 同样还可以返回指定时间的时间戳
console.log(+new Date())

使用 Date.now()：无需实例化，但同时也只能获取当前时间戳

console.log(Date.now())

4、案例：毕业🎓倒计时效果

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

在这里插入图片描述
这个倒计时的实现，用时分秒分别去减，很繁琐，用时间戳来实现：目标截止时间的时间戳 - 当前时间戳，再转为时分秒

在这里插入图片描述

<!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">今天是2025年4月16日</p><p class="title">下班倒计时</p><p class="clock"><span id="hour">00</span><i>:</i><span id="minutes">00</span><i>:</i><span id="second">00</span></p><p class="tips">21:00:00下班</p></div><script>// 补0函数function formatZero(num) {return num < 10 ? '0' + num : num}function getTime() {const now = +new Date()const deadLine = +new Date('2025-4-15 21:00:00')const time = (deadLine - now) / 1000  // 剩余的秒数const day = formatZero(parseInt(time / 60 / 60 / 24))const hour = formatZero(parseInt(time / 60 / 60 % 24))const minute = formatZero(parseInt(time / 60 % 60))const second = formatZero(parseInt(time % 60))// 写入盒子const h = document.querySelector('#hour')const m = document.querySelector('#minutes')const s = document.querySelector('#second')h.innerHTML = hourm.innerHTML = minutes.innerHTML = second}// 单独调用一次，防止刚刷新，开始定时任务没触发，时间不对getTime()// 每秒刷新setInterval(getTime, 1000)</script>
</body></html>