原生js關於倒計時的原理

2022-05-23 11:00:06 字數 612 閱讀 5452

倒計時經常會在專案中或者電商類**比如**或者拼單等等中會有出現,今天就了解一下它的原理,然後寫乙個簡單的倒計時例子。

其實關於倒計時原理很簡單:就是用未來的時間減去去現在的時間然後換算即可。(未來的時間點(不變)減現在的時間點(在變))。

來看簡單的例子:計算一下距離今年五一還有多長時間?

直接來看**:

布局:

<

span

>距離2023年5月1日還有多長時間?

span

>

<

p id

="time"

>

p>

那麼js**:

這樣結果就出來了。還有需要記住的固定公式有:

//

下面即為具體演算法公式關於時分秒以及天,下面的t即為未來時間減現在時間的乙個差

天:math.floor(t/86400)

時:math.floor(t%86400/3600)

分:math.floor(t%86400%3600/60)

秒:t%60

就是這些,好了,你也可以設定乙個未來時間來計算一下了。這就是簡單的倒計時原理!

js倒計時,秒倒計時,天倒計時

html 1 html 2 距某某開幕式還有 天 html html html id timer style color red 這次利用系統時間自校驗倒計時,無需手工調校使得倒計時更為精確,及詳細注釋如下 id clock 00 01 11 00 id startb type button val...

js 多個倒計時,毫秒倒計時

其實主要是借鑑了了這篇文的寫法 俺稍作了修改,以便更適合我的需要 實現功能 呼叫乙個函式,傳入html元素的id,和乙個截止時間 unix時間戳 在該html元素中列印出到當前到截止時間為止的倒計時,精確到毫秒 效果圖如下 h2 毫秒的倒計時 h2 div id timer1 div div id ...

JS 簡易倒計時

簡易倒計時,非常簡單。這裡主要用到了setinterval 和clearinterval 方法 定義 setinterval 方法可按照指定的週期 以毫秒計 來呼叫函式或計算表示式。setinteral 方法會不停地呼叫函式,直到clearinterval 被呼叫或視窗被關閉。由setinterva...