js倒计时

js倒计时

根据实际经过的时间动态调整下一次更新的时间,从而减少延迟问题

  const countdown = (endTime: any, onUpdate: any, onEnd: any) => {
    const updateInterval = 1000; // 更新间隔(毫秒)
    let lastUpdateTime = new Date().getTime();
    const update = () => {
      const currentTime = new Date().getTime();
      const remainingTime = Math.max(endTime - currentTime, 0);
      const seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);
      const minutes = Math.floor(
        (remainingTime % (1000 * 60 * 60)) / (1000 * 60),
      );
      const hours = Math.floor(
        (remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60),
      );
      const days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));

      onUpdate({ days, hours, minutes, seconds });

      if (remainingTime <= 0) {
        clearInterval(intervalId);
        onEnd();
      } else {
        const elapsedTime = currentTime - lastUpdateTime;
        const nextUpdateInterval =
          updateInterval - (elapsedTime % updateInterval);
        setTimeout(update, nextUpdateInterval);
        lastUpdateTime = currentTime;
      }
    };
    const intervalId = setTimeout(update, updateInterval);
  };
  const endTime = new Date().getTime() + 1000 * 60 * 60 * 24;
  countdown(
    endTime,
    ({ days, hours, minutes, seconds }:any) => {
      console.log(`倒计时:${days}天 ${hours}小时 ${minutes}分钟 ${seconds}秒`);
    },
    () => {
      console.log('倒计时结束');
    }
  );

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/602071.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

基于大数据+Hadoop的豆瓣电子图书推荐系统实现

&#x1f339;作者主页&#xff1a;青花锁 &#x1f339;简介&#xff1a;Java领域优质创作者&#x1f3c6;、Java微服务架构公号作者&#x1f604; &#x1f339;简历模板、学习资料、面试题库、技术互助 &#x1f339;文末获取联系方式 &#x1f4dd; 系列文章目录 基于大数…

组合模式(Composite)——结构型模式

组合模式(Composite)——结构型模式 组合模式是一种结构型设计模式&#xff0c; 你可以使用它将对象组合成树状结构&#xff0c; 并且能通过通用接口像独立整体对象一样使用它们。如果应用的核心模型能用树状结构表示&#xff0c; 在应用中使用组合模式才有价值。 例如一个场景…

新能源汽车充电站智慧充电电能服务综合解决方案

安科瑞薛瑶瑶18701709087/17343930412 ★解决方案 ✔目的地充电-EMS微电网平台 基于EMS解决方案从设备运维的角度解决本地充电的能量管理及运维问题&#xff0c;与充电管理平台打通数据&#xff0c;为企业微电网提供源、网、荷、储、充一体化解决方案。 ✔运营场站--电能服务…

​「Python绘图」绘制太极图

python 绘制太极 一、预期结果 二、核心代码 import turtlepen turtle.Turtle()print("开始绘制太极")radius 100 pen.color("black", "black") pen.begin_fill() pen.circle(radius/2, 180) pen.circle(radius, 180) pen.left(180) pen.circ…

英语口语情景对话视频软件分享!

在当今全球化的时代&#xff0c;英语已成为一种通用的国际语言。为了提高英语口语能力&#xff0c;越来越多的人选择使用英语口语情景对话视频软件。本文将为您推荐几款备受欢迎的英语口语情景对话视频软件&#xff0c;帮助您轻松提高英语口语水平。 AI外语陪练 AI外语陪练软件…

营养补充品软胶囊:弹性测试与市场表现的深度解析

营养补充品软胶囊&#xff1a;弹性测试与市场表现的深度解析 在追求健康生活的时代&#xff0c;营养补充品市场蓬勃发展&#xff0c;其中软胶囊作为一种方便、易吸收的剂型&#xff0c;受到了消费者的广泛欢迎。然而&#xff0c;在这个竞争激烈的市场中&#xff0c;如何确保产…

推荐5个AI工具平替GPT

随着AI技术的快速发展&#xff0c;AI写作正成为创作的新风口。但是面对GPT-4这样的国际巨头&#xff0c;国内很多小伙伴往往望而却步&#xff0c;究其原因&#xff0c;就是它的使用门槛高&#xff0c;还有成本的考量。 不过&#xff0c;随着GPT技术的火热&#xff0c;国内也涌…

window11事件查看器中“在事件中只要触发此事件,就会执行相关非XX.xml脚本”

在事件中只要触发此事件&#xff0c;就会执行相关非XX.xml脚本 一、操作过程 1、在时间查看器中&#xff0c;将任务附加到此事件上 2、按照提示逐步下一步添加完成 3、只要触发1中的事件&#xff0c;那么就会执行对应的关联脚本xx.xml。 二、解决办法 1、通过开始菜单搜索打…

riscv交叉编译ports软件@FreeBSD15

当前FreeBSD的riscv版本下&#xff0c;软件包还很贫乏&#xff0c;再加上RISCV的板子有很多种&#xff0c;大部分时候都需要自己动手编译。但是在RISCV环境下编译太慢了&#xff0c;所以我们要使用交叉编译&#xff0c;在很快的AMD64服务器上交叉编译RISCV的软件包。 这里使用…

Promise魔鬼面试题

文章目录 题目解析难点分析分析输出step1step2step3step4step5step6 参考/致谢&#xff1a;渡一袁老师 题目 Promise.resolve().then(() > {console.log(0);return Promise.resolve(4);}).then((res) > {console.log(res);});Promise.resolve().then(() > {console.l…

基于FPGA的数字信号处理(10)--定点数的舍入模式(1)四舍五入round

1、前言 将浮点数定量化为定点数时&#xff0c;有一个避不开的问题&#xff1a;某些小数是无法用有限个数的2进制数来表示的。比如&#xff1a; 0.5(D) 0.1(B) 0.1(D) 0.0001100110011001~~~~(B) 可以看到0.5是可以精准表示的&#xff0c;但是0.1却不行。原因是整数是离散的…

AngusTester安装请求代理

一、介绍 请求代理程序(AngusProxy)提供两个方面作用&#xff1a; 代理Http和WebSocket协议接口调试请求&#xff0c;解决浏览器跨域限制问题。对代理请求客户化处理支持&#xff0c;允许用户对代理请求进行二次处理&#xff0c;如&#xff1a;请求参数签名。 二、类型 为了…

【经验01】spark执行离线任务的一些坑

项目背景: 目前使用spark跑大体量的数据,效率还是挺高的,机器多,120多台的hadoop集群,还是相当的给力的。数据大概有10T的量。 最近在出月报数据的时候发现有一个任务节点一直跑不过去,已经超过失败次数的阈值,报警了。 预警很让人头疼,不能上班摸鱼了。 经过分析发现…

多个glibc库存在时如何查看ldd调用的哪个

但是发现存在多个版本的glibc版本&#xff0c;需要查看具体的库的信息&#xff0c;和相应的关键函数的信息&#xff0c;但是并不知道具体的libc.so.6的路径信息 rootalg-dev04:~/xingqiao# ldd --version ldd (GNU libc) 2.29 rootalg-dev04:/opt# which ldd /usr/local/bin/…

工厂自动化升级改造(2)-RS485与Modbus通信协议

在工业控制、电力通信、智能仪表等领域,数据交换通常依赖于串口通信。最初,RS232接口是主流选择,然而,由于工业现场的复杂性,各种电气设备产生的电磁干扰可能导致信号传输错误。 RS232和RS485是两种不同的串行通信协议,它们在电气特性、传输距离和拓扑结构等方面有所不同…

基于springboot的篮球联盟管理系统

文章目录 项目介绍主要功能截图&#xff1a;部分代码展示设计总结项目获取方式 &#x1f345; 作者主页&#xff1a;超级无敌暴龙战士塔塔开 &#x1f345; 简介&#xff1a;Java领域优质创作者&#x1f3c6;、 简历模板、学习资料、面试题库【关注我&#xff0c;都给你】 &…

长难句打卡5.8

If it is trying to upset Google, which relies almost wholly on advertising, it has chosen an indirect method: there is no guarantee that DNT by default will become the norm. 如果它想激怒几乎全靠广告业务运营的谷歌公司的话&#xff0c;那么它选择了一个间接的方…

目标检测CNN 目标检测发展历程 应用场景 智慧交通 自动驾驶 工业生产 智慧医疗

目标检测 目标检测是计算机视觉领域中的一个重要任务,其主要目的是让计算机能够自动识别图像或视频帧中所有目标的类别,并在目标周围绘制边界框以标示出每个目标的位置。 目标检测的过程通常包括两个主要步骤:目标定位和目标分类。目标定位是确定图像中是否存在感兴趣的目…

【功耗问题排查】

一、如何处理具体功耗case 在手机功耗测试中&#xff0c;因为我们在功耗测试中&#xff08;电源电压&#xff09;为固定值&#xff08;老手机一般为3.8V左右&#xff0c;现在的大多项目采用4V左右&#xff09;&#xff0c;那么的大小直接由决定&#xff0c;所以&#xff0c;在沟…

在线音视频下载

https://cobalt.tools/ 支持 bilibili 等网站
最新文章