JS利用時(shí)間戳倒計(jì)時(shí)的實(shí)現(xiàn)示例
我們在逛某寶，或者逛某東時(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í)分秒寫到對應(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- js實(shí)現(xiàn)日期天數(shù)、時(shí)分秒的倒計(jì)時(shí)完整代碼
- JavaScript實(shí)現(xiàn)倒計(jì)時(shí)功能2種方法實(shí)例
- JavaScript倒計(jì)時(shí)定時(shí)器和間隔定時(shí)器使用詳解
- 一步步教你用js簡單實(shí)現(xiàn)新年倒計(jì)時(shí)
- JS實(shí)現(xiàn)簡單網(wǎng)頁倒計(jì)時(shí)器
- javascript實(shí)現(xiàn)倒計(jì)時(shí)小案例
- JavaScript實(shí)現(xiàn)簡單的倒計(jì)時(shí)效果
- 用JS寫了一個(gè)30分鐘倒計(jì)時(shí)器的實(shí)現(xià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)頁圖片延時(shí)加載 提升網(wǎng)頁打開速度
這篇文章主要為大家介紹了js實(shí)現(xiàn)網(wǎng)頁圖片延時(shí)加載,提升網(wǎng)頁打開速度，感興趣的小伙伴們可以參考一下2016-01-01![javascript 獲取radio的value的函數(shù) [已測]](http://img.jbzj.com/images/xgimg/bcimg2.png)
javascript 獲取radio的value的函數(shù) [已測]
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)記、解析流程、常見場景和性能優(yōu)化建議,需要的朋友可以參考下2025-10-10
SVG是一種繪圖技術(shù),SVG的全名叫可縮放矢量圖形,這篇文章主要介紹了前端引入及使用svg圖片的多種方式大全,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-11-11
Bootstrap幻燈片輪播圖支持觸屏左右手勢滑動(dòng)的實(shí)現(xiàn)方法
最近在研究用bootstrap搭建網(wǎng)站，Bootstrap能自適應(yīng)pc端和手機(jī)端，并且移動(dòng)設(shè)備優(yōu)先，適合現(xiàn)如今移動(dòng)營銷，大家用的設(shè)備基本是觸屏的了，能用滑動(dòng)交互在小屏幕上體驗(yàn)會(huì)更好，那么如何實(shí)現(xiàn)呢？下面小編給大家介紹下bootstrap 手勢滑動(dòng)輪播圖的實(shí)現(xiàn)方法2016-10-10
雖然現(xiàn)在不聯(lián)網(wǎng)的情況很少，但在本機(jī)上搭建一份Bootstrap離線文檔以備不時(shí)之需也是很有必要的。下面就給大家分享下搭建Bootstrap離線文檔的方法，感興趣的朋友一起看看吧2016-12-12
javascript讀取xml實(shí)現(xiàn)javascript分頁
這篇文章主要介紹了javascript讀取xml數(shù)據(jù)對其實(shí)現(xiàn)javascript分頁效果，大家參考使用吧2013-12-12
TypeScript高級(jí)用法的知識(shí)點(diǎn)匯總
這篇文章主要給大家介紹了關(guān)于TypeScript高級(jí)用法的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(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