当前位置：首页 > news >正文

JS实现页面实时时间显示/倒计时

news 2025/7/20 9:27:51

函数介绍

间歇函数

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>

注意点：