JS实现页面实时时间显示/倒计时
函数介绍
间歇函数
setInterval(函数/可使用匿名函数,间隔时间/ms)每过一段间隔时间,调用一次函数
获取时间对象函数
//返回的是调用当前时间对象,包含年月日星期,小时分钟秒
const date1=new Date()
//返回的是调用当前时间对象转化为毫秒形式的时间戳
const date2=+new Date()
一、页面实时时间
思路:
- 最外层:间歇函数每秒钟将时间显示函数的返回值写入页面
- 中层:时间显示函数实时获取当前时间,并转换为可读时间
- 内层:补零函数
演示:
代码:
<!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 class="box"></div><script>//获取对象const div=document.querySelector('div')function formdate() {//获取时间const date = new Date();let year = date.getFullYear()//校准时间let month = date.getMonth() + 1let Day = date.getDay()let dates = date.getDate() + 1let hours = date.getHours()let minues = date.getMinutes()let second = date.getSeconds()return `${year}年-${getzero(month)}月-${getzero(dates)}日 ${getzero(hours)}:${getzero(minues)}:${getzero(second)} `}//补零函数function getzero(str) {return str<10?'0' + str:str}//间歇函数div.innerHTML = formdate()setInterval(function () { div.innerHTML = formdate() }, 1000)</script>
</body></html>
二、倒计时
思路
通过时间戳转换成毫秒差,从而换算
代码:
<!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>//获取时间戳const end = + new Date('2025-07-30 08:00:00')//时间戳单位是毫秒const div = document.querySelector('div')function counton() {const now = +new Date()const count = (end - now) / 1000let date = parseInt(count / 60 / 60 / 24)let hour = parseInt(count / 60 / 60 % 24)let minute = parseInt(count / 60 % 60)let second = parseInt(count % 60)return `剩余${date}天${hour}小时${minute}分钟${second}秒`}div.innerHTML = counton()setInterval(function () {div.innerHTML = counton()}, 1000)</script>
</body></html>
注意点:
- 功能函数的返回值
- 内容涉及变量需要使用反引号
- 调用函数的层级关系:间歇-写入网页-功能函数-除零
- 由于需要实时更新,所以获取时间/时间戳的函数要写在间歇函数内层(功能函数中),否则时间的获取无法正确更新