JS利用时间戳倒计时的实现示例
更新时间：2023年12月04日 15:40:17 作者：远近高低各不同
这篇文章主要介绍了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)
效果图：
到此这篇关于JS利用时间戳倒计时的实现示例的文章就介绍到这了,更多相关JS 时间戳倒计时内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了JavaScript树型数据与一维数组相互转换方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
js promise 中使用 setTimeout 实现暂停执行的效果
这篇文章主要介绍了js promise 中使用 setTimeout 实现暂停执行的,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-04-04
在使用ECharts绘制折线图时,为了丰富图表的视觉表达,设计师们常常会为视图搭配上不同的图标,下面这篇文章主要给大家介绍了关于Echarts自定义图形的方法参考,需要的朋友可以参考下2023-02-02
今天小编就为大家分享一篇layui表格数据复选框回显设置方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要介绍了document.addEventListener，下面有个示例，大家可以参考下2014-03-03
这篇文章主要为大家介绍了three.js镜头追踪的移动效果实例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
怎么限制input的text里输入的值只能是数字(正则、js)
这篇文章主要通过正则表达式和JS代码限制input的text里输入的值只能是数字的相关资料,需要的朋友可以参考下2016-05-05
闭包是指在 JavaScript 中,内部函数可以访问其外部函数作用域中的变量,即使外部函数已经执行完毕,这种特性被称为闭包,本文将给大家介绍一下JavaScript闭包的优缺点和作用,需要的朋友可以参考下2023-09-09
jQuery ajax(复习)—Baidu ajax request分离版
你没有看错标题，本文的确是在讲Baidu ajax，不过是很久很久以前的版本了,我们先分析一段简单的ajax代码，来自早期的百度七巧板项目通过这个来先复习一遍ajax的知识2013-01-01
javascript表单验证使用示例(javascript验证邮箱)
JavaScript可用来在数据被送往服务器前对HTML表单中的这些输入数据进行验证2014-01-01
最新评论