在网页中,我们常常会需要倒计时功能,比如拍卖结束倒计时、秒杀活动倒计时等。本文将介绍最全面的JS倒计时代码实现方法,包含了基础的倒计时功能、倒计时样式定制、倒计时精度控制以及倒计时结束回调函数等方面。
基础倒计时代码实现
首先来看如何实现一个基础的倒计时功能。
-------- --------------------- - ----- --- - --- ----------------- ----- -------- - ---------- - ---- ----- ---- - ------------------- - ----- - -- - -- - ----- ----- ----- - -------------------- - ----- - -- - -- - ---- - ----- - -- - ----- ----- ------- - -------------------- - ----- - -- - ---- - ----- - ----- ----- ------- - -------------------- - ----- - ---- - ------ ------ --------- ---------- ------------ ------------- -
这段代码接受一个目标时间戳 targetTime
,返回距离这个时间还有多久。其中使用了 Date
对象获取当前时间,并通过数学运算得出距离。最后将距离格式化为字符串并返回。
倒计时样式定制
接下来我们来看如何为倒计时添加样式。我们可以传入一个 DOM 元素和一个样式对象,将样式应用到这个元素上。
-------- -------------------- ------- - --- ------ -------- -- ------- - ----------------------- - ----------------- - - -------- --------------------- -------- ------- - ----- --- - --- ----------------- ----- -------- - ---------- - ---- ----- ---- - ------------------- - ----- - -- - -- - ----- ----- ----- - -------------------- - ----- - -- - -- - ---- - ----- - -- - ----- ----- ------- - -------------------- - ----- - -- - ---- - ----- - ----- ----- ------- - -------------------- - ----- - ---- - ------ ----- ---- - --------- ---------- ------------ ------------- ----------------- - ----- -- -------- - -------------------- -------- - -
在这段代码中,我们新增了两个参数,分别为要应用样式的 DOM 元素和样式对象。在倒计时计算出结果后,我们将文本设置为 DOM 元素的 innerText
属性,并调用新定义的 applyStyles
函数将样式应用到这个元素上。
倒计时精度控制
现在我们已经能够实现基础的倒计时功能和样式定制,但是默认情况下我们只能得到倒计时到秒的精度。如果我们需要更高的精度,该怎么办呢?
我们可以通过 setInterval
函数周期性地更新倒计时,并在每次更新时重新计算距离。下面是实现代码。
-------- --------------------- -------- ------- --------- - ----- - -------- ------------------- - ----- --- - --- ----------------- ------ ---------- - ---- - -------- ----------------- - ----- -------- - -------------------- -- --------- - -- - -------------------------- -- ------- -------- --- ----------- - ----------- - ------- - ----- ---- - ------------------- - ----- - -- - -- - ----- ----- ----- - -------------------- - ----- - -- - -- - ---- - ----- - -- - ----- ----- ------- - -------------------- - ----- - -- - ---- - ----- ---------------------------------------------------------- ---------- -------------------------------------------------------------------------------------