JS利用时间戳倒计时案例

简介: 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)

效果图:

感谢大家的阅读,如有不对地方,可以向我提出,感谢大家!

相关文章
|
7天前
|
数据采集 存储 JavaScript
JS逆向案例:巨潮资讯数据采集
JS逆向案例:巨潮资讯数据采集
9 0
|
14天前
|
JavaScript API 图形学
一个案例带你从零入门Three.js,深度好文!
【8月更文挑战第1天】本教程无需任何Threejs知识!本教程以入门为主,带你快速了解Three.js开发
44 2
一个案例带你从零入门Three.js,深度好文!
|
4天前
|
JavaScript 前端开发
javascript中常见获取时间戳的方法
javascript中常见获取时间戳的方法
10 0
|
4天前
|
前端开发 JavaScript 开发者
fuse.js前端搜索简单使用的三个案例
通过这三个例子可以看出,Fuse.js 是一个功能丰富、易于实现的前端搜索库。它使开发者能够便捷地实现从基础到高级的搜索功能,无论是简单的列表搜索还是实时的搜索建议,都能够高效、精确地提供给用户所需的信息。
7 0
|
6天前
|
JavaScript 前端开发 开发者
Vue.js 2 项目实战(四):成绩案例
Vue.js 2 项目实战(四):成绩案例
|
6天前
|
JavaScript 前端开发 开发者
Vue.js 2 项目实战(三):综合案例-小黑记事本
Vue.js 2 项目实战(三):综合案例-小黑记事本
|
6天前
|
JavaScript 前端开发 开发者
Vue.js 2 项目实战(二):图书管理案例
Vue.js 2 项目实战(二):图书管理案例
|
6天前
|
JavaScript 前端开发 开发者
Vue.js 2 项目实战(一):图片切换案例
Vue.js 2 项目实战(一):图片切换案例
|
1月前
|
数据采集 JSON JavaScript
JS逆向-反反爬案例
破解爬虫JS加密反爬, 逆向JS解析
|
1月前
|
JavaScript 前端开发 API
JS案例:在浏览器实现自定义菜单
JS案例:在浏览器实现自定义菜单
20 0