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 : hlet m = parseInt(count / 60 % 60)m = m < 10 ? "0" + m : mlet s = parseInt(count % 60)s = s < 10 ? "0" + s : s// 把时分秒写到对应的盒子里面document.querySelector("#hour").innerHTML = hdocument.querySelector("#minutes").innerHTML = mdocument.querySelector("#second").innerHTML = s}// 使用定时器setInterval(getTime,1000)

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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C指针介绍(1)

文章目录 每日一言指针的简单介绍内存和地址指针在内存中的存储指针的定义和声明泛型指针 指针的关系运算算数运算关系运算 结语 每日一言 ⭐「 一声梧叶一声秋&#xff0c;一点芭蕉一点愁&#xff0c;三更归梦三更后。 」–水仙子夜雨-徐再思 指针的简单介绍 C语言指针是C语…

人工智能轨道交通行业周刊-第67期(2023.11.27-12.3)

本期关键词&#xff1a;列车巡检机器人、城轨智慧管控、制动梁、断路器、AICC大会、Qwen-72B 1 整理涉及公众号名单 1.1 行业类 RT轨道交通人民铁道世界轨道交通资讯网铁路信号技术交流北京铁路轨道交通网上榜铁路视点ITS World轨道交通联盟VSTR铁路与城市轨道交通RailMetro…

算法工程师面试八股(搜广推方向)

文章目录 机器学习线性和逻辑回归模型逻辑回归二分类和多分类的损失函数二分类为什么用交叉熵损失而不用MSE损失&#xff1f;偏差与方差Layer Normalization 和 Batch NormalizationSVM数据不均衡特征选择排序模型树模型进行特征工程的原因GBDTLR和GBDTRF和GBDTXGBoost二阶泰勒…

React使报错不再白屏

如果代码中出现问题导致报错&#xff0c;通常会使页面报错&#xff0c;导致白屏 function Head() {// 此时模拟报错导致的白屏return <div>Head --- {content}</div> } export default () > {return (<><div>下面是标题</div><Head />…

若依框架分页

文章目录 一、分页功能解析1.前端代码分析2.后端代码分析3. LIMIT含义 二、自定义MyPage,多态获取total1.定义MyPage类和对应的调用方法 一、分页功能解析 1.前端代码分析 页面代码 封装的api请求 接口请求 2.后端代码分析 controller代码 - startPage() getDataTable(…

yolo.txt格式与voc格式互转,超详细易上手

众所周知,yolo训练所需的标签文件类型是.txt的,但我们平时使用标注软件(labelimage等)标注得到的标签文件是.xml类型的,故此xml2txt之间的转换就至关重要了,这点大家不可能想不到,但是网上的文章提供的代码大多数都是冗余,或者难看,难以上手,故此作者打算提供一个相对…

Sharding-Jdbc(3):Sharding-Jdbc分表

1 分表分库 LogicTable 数据分片的逻辑表&#xff0c;对于水平拆分的数据库(表)&#xff0c;同一类表的总称。 订单信息表拆分为2张表,分别是t_order_0、t_order_1&#xff0c;他们的逻辑表名为t_order。 ActualTable 在分片的数据库中真实存在的物理表。即上个示例中的t_…

怎样使用rtsp,rtmp摄像头低延时参于Web视频会议互动直播

业务系统中有大量的rtsp&#xff0c;rtmp等监控直播设备&#xff0c;原大部分都是单一业务监控直播之类&#xff0c;目前很多业务需要会议互动&#xff0c;需要监控参会&#xff0c;提出需摄像头拉流参会的需求&#xff0c;由于rtmp&#xff0c;rtsp原生不支持web播放&#xff…

vue3-在自定义hooks使用useRouter 报错问题

文章目录 前言一、报错分析报错的Vue warn截图&#xff1a;查看文档 二、那么在hook要怎么引入路由呢&#xff1f; 前言 记录在vue3项目中&#xff0c;hook使用useRouter 报错问题 一、报错分析 报错的Vue warn截图&#xff1a; 警告 inject() can only be used inside setup…

【LeetCode刷题笔记】103. 二叉树的锯齿形层序遍历

创作不易&#xff0c;本篇文章如果帮助到了你&#xff0c;还请点赞 关注支持一下♡>&#x16966;<)!! 主页专栏有更多知识&#xff0c;如有疑问欢迎大家指正讨论&#xff0c;共同进步&#xff01; 更多算法知识专栏&#xff1a;算法分析&#x1f525; 给大家跳段街舞感谢…

数据链路层之广域网、PPP协议、HDLC协议

学习的最大理由是想摆脱平庸&#xff0c;早一天就多一份人生的精彩&#xff1b;迟一天就多一天平庸的困扰。各位小伙伴&#xff0c;如果您&#xff1a; 想系统/深入学习某技术知识点… 一个人摸索学习很难坚持&#xff0c;想组团高效学习… 想写博客但无从下手&#xff0c;急需…

【C语言之 CJson】学CJson看这一篇就够了

文章目录 前言一、下载CJson二、创建一个json2.1 创建json对象cJSON类型详解 2.2 创建键值对2.3 添加嵌套的 JSON 对象2.4 添加数组创建数组添加元素到数组添加数组到obj 2.5 将 JSON 对象转为字符串2.6 释放内存2.7 示例代码 三、解析json3.1 解析json root3.2 把一个key解析出…

springboot足球社区管理系统

springboot足球社区管理系统 成品项目已经更新&#xff01;同学们可以打开链接查看&#xff01;需要定做的及时联系我&#xff01;专业团队定做&#xff01;全程包售后&#xff01; 2000套项目视频链接&#xff1a;https://pan.baidu.com/s/1N4L3zMQ9nNm8nvEVfIR2pg?pwdekj…

计算机导论——第39章 文件和目录

除了虚拟化CPU和内存&#xff0c;另外一个是持久存储&#xff0c;永久存储信息。持久存储设备与内存不同&#xff0c;内存在断电时内容会丢失&#xff0c;而持久存储设备会保持这些数据不变。 1. 文件和目录 文件就是一个线性字节数组&#xff0c;每个字节都可以读取或者写入…

Bean的加载方式

Bean的加载方式 文章目录 Bean的加载方式bean的xml方式声明bean的加载方式二&#xff1a;XML注解当时声明beanbean的加载方式三&#xff1a;注解方式声明配置类bean加载方式扩展——FactoryBean bean的xml方式声明 <?xml version"1.0" encoding"UTF-8"…

图论|并查集理论基础 1971. 寻找图中是否存在路径

什么是并查集 并查集是一种数据结构&#xff0c;用于处理一些不交集的合并及查询问题。它支持两种操作&#xff1a; 查找&#xff08;Find&#xff09;&#xff1a;确定某个元素属于哪个子集。它可以用来判断两个元素是否属于同一个子集。 合并&#xff08;Union&#xff09;&…

windows 你的电脑不能投影到其他屏幕,请尝试重新安装驱动程序

注意 千万不要去下载什么驱动精灵&#xff0c;太垃圾不好用还一堆附带的软件。按以下步骤进行解决&#xff1a; 解决方法 可能是显卡驱动的问题&#xff0c;我的笔记本按照如下步骤重启一下驱动后解决了&#xff0c;步骤如下: 右键点击桌面的开始菜单&#xff0c;选择”设备…

javaee实验:MVC 框架技术应用——URL 映射及方法参数的使用

目录 urlmvc框架mvc框架的设计mvc流程 实验目的实验内容实验过程创建项目创建项目结构编写代码简单测试一下 url 和 Hypertext 以及 HTTP 一样&#xff0c;URL 是 Web 中的一个核心概念。它是浏览器用来检索 web 上公布的任何资源的机制 URL 代表着是统一资源定位符&#xff…

智能优化算法应用:基于JAYA算法无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于JAYA算法无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于JAYA算法无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.JAYA算法4.实验参数设定5.算法结果6.参考文献7.MATLAB…

循环神经网络RNN及其变体LSTM、GRU

1. 背景 RNN(Recurrent Neural Networks) CNN利用输入中的空间几何结构信息&#xff1b;RNN利用输入数据的序列化特性。 2. SimpleRNN单元 传统多层感知机网络假设所有的输入数据之间相互独立&#xff0c;但这对于序列化数据是不成立的。RNN单元用隐藏状态或记忆引入这种依赖…