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

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

函数介绍

间歇函数

setInterval(函数/可使用匿名函数,间隔时间/ms)每过一段间隔时间,调用一次函数

获取时间对象函数 

//返回的是调用当前时间对象,包含年月日星期,小时分钟秒
const date1=new Date()
//返回的是调用当前时间对象转化为毫秒形式的时间戳
const date2=+new Date()

一、页面实时时间

思路:

  1. 最外层:间歇函数每秒钟将时间显示函数的返回值写入页面
  2. 中层:时间显示函数实时获取当前时间,并转换为可读时间
  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 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>

注意点:

  1. 功能函数的返回值
  2. 内容涉及变量需要使用反引号
  3. 调用函数的层级关系:间歇-写入网页-功能函数-除零
  4. 由于需要实时更新,所以获取时间/时间戳的函数要写在间歇函数内层(功能函数中),否则时间的获取无法正确更新
http://www.dtcms.com/a/271769.html

相关文章:

  • SMTPman,smtp的端口号是多少全面解析配置
  • 【数据结构】时间复杂度和空间复杂度
  • 杰赛S65_中星微ZX296716免拆刷机教程解决网络错误和时钟问题
  • Java线程池原理概述
  • 浏览器 实时监听音量 实时语音识别 vue js
  • 解析LLM层裁剪:Qwen实战指南
  • 搭建自动化工作流:探寻解放双手的有效方案(1)
  • Spring Boot项目中大文件上传的高级实践与性能优化
  • Spring for Apache Pulsar->Reactive Support->Message Consumption
  • Socket服务器代理工具及服务端网络转发中枢
  • 【Action帧简要分析】
  • iOS APP混合开发性能测试怎么做?页面卡顿、通信异常的工具组合实战
  • iOS Widget 开发-7:TimelineProvider 机制全解析:构建未来时间线
  • 在 MacOS 上安装和配置 Kafka
  • 深入理解 Linux 中的 stat 函数与文件属性操作
  • 每天一个前端小知识 Day 29 - WebGL / WebGPU 数据可视化引擎设计与实践
  • 在Linux上使用libasan开发QT程序定位内存问题
  • Spring AI 系列之七 - MCP Client
  • 限流式保护器如何筑牢无人驾驶汽车充电站的安全防线
  • linxu内核的signal fault和arm内核的flault
  • 【LeetCode100】--- 2.字母异位词分组【复习回顾】
  • 如何发现 Redis 中的 BigKey?
  • 正向代理服务器Squid:功能、架构、部署与应用深度解析
  • 黄瓜苦多于意外,苦瓜苦来自本源——“瓜苦”探源
  • CloudCanal:一款企业级实时数据同步、迁移工具
  • 浪潮CD1000-移动云电脑-RK3528芯片-2+32G-开启ADB ROOT破解教程
  • tomcat源码02 - 理解Tomcat架构设计
  • MyBatis集成Logback日志全攻略
  • 微软云语音识别ASR示例Demo
  • 激活函数与损失函数:神经网络的动力引擎与导航系统