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

做一个简单的倒计时

 <div>距离过年还有:<span></span></div><script>let div = document.querySelector("div");let span = document.querySelector("span");// 获取未来时间戳let future = +new Date("2024-2-10 00:00:00");// 获取当下时间的时间戳 => 实际开发中 当下时间一般从后台服务器获取let now = +new Date();//   获取两个时间的时间差let dTime = Math.floor((future - now) / 1000);console.log(dTime);//   开启定时器 一秒钟执行一次let id = setInterval(function () {// 将对应的秒数每一秒自行减一dTime--;// 当倒计时结束时 进行一个收尾工作 使用判断条件if (dTime <= 0) {// 清除定时器clearInterval(id);return;}// 将对应的秒数转换成易于阅读的时分秒// 1小时 = 3600秒let a = Math.floor(dTime / 3600);// 一分钟 = 60秒// 取模=取余数 / 60let b = Math.floor((dTime % 3600) / 60);// 直接取余60let c = dTime % 60;span.innerText = `${a}小时${b}分钟${c}秒`;// let m = span;// btn.onclick = function () {//   alert("m");// };}, 1000);

 

因为倒计时一般是24小时开始 所以没有做年月日 需要的可以自行添加

http://www.lryc.cn/news/285507.html

相关文章:

  • 微服务环境搭建:docker+nacos单机
  • Opencv轮廓检测运用与理解
  • Java 8的新特性简单分享(后续有系列篇~敬请期待)
  • 计算机网络-计算机网络的概念 功能 发展阶段 组成 分类
  • 246.【2023年华为OD机试真题(C卷)】分月饼(动态规划-JavaPythonC++JS实现)
  • java大数据hadoop2.9.2 Linux安装mariadb和hive
  • Docker部署微服务问题及解决
  • Android: alarm定时很短时,比如500ms,测试执行mPowerManager.forceSuspend()后,系统不会suspend
  • 一个简单好用的C语言单元测试框架-Unity
  • ubuntu系统 vscode 配置c/c++调试环境
  • 算法练习-A+B/财务管理/实现四舍五入/牛牛的菱形字符(题目链接+题解打卡)
  • XSS语句
  • AD导出BOM表 导出PDF
  • linux 的nobody是什么用户? 对安全有没有影响?
  • 2024年华数杯国际数学建模B 光伏电(Problem B: Photovoltaic Power)完整思路以及源代码分享
  • 在 Spring MVC 中,用于接收前端传递的参数的注解有以下几种
  • K8s常用命令
  • MySQL的基本操作
  • 【b站咸虾米】chapter4_vue组件_新课uniapp零基础入门到项目打包(微信小程序/H5/vue/安卓apk)全掌握
  • Java网络编程——UDP通信原理
  • Spring | Srping AOP (AOP简介、动态代理、基于“代理类”的AOP实现)
  • StarRocks 生成列:百倍提速半结构化数据分析
  • 数据结构---数组
  • 知识笔记(八十四)———链式语句中fetchSql和force和bind用法
  • 为什么要用B+树
  • Android 通过adb命令查看应用流量
  • 超全的测试类型详解,再也不怕面试答不出来了!
  • 【Linux】
  • 「 网络安全常用术语解读 」网络攻击者的战术、技术和常识知识库ATTCK详解
  • Java.lang.Integer类详解