在实现页面倒计时之前，我们先学习一下相关知识
实例化时间对象
语法： let date = new Date() 当前时间
let date = new Date('2021-6-13 9:45:00') 指定时间
获取时间对象
语法：date.getFullYear() 获得年份
date.getMonth() + 1
date.getDate() 获得月份中的每一天
date.getHours() 获得时
date.getMinutes() 获得分
date.getSeconds() 获得秒
date.getDay() 获取星期几，取值范围为0-6，星期天为0
时间戳：是指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式。时间戳是总的毫秒数，每个时间点的时间戳都是独一无二的，因此时间戳可以用来计算倒计时，利用将来的时间戳减去现在的时间戳，即可得到剩余时间的毫秒数，将其转换为时分秒就是剩余的时间。
获取时间戳的三种方式
1、使用getTime()方法
实例化：let date = new Date()
获取时间戳：console.log(date.getTime())
2、+new Date() （常用）
获取时间戳 ：console.log(+new Date()) //利用了隐式转换
let date = new Date()
// 得到当前时间的时间戳
console.log(+new Date())
// 得到指定时间的时间戳
console.log(+new Date('2022-7-13 18:00:00'))3、Date.now()
console.log(Date.now()) 只能得到当前时间戳
案例一：能实时显示当前时间
注意：实例化时间对象一定要写到定时器（间歇函数）里边，每隔一秒更新一次时间
<!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: 400px;
height: 50px;
background-color: powderblue;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<div class="time"></div>
<script>
let data = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六',]
let time = document.querySelector('.time')
getTime()
setInterval(getTime,1000)
function getTime() {
// 实例化时间对象一定要写到定时器里边
let date = new Date()
let year = date.getFullYear()
let month = date.getMonth()+1
let day = date.getDate()
let hour = date.getHours()
let minute = date.getMinutes()
let second = date.getSeconds()
let weekday = date.getDay()
let time = document.querySelector('.time')
time.innerHTML = `今天是：${year}年${month}月${day}日 ${hour}时${minute}分${second}秒 ${data[weekday]}`
}
</script>
</body>
</html>案例二：倒计时（设置指定时间能自动计算倒计时时间）
在间歇函数调用前，需要先获取当前时间，才会避免页面更新延迟。这里主要用到了两个间歇函数来实时更新时间。注意：时间戳获取的时毫秒数，需要将其/1000转换为秒数。
<!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: 300px;
height: 350px;
text-align: center;
line-height: 1;
color:#fff;
background-color:teal;
overflow: hidden;
}
.countdown .next {
font-size: 16px;
margin: 25px 0 14px 0;
}
.countdown .title {
font-size: 40px;
}
.countdown .tips {
margin-top: 100px;
font-size: 16px;
}
.countdown .small{
font-size: 17px;
}
.countdown .clock {
width: 250px;
margin: 60px 0 0 38px;
overflow: hidden;
}
.countdown .clock span,
.countdown .clock i {
display:block;
text-align: center;
line-height: 34px;
font-size: 16px;
float:left;
}
.countdown .clock span{
width:35px;
height:35px;
border-radius: 5px;
background-color: #303430;
}
.countdown .clock i {
width: 25px;
font-style: normal;
}
</style>
</head>
<body>
<div class="countdown">
<p class="next">今天是2022年7月13日</p>
<p class="title">毕业倒计时</p>
<p class="clock">
<span id="days"></span>
<i>天</i>
<span id="hours"></span>
<i>:</i>
<span id="minutes"></span>
<i>:</i>
<span id="seconds"></span>
<i>秒</i>
</p>
<p class="tips">
现在时间是15:34:30
</p>
</div>
<script>
let date = new Date()
let year = date.getFullYear()
let month = date.getMonth()+1
let day = date.getDate()
let clock = document.querySelector('.clock')
let next = document.querySelector('.next')
let tips = document.querySelector('.tips')
let days = document.querySelector('#days')
let hours = document.querySelector('#hours')
let minutes = document.querySelector('#minutes')
let seconds = document.querySelector('#seconds')
next.innerHTML = `今天是${year}年${month}月${day}日`
getTime()
setInterval(getTime,1000)
function getTime(){
let date = new Date()
let hour = date.getHours()
let minute = date.getMinutes()
let second = date.getSeconds()
hour = hour < 10 ? '0' + hour : hour
minute = minute < 10 ? '0' + minute : minute
second = second < 10 ? '0' + second : second
tips.innerHTML = `现在时间是${hour}时${minute}分${second}秒`
}
countTime()
function countTime(){
let now = +new Date()
//2、得到指定时间的时间戳
let last = +new Date('2023-5-30 8:00:00')
// 3、计算剩余的毫秒数/1000 == 剩余的秒数
let count = (last-now) / 1000
// 4、转换为天时分秒
d = parseInt(count/60/60/24)
d = d < 10 ? '0' + d : d
days.innerHTML = d
h= parseInt(count/60/60%24)
h = h < 10 ? '0' + h : h
hours.innerHTML = h
m = parseInt(count/60%60)
m = m < 10 ? '0' + m : m
minutes.innerHTML = m
s = parseInt(count%60)
s = s < 10 ? '0' + s : s
seconds.innerHTML = s
if(count <= 0){
clock.innerHTML = '恭喜你毕业啦！！！'
}
}
setInterval(countTime,1000)
</script>
</body>
</html>本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
