JS利用时间戳倒计时案例

我们在逛某宝,或者逛某东时,我们时常看到一个倒计时,时间一到就开抢,这个倒计时是如何做的呢?让我为大家介绍一下。
理性分析一下:
1.用将来时间减去现在时间就是剩余的时间
2.核心:使用将来的时间戳减去现在的时间戳
3.把剩余的时间转换为 天 时 分 秒

注意:通过时间戳得到的是毫秒,需要转换为秒在计算
转换公式:
d = parseInt(总秒数 / 60 / 60 / 24) 计算天数
h = parseInt(总秒数 / 60 / 60 % 24) 计算小时
m = parseInt(总秒数 / 60 % 60) 计算分数
s = parseInt(总秒数 % 60) 计算当前秒数

    // 封装时间
    function getTime() {
        // 获取当前的时间戳
        let now = +new Date()
        // 获取将来的时间戳
        let last = +new Date("2023-11-3 18:30:00")
        // 获取剩余的时间戳 记得转换为秒数
        let count = (last - now) / 1000
        // 转换为时分秒
        // h = parseInt(总秒数 / 60 / 60 % 24) 计算小时
        // m = parseInt(总秒数 / 60 % 60) 计算分数
        // s = parseInt(总秒数 % 60) 计算当前秒数
        let h = parseInt(count / 60 / 60 % 24)
        h = h < 10 ? "0" + h : h
        let m = parseInt(count / 60 % 60)
        m = m < 10 ? "0" + m : m
        let s = parseInt(count % 60)
        s = s < 10 ? "0" + s : s
        // 把时分秒写到对应的盒子里面
        document.querySelector("#hour").innerHTML = h
        document.querySelector("#minutes").innerHTML = m
        document.querySelector("#second").innerHTML = s
    }
    // 使用定时器
    setInterval(getTime,1000)

效果图:请添加图片描述
感谢大家的阅读,如有不对地方,可以向我提出,感谢大家!

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

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

相关文章

完全背包问题 非零基础

目录 之前学过一遍&#xff0c;但是12月2日再练忘光光了&#xff1a; 忘记点1 —— 为什么每个物品要遍历k件&#xff1a; 忘记点2 —— 数学优化&#xff1a; 之前学过一遍&#xff0c;但是12月2日再练忘光光了&#xff1a; 【模板】完全背包_牛客题霸_牛客网 (nowcoder.c…

智慧公厕新风系统是什么?具体作用?

大家好&#xff0c;你们可曾在公厕里遇到那个臭味怪兽&#xff0c;闻得让人头晕目眩&#xff1f;别怕&#xff0c;我们有一把利剑&#xff0c;叫做“智慧公厕新风系统”&#xff01;不仅是空气净化器的升级版&#xff0c;还有一大堆高级功能等着你来领略&#xff01; 1. 风清气…

Linux常用命令——awk命令

在线Linux命令查询工具 awk 文本和数据进行处理的编程语言 补充说明 awk是一种编程语言&#xff0c;用于在linux/unix下对文本和数据进行处理。数据可以来自标准输入(stdin)、一个或多个文件&#xff0c;或其它命令的输出。它支持用户自定义函数和动态正则表达式等先进功能…

1+x网络系统建设与运维(中级)-练习3

一.设备命名 AR1 [Huawei]sysn AR1 [AR1] 同理可得&#xff0c;所有设备的命名如上图所示 二.VLAN LSW1 [LSW1]vlan 10 [LSW1-vlan10]q [LSW1]int g0/0/1 [LSW1-GigabitEthernet0/0/1]port link-type access [LSW1-GigabitEthernet0/0/1]port default vlan 10 [LSW1-GigabitEt…

SQL数据库知识点总结

前后顺序可以任意颠倒&#xff0c;不影响库中的数据关系 关系数据库的逻辑性强而物理性弱&#xff0c;因此关系数据库中的各条记录前后顺序可以任意颠倒&#xff0c;不影响库中的数据关系 一名员工可以使用多台计算机&#xff08;1&#xff1a;m&#xff09;&#xff0c;而一…

Knowledge Review(CVPR 2021)论文解析

paper&#xff1a;Distilling Knowledge via Knowledge Review official implementation&#xff1a;https://github.com/dvlab-research/ReviewKD 前言 识蒸馏将知识从教师网络转移到学生网络&#xff0c;可以提高学生网络的性能&#xff0c;作为一种“模型压缩”的方法被…

数据结构树,二叉树,堆

目录 ​编辑 1.树概念及结构 2. 树的表示 3.二叉树概念及结构 特殊的二叉树 二叉树的性质 ​编辑 二叉树选择题 二叉树的存储结构 4.堆的概念及结构 父亲孩子下标关系​编辑 堆的实现接口 堆结构体设计堆的初始化堆的销毁 堆的插入(附&#xff1a;向上调整算法) 堆…

[多线程]线程安全问题再讨论 - volatile

目录 1.引言 2.volatil关键字 2.1内存可见性 2.2指令重排序 1.引言 大家好,我是老cu,今天我们来继续聊聊线程安全问题 线程安全是我们在编程开发中遇到的非常常见,棘手 的问题.同时也是多线程部分很复杂的问题.为了线程安全我们要做很多努力.也要对线程安全部分的代码进行慎…

计算机网络的分类

目录 一、按照传输介质进行分类 1、有线网络 2、无线网络 二、按照使用者进行分类 1、公用网 (public network) 2、专用网(private network) 三、按照网络规模和作用范围进行分类 1、PAN 个人局域网 2、LAN 局域网 3、MAN 城域网 4、 WAN 广域网 5、Internet 因特…

【算法】直接插入排序

目录 1. 说明2. 举个例子3. java代码示例4. java示例截图 1. 说明 1.直接插入排序的方式和打牌一样&#xff0c;刚开始数组为空 2.拿到一个数字后从左到右将它与数组中的每一个数字进行比较&#xff0c;然后插入合适的位置 3.到最后&#xff0c;数组按照既定的顺序排序好 2. 举…

代码随想录算法训练营第五十三天【动态规划part14】 | 1143.最长公共子序列、1035.不相交的线、53. 最大子序和

1143.最长公共子序列 题目链接 力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 求解思路 动规五部曲 1.确定dp数组及其下标含义&#xff1a; dp[i][j]&#xff1a;长度为[0, i - 1]的字符串text1与长度为[0, j - 1]的字符串text2的最长公共子序…

Tensorflow的日志log记录

if OUTPUT_GRAPH:tf.summary.FileWriter("logs/", sess.graph)自动创建文件夹log

GEE:Sobel算子卷积和Roberts算子卷积对比

作者:CSDN @ _养乐多_ 本文介绍了Sobel算子卷积和Roberts算子卷积操作的代码,并进行了图像对比,可以观察到两个算子的细微差异。 文章目录 一、Sobel算子和Roberts算子对比二、完整代码三、代码链接一、Sobel算子和Roberts算子对比 详细介绍介绍参考《遥感数字图像处理教程…

基于搜索协议实现工业设备升级

目录 1、背景引入 2、技术分析 3、过程概述 4、服务器端流程 5、客户端流程 6、效果展示 7、源码 7.1 master&#xff08;主控&#xff09; 7.2 device&#xff08;设备&#xff09; 8、注意事项 1、背景引入 在工业生产中&#xff0c;设备的升级和维护是非常重要的…

Gossip 协议

Gossip 协议 背景 在分布式系统中&#xff0c;不同的节点进行数据/信息共享是一个基本的需求。 一种比较简单粗暴的方法就是 集中式发散消息&#xff0c;简单来说就是一个主节点同时共享最新信息给其他所有节点&#xff0c;比较适合中心化系统。这种方法的缺陷也很明显&…

GOLAND搭建GIN框架以及基础框架搭建

创建GO环境文件夹 终端输入安装GIN go get -u github.com/gin-gonic/gin如果遇到超时错误 package golang.org/x/net/html: unrecognized import path "golang.org/x/net/html": https fetch: Get "https://golang.org/x/net/html?go-get1": dial tcp …

理解宏任务和微任务:JavaScript 异步编程的必备知识(上)

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…

借助SD地图的BEV静态感知

动机与出发点 纯视觉、视觉Lidar的感知系统在复杂城市道路场景下并不能如预期那般表现稳定&#xff0c;其中遮挡就是一个巨大挑战。现在的BEV静态感知方案多采用多趟重建的方式获取&#xff0c;这就导致无论前方是否有车辆、建筑物、绿化带等&#xff0c;只要能投影到BEV空间的…

1688买家API接口跨境卖家需要的API接口

1688作为深耕产业带多年的数字供应链平台&#xff0c;近两年不仅在年轻消费群体中热度飙升&#xff0c;在跨境侧也有不俗表现。 11月19日&#xff0c;1688总裁余涌在1688跨境寻源通计划发布会上透露&#xff0c;1688平台拥有100万的源头厂商&#xff0c;每年服务6500万的B类买…

【JavaEE】多线程(3) -- 线程等待 wait 和 notify

目录 1. wait()⽅法 2. notify()⽅法 3. notifyAll()⽅法 4. wait 和 sleep 的对⽐&#xff08;⾯试题&#xff09; 由于线程之间是抢占式执⾏的, 因此线程之间执⾏的先后顺序难以预知. 但是实际开发中有时候我们希望合理的协调多个线程之间的执⾏先后顺序. 完成这个协调⼯…