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实现addClass,removeClass,hasClass函数
这篇文章主要介绍了原生javascript实现addClass,removeClass,hasClass函数的相关代码，有需要的小伙伴可以参考下2016-02-02
这篇文章主要为大家介绍了js实现网页图片延时加载,提升网页打开速度，感兴趣的小伙伴们可以参考一下2016-01-01![javascript 获取radio的value的函数 [已测]](//img.jbzj.com/images/xgimg/bcimg2.png)
javascript 获取radio的value的函数 [已测]
javascript 获取radio的value的函数 如果与asp,php等后台语言结合时，一般用不到，但在纯js环境下是必须的。2009-06-06
这篇文章主要介绍了如何优雅地实现一个时间处理插件,包括UMD模式、单例模式的实现,以及插件的初始化、方法（如getDate、setDate、format、parse）的定义和使用,文章还涵盖了格式化标记、解析流程、常见场景和性能优化建议,需要的朋友可以参考下2025-10-10
SVG是一种绘图技术,SVG的全名叫可缩放矢量图形,这篇文章主要介绍了前端引入及使用svg图片的多种方式大全,文中通过代码介绍的非常详细,需要的朋友可以参考下2025-11-11
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
最近在研究用bootstrap搭建网站，Bootstrap能自适应pc端和手机端，并且移动设备优先，适合现如今移动营销，大家用的设备基本是触屏的了，能用滑动交互在小屏幕上体验会更好，那么如何实现呢？下面小编给大家介绍下bootstrap 手势滑动轮播图的实现方法2016-10-10
虽然现在不联网的情况很少，但在本机上搭建一份Bootstrap离线文档以备不时之需也是很有必要的。下面就给大家分享下搭建Bootstrap离线文档的方法，感兴趣的朋友一起看看吧2016-12-12
这篇文章主要介绍了javascript读取xml数据对其实现javascript分页效果，大家参考使用吧2013-12-12
这篇文章主要给大家介绍了关于TypeScript高级用法的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用TypeScript具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-12-12
一文让你彻底搞懂TypeScript(TS)和JavaScript(JS)区别与联系
TS是JS的超集,是一个可选的、静态的类型系统,下面这篇文章主要介绍了关于TypeScript(TS)和JavaScript(JS)区别与联系的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2025-04-04
![javascript 获取radio的value的函数 [已测]](http://img.jbzj.com/images/xgimg/bcimg2.png)
最新评论