快捷導(dǎo)航

JS利用時(shí)間戳倒計(jì)時(shí)的實(shí)現(xiàn)示例

更新時(shí)間：2023年12月04日 15:40:17 作者：遠(yuǎn)近高低各不同

這篇文章主要介紹了JS利用時(shí)間戳倒計(jì)時(shí)的實(shí)現(xiàn)示例,本文將提供代碼示例和詳細(xì)的步驟,幫助你實(shí)現(xiàn)一個(gè)簡(jiǎn)單而實(shí)用的時(shí)間戳倒計(jì)時(shí),感興趣的可以了解一下

我們?cè)诠淠硨?，或者逛某東時(shí)，我們時(shí)?？吹揭粋€(gè)倒計(jì)時(shí)，時(shí)間一到就開搶，這個(gè)倒計(jì)時(shí)是如何做的呢？讓我為大家介紹一下。

理性分析一下：

1.用將來時(shí)間減去現(xiàn)在時(shí)間就是剩余的時(shí)間
2.核心：使用將來的時(shí)間戳減去現(xiàn)在的時(shí)間戳
3.把剩余的時(shí)間轉(zhuǎn)換為天時(shí) 分秒注意：通過時(shí)間戳得到的是毫秒，需要轉(zhuǎn)換為秒在計(jì)算

轉(zhuǎn)換公式：

d = parseInt(總秒數(shù) / 60 / 60 / 24) 計(jì)算天數(shù)
h = parseInt(總秒數(shù) / 60 / 60 % 24) 計(jì)算小時(shí)
m = parseInt(總秒數(shù) / 60 % 60) 計(jì)算分?jǐn)?shù)
s = parseInt(總秒數(shù) % 60) 計(jì)算當(dāng)前秒數(shù)

    // 封裝時(shí)間
    function getTime() {
        // 獲取當(dāng)前的時(shí)間戳
        let now = +new Date()
        // 獲取將來的時(shí)間戳
        let last = +new Date("2023-11-3 18:30:00")
        // 獲取剩余的時(shí)間戳 記得轉(zhuǎn)換為秒數(shù)
        let count = (last - now) / 1000
        // 轉(zhuǎn)換為時(shí)分秒
        // h = parseInt(總秒數(shù) / 60 / 60 % 24) 計(jì)算小時(shí)
        // m = parseInt(總秒數(shù) / 60 % 60) 計(jì)算分?jǐn)?shù)
        // s = parseInt(總秒數(shù) % 60) 計(jì)算當(dāng)前秒數(shù)
        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
        // 把時(shí)分秒寫到對(duì)應(yīng)的盒子里面
        document.querySelector("#hour").innerHTML = h
        document.querySelector("#minutes").innerHTML = m
        document.querySelector("#second").innerHTML = s
    }
    // 使用定時(shí)器
    setInterval(getTime,1000)

效果圖：

到此這篇關(guān)于JS利用時(shí)間戳倒計(jì)時(shí)的實(shí)現(xiàn)示例的文章就介紹到這了,更多相關(guān)JS 時(shí)間戳倒計(jì)時(shí)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

原生javascript實(shí)現(xiàn)addClass,removeClass,hasClass函數(shù)
這篇文章主要介紹了原生javascript實(shí)現(xiàn)addClass,removeClass,hasClass函數(shù)的相關(guān)代碼，有需要的小伙伴可以參考下
2016-02-02
js實(shí)現(xiàn)網(wǎng)頁(yè)圖片延時(shí)加載提升網(wǎng)頁(yè)打開速度
這篇文章主要為大家介紹了js實(shí)現(xiàn)網(wǎng)頁(yè)圖片延時(shí)加載,提升網(wǎng)頁(yè)打開速度，感興趣的小伙伴們可以參考一下
2016-01-01
javascript 獲取radio的value的函數(shù) [已測(cè)]
javascript 獲取radio的value的函數(shù) 如果與asp,php等后臺(tái)語言結(jié)合時(shí)，一般用不到，但在純js環(huán)境下是必須的。
2009-06-06
基于JavaScript優(yōu)雅的實(shí)現(xiàn)一個(gè)時(shí)間處理插件
這篇文章主要介紹了如何優(yōu)雅地實(shí)現(xiàn)一個(gè)時(shí)間處理插件,包括UMD模式、單例模式的實(shí)現(xiàn),以及插件的初始化、方法（如getDate、setDate、format、parse）的定義和使用,文章還涵蓋了格式化標(biāo)記、解析流程、常見場(chǎng)景和性能優(yōu)化建議,需要的朋友可以參考下
2025-10-10
前端引入及使用svg圖片的多種方式大全
SVG是一種繪圖技術(shù),SVG的全名叫可縮放矢量圖形,這篇文章主要介紹了前端引入及使用svg圖片的多種方式大全,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2025-11-11
Bootstrap幻燈片輪播圖支持觸屏左右手勢(shì)滑動(dòng)的實(shí)現(xiàn)方法
最近在研究用bootstrap搭建網(wǎng)站，Bootstrap能自適應(yīng)pc端和手機(jī)端，并且移動(dòng)設(shè)備優(yōu)先，適合現(xiàn)如今移動(dòng)營(yíng)銷，大家用的設(shè)備基本是觸屏的了，能用滑動(dòng)交互在小屏幕上體驗(yàn)會(huì)更好，那么如何實(shí)現(xiàn)呢？下面小編給大家介紹下bootstrap 手勢(shì)滑動(dòng)輪播圖的實(shí)現(xiàn)方法
2016-10-10
搭建Bootstrap離線文檔的方法
雖然現(xiàn)在不聯(lián)網(wǎng)的情況很少，但在本機(jī)上搭建一份Bootstrap離線文檔以備不時(shí)之需也是很有必要的。下面就給大家分享下搭建Bootstrap離線文檔的方法，感興趣的朋友一起看看吧
2016-12-12
javascript讀取xml實(shí)現(xiàn)javascript分頁(yè)
這篇文章主要介紹了javascript讀取xml數(shù)據(jù)對(duì)其實(shí)現(xiàn)javascript分頁(yè)效果，大家參考使用吧
2013-12-12
TypeScript高級(jí)用法的知識(shí)點(diǎn)匯總
這篇文章主要給大家介紹了關(guān)于TypeScript高級(jí)用法的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用TypeScript具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2019-12-12
一文讓你徹底搞懂TypeScript(TS)和JavaScript(JS)區(qū)別與聯(lián)系
TS是JS的超集,是一個(gè)可選的、靜態(tài)的類型系統(tǒng),下面這篇文章主要介紹了關(guān)于TypeScript(TS)和JavaScript(JS)區(qū)別與聯(lián)系的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2025-04-04