JS 倒計時效果

2022-09-17 05:12:17 字數 454 閱讀 6920

今天給表弟逛網上**看膝上型電腦時,看見有一些顯示倒計時的效果,覺得蠻好的,特別去查了下,今天給大家分享下倒計時的製作,如有缺漏請大家指出。

但不單單是這樣的計算,畢竟有可能存在這種情況:截止時間(2019-8-17   3:20:10),現在時間(2019-8-16 15:35:20),這中間時分秒相減會為負數,所以一般我們會換成統一單位再進行相減,再換回去。

時間換算進製:

一天=24小時=(24*60)分=(24*60*60)秒

所以我們用時間戳來做,詳細公式是:剩餘時間毫秒數(倒計時)=截止時間毫秒數 - 現在時間毫秒數。

首先我們先了解怎麼獲取當前時間的時間戳,有以下幾種方法,大家挑著用

接著就是時間戳毫秒數轉換成特定的天,時,分,秒

最後就是就是倒計時效果的實現

倒計時效果

案例分析 1.這個倒計時是不斷變化的,因此需要定時器來自動變化 setinterval 2.三個黑色盒子分別存放時分秒 3.三個黑色盒子利用innerhtml放入計算的小時分鐘秒數 4.第一次執行也是間隔毫秒數,因此剛重新整理頁面會有空白 5.最好採取封裝函式的方式,這樣可以先呼叫一次這個函式,防止...

JS實現倒計時效果

效果 倒計時效果 title div style head h 1 div m 2 div s 3 div 獲取時分秒 var hour document.queryselector h var minute document.queryselector m var second document....

前端倒計時效果

分析 charset utf 8 網易雲 title divspan style head type button class start 開啟定時器button type button class stop 暫停定時器button 距離2020年12月份四級考試還有p class day span...