一：实例化
1 获取系统当前时间即创建日期对象
const date = new Date()
console.log(date)
2024年6月5日周三
2 获取指定的时间
以获取2025年6月29日为例
const date = new Date('2025-6-29')
console.log(date)
二：日期对象方法
1 使用场景：
日期对象返回数据如上图，无法直接使用；因此要利用日期对象方法，转化成可以使用的格式
2 具体方法如下：
注：
getDay()中，星期天是数字0，而不是7
getMonth(),获取的月份要加1，才是正常月份显示
3 显示当前时间案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div></div>
<script>
function getDate() {
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.getDay()} ${h}:${m}:${s}`
}
const div = document.querySelector('div')
//避免页面刷新，留下的空白
div.innerHTML = getDate()
setInterval(function () {
div.innerHTML = getDate()
}, 1000)
</script>
</body>
</html>三：时间戳
1 什么是时间戳
指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式
最典型的应用场景：倒计时计算
2 倒计时算法
将来时间戳-现在时间戳 = 剩余时间毫秒数
剩余时间毫秒数 转换为 剩余时间的年月日时分秒 就是倒计时时间
3 获取时间戳的方式
1 const date = new Date()
date.getTime()
2 +new Date()
//既可以返回当前的时间戳，也可以返回指定时间的时间戳
3 Date.now()
//只能得到当前的时间戳，而且前面两种可以返回指定时间的时间戳四：案例倒计时效果
案例分析
思路：
倒计时算法
注意点：
1 通过时间戳得到的是毫秒，需要转换为秒在计算
2 转换公式：
d = parseInt(总秒数/60/60/24)//天数
h = parseInt(总秒数/60/60%24)//小时
m = parseInt(总秒数/60%60)//分数
s = parseInt(总秒数%60)//当前秒数
3 setInterval(函数名，秒数)
函数名不加小括号
样式：
代码：
<!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>
function getTime() {
//得到当前时间戳
const now = +new Date()
//得到将来时间戳
const future = +new Date("2024-6-5 21:00:00")
// console.log(now, future);
const sy = (future - now) / 1000
let h = parseInt(sy / 60 / 60 % 24)//小时
let m = parseInt(sy / 60 % 60)//分数
let s = parseInt(sy % 60)//当前秒数
h = h >= 10 ? h : '0' + h
m = m >= 10 ? m : '0' + m
s = s >= 10 ? s : '0' + s
document.querySelector('#hour').innerHTML = h
document.querySelector('#minutes').innerHTML = m
document.querySelector('#second').innerHTML = s
}
//避免页面存在数字影响
getTime()
//定时器中函数不加小括号，只写函数名
setInterval(getTime, 1000)
</script>
</body>
</html>
