做一个简单的倒计时

 <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秒
        // 取模=取余数 / 60
        let b = Math.floor((dTime % 3600) / 60);

        // 直接取余60
        let c = dTime % 60;

        span.innerText = `${a}小时${b}分钟${c}秒`;
        // let m = span;
        // btn.onclick = function () {
        //   alert("m");
        // };
      }, 1000);

 

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

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

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

相关文章

深度解析Python关键字:掌握核心语法的基石(新版本35+4)

目录 关键字 keyword 关键字列表 kwlist softkwlist 关键字分类 数据类型 True、False None 运算类型 and、or、not in is 模块导入 import 辅助关键字 from、as 上下文管理 with 占位语句 pass 流程控制 if、elif、else for while break、continue…

Android学习之路(23)组件化框架ARouter的使用

一、功能介绍 支持直接解析标准URL进行跳转&#xff0c;并自动注入参数到目标页面中支持多模块工程使用支持添加多个拦截器&#xff0c;自定义拦截顺序支持依赖注入&#xff0c;可单独作为依赖注入框架使用支持InstantRun支持MultiDex(Google方案)映射关系按组分类、多级管理&…

计组原理:系统概论与基本组成

系统概论与基本组成 系统概论硬件软件 计算机系统的层次结构系统复杂性的管理方法1&#xff1a;抽象 计算机的基本组成冯诺依曼计算机系统复杂性的管理方法 2&#xff1a;&#xff08;3’Y&#xff09; 计算机的工作步骤上机前的准备&#xff1a;计算机的解题过程存储器的基本组…

Java List集合使用 Comparator.comparing 排序报空指针异常问题

前言 有时候对一个List集合的某个字段进行排序的时候会报错&#xff0c;问题就是排序的那个字段可能是个空值&#xff0c;那么下面就是处理这种问题的方式&#xff0c;亲自测试有效。 参考 点击可跳转&#xff1a;Java List集合使用 Comparator.comparing 排序报空指针异常问…

TPM模拟器安装

目录 TPM模拟器安装 1&#xff09;安装配置所需依赖 2&#xff09;从官网下载TPM模拟器程序ibmtpm1332.tar.gz 3&#xff09;创建安装目录并将源码解压到对应目录 4&#xff09;进入解压后的目录&#xff0c;然后执行安装命令 5&#xff09;将tpm服务器添到Linux系统执行目…

gradle各版本下载地址

IDEA如何配置 Gradle&#xff08;详细版&#xff09;_idea gradle配置-CSDN博客 Gradle | Releases 参考以上文档

Python中函数的4种参数形式

默认参数的特点是在声明函数时使用“”来指定默认值。缺省参数指因为程序使用了默认值&#xff0c;使得函数调用时不必写出全部参数。 关键字参数可以摆脱位置匹配的限制&#xff0c;直接用变量名匹配。可变参数用于处理任意数量的参数&#xff0c;形参中带一个*&#xff0c;将…

小蓝和小桥的挑战*

题目 import java.util.Scanner;public class Main {public static void main(String[] args) {Scanner sc new Scanner(System.in);int t sc.nextInt();sc.nextLine();while(t-- > 0) {int n sc.nextInt();sc.nextLine();int[] a new int[n];for(int i0;i<n;i)a[i…

Web server failed to start.Port xxxx was already in use.

目录 一、报错截图&#xff1a;二、解决方式 一、报错截图&#xff1a; 某端口被占用,导致出现如下报错&#xff1a; 二、解决方式 windowsR 输入cmd—>回车 如下图所示 查看被占用的端口的进程&#xff0c;如下图&#xff1a; netstat -ano |findstr 端口号结束这个进程…

恭喜CSDN,www.csdn.com域名买回来了!

摘要&#xff1a;www.csdn.com已经可以访问了&#xff0c;恭喜CSDN&#xff0c;迈出国际化的重要一步。 主页面浓浓的国际简约范 静态展示特点 著名的1024 day day up OpenStack & Open-Source 最后附上的是report 已经有众多支持者了&#xff0c;看排序。 博客不多&#…

重拾计网-第三弹 你不知道的计算机的秘密

&#x1f389;欢迎您来到我的MySQL基础复习专栏 ☆* o(≧▽≦)o *☆哈喽~我是小小恶斯法克&#x1f379; ✨博客主页&#xff1a;小小恶斯法克的博客 &#x1f388;该系列文章专栏&#xff1a;重拾计算机网络 &#x1f379;文章作者技术和水平很有限&#xff0c;如果文中出现错…

【MATLAB源码-第120期】基于matlab的GFSK系统调制解调仿真,输出各个节点的波形以及功率谱。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 GFSK&#xff08;高斯频移键控&#xff09;是一种数字调制技术&#xff0c;广泛应用于无线通信领域&#xff0c;尤其是在低功率和短距离通信系统中&#xff0c;例如蓝牙技术。GFSK是频移键控&#xff08;FSK&#xff09;的一…

Vue3+ElementUI 多选框中复选框和名字点击方法效果分离

现在的需求为 比如我点击了Option A &#xff0c;触发点击Option A的方法&#xff0c;并且复选框不会取消勾选&#xff0c;分离的方法。 <el-checkbox-group v-model"mapWork.model_checkArray.value"> <div class"naipTypeDom" v-for"item …

AI+量化02_金融市场的基础概念

文章目录 问答之纯小白 vs GPT4Q1. 请用尽可能简短的语句或例子&#xff0c;给小白讲解宏观经济Q2. 给小白讲解资本边际效率Q3. 如果证券没有风险是否意味着没有收益&#xff1f;Q4. 芒格&#xff1a;教人炒股&#xff0c;犹如引人吸毒Q5. 给小白快速讲解&#xff1a;卡房统计量…

IP 地址如何进行动态分配?

由于 IP 地址资源的有限性&#xff0c;大部分用户上网都是使用动态 IP 地址&#xff0c;而不是静态 IP 地址。动态 IP 地址指的是在需要的时候才进行 IP 地址分配的方式&#xff0c;而静态 IP 地址是固定分配一个 IP 地址&#xff0c;每次都用这一个地址。因此&#xff0c;IP 地…

docker常用基础命令

文章目录 1、Docker 环境信息命令1.1、docker info1.2、docker version 2、系统日志信息常用命令2.1、docker events2.2、docker logs2.3、docker history 3、容器的生命周期管理命令3.1、docker create3.2、docker run 总结 1、Docker 环境信息命令 1.1、docker info 显示 D…

硬件-11-服务器的基础知识

参考服务器基础知识大科普 1 电视剧背景 服务器被誉为互联网之魂。 电视剧《创业年代》是一部有冯绍峰和袁姗姗等人联手主演的一部讲述我国第一批科技创业者创业故事的电视剧&#xff0c;可以说是他们铲下了建设中关村的第一捧土。 电视剧《创业年代》中的潮信公司并没有…

Ubuntu上安装部署Qt

首先需要下载对应的虚拟机软件和ubuntu镜像&#xff0c;虚拟机软件使用VMware或者Virtual Box都行&#xff0c;我用的是前者&#xff0c;这里是VMware的下载链接&#xff1a;下载 VMware Workstation Pro | CN。Ubuntu镜像推荐去清华的网站下载&#xff1a;Index of /ubuntu-re…

不管过程有多难,也想做好送给你

大家好&#xff0c;我是小悟 春节临近&#xff0c;很多品牌都各自定制了专属红包封面&#xff0c;相信也有小伙伴也抢到了一些品牌主分发的红包封面&#xff0c;微信也在各种入口比如通过搜索、摇一摇、看视频帮助用户“薅”红包封面。作为“代码撬动改变世界”的实践者&#x…

stm32h7内部flash与qspi flash异同与差异

内部flash.与qspi flash区别 在STM32H7微控制器中&#xff0c;QSPI闪存&#xff08;Quad SPI Flash&#xff09;和内部闪存之间存在一些具体的差异。以下是一些常见的差异点&#xff1a; 访问速度&#xff1a;内部闪存通常具有更快的访问速度&#xff0c;可以以更高的速率读取…