跳至主要內容
Frutjam logo Frutjam
v2.2.2
Theme

Countdown Component

CSS-only Tailwind CSS countdown timer. Animated number display for days, hours, minutes, and seconds. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.

倒數計時元件顯示活動、截止日期或促銷結束之前的剩餘時間。倒數計時以動畫數字顯示，營造出緊迫感和期待感。 Frutjam 倒數計時系統支援多種尺寸、格式和样式，非常適合閃購、活動計時器、發布倒數計時和限時優惠。

僅 CSS，無需 JavaScript。 WCAG AA 可存取且與框架無關 - 可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。

班級 類型 描述
countdown根據由 --countdown-value 驅動的動畫數字
countdown-xs尺寸特小號
countdown-sm尺寸小的
countdown-md尺寸中（預設）
countdown-lg尺寸大的
countdown-xl尺寸特大號

基本用法

days
hours
min
sec 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div class="grid auto-cols-max grid-flow-col gap-5 text-center">
  <div class="flex flex-col items-center">
    <span class="countdown font-mono text-5xl">
      <span style="--countdown-value:15"></span>
    </span>
    <span class="mt-1 text-sm text-on-base/60">days</span>
  </div>
  <div class="flex flex-col items-center">
    <span class="countdown font-mono text-5xl">
      <span style="--countdown-value:10"></span>
    </span>
    <span class="mt-1 text-sm text-on-base/60">hours</span>
  </div>
  <div class="flex flex-col items-center">
    <span class="countdown font-mono text-5xl">
      <span style="--countdown-value:24"></span>
    </span>
    <span class="mt-1 text-sm text-on-base/60">min</span>
  </div>
  <div class="flex flex-col items-center">
    <span class="countdown font-mono text-5xl">
      <span style="--countdown-value:5"></span>
    </span>
    <span class="mt-1 text-sm text-on-base/60">sec</span>
  </div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
function BasicCountdown() {
  const days    = {"--countdown-value": 15}
  const hours   = {"--countdown-value": 10}
  const minutes = {"--countdown-value": 24}
  const seconds = {"--countdown-value": 5}
  return (
    <div className="grid auto-cols-max grid-flow-col gap-5 text-center">
      <div className="flex flex-col items-center">
        <span className="countdown font-mono text-5xl">
          <span style={days}></span>
        </span>
        <span className="mt-1 text-sm text-on-base/60">days</span>
      </div>
      <div className="flex flex-col items-center">
        <span className="countdown font-mono text-5xl">
          <span style={hours}></span>
        </span>
        <span className="mt-1 text-sm text-on-base/60">hours</span>
      </div>
      <div className="flex flex-col items-center">
        <span className="countdown font-mono text-5xl">
          <span style={minutes}></span>
        </span>
        <span className="mt-1 text-sm text-on-base/60">min</span>
      </div>
      <div className="flex flex-col items-center">
        <span className="countdown font-mono text-5xl">
          <span style={seconds}></span>
        </span>
        <span className="mt-1 text-sm text-on-base/60">sec</span>
      </div>
    </div>
  )
}

盒裝款式

days
hours
min
sec
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<div class="grid auto-cols-max grid-flow-col gap-3 text-center">
  <div class="flex flex-col items-center gap-2">
    <div class="bg-neutral text-on-neutral rounded-box flex items-center justify-center px-4 py-3 min-w-16">
      <span class="countdown font-mono text-4xl">
        <span style="--countdown-value:2"></span>
      </span>
    </div>
    <span class="text-xs uppercase tracking-widest text-on-base/60">days</span>
  </div>
  <div class="flex flex-col items-center gap-2">
    <div class="bg-neutral text-on-neutral rounded-box flex items-center justify-center px-4 py-3 min-w-16">
      <span class="countdown font-mono text-4xl">
        <span style="--countdown-value:18"></span>
      </span>
    </div>
    <span class="text-xs uppercase tracking-widest text-on-base/60">hours</span>
  </div>
  <div class="flex flex-col items-center gap-2">
    <div class="bg-neutral text-on-neutral rounded-box flex items-center justify-center px-4 py-3 min-w-16">
      <span class="countdown font-mono text-4xl">
        <span style="--countdown-value:37"></span>
      </span>
    </div>
    <span class="text-xs uppercase tracking-widest text-on-base/60">min</span>
  </div>
  <div class="flex flex-col items-center gap-2">
    <div class="bg-neutral text-on-neutral rounded-box flex items-center justify-center px-4 py-3 min-w-16">
      <span class="countdown font-mono text-4xl">
        <span style="--countdown-value:20"></span>
      </span>
    </div>
    <span class="text-xs uppercase tracking-widest text-on-base/60">sec</span>
  </div>
</div>

時鐘格式

::
html 
1
2
3
<span class="countdown font-mono text-6xl">
  <span style="--countdown-value:10"></span>:<span style="--countdown-value:24"></span>:<span style="--countdown-value:59"></span>
</span>

倒數尺寸

hours
min
sec
xs
hours
min
sec
sm
hours
min
sec
md
hours
min
sec
lg
hours
min
sec
xl
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<div class="flex flex-col gap-6">
  <div class="grid auto-cols-max grid-flow-col gap-3 text-center">
    <div class="flex flex-col items-center">
      <span class="countdown countdown-xs font-mono"><span style="--countdown-value:10"></span></span>
      <span class="text-xs text-on-base/60">hours</span>
    </div>
    <div class="flex flex-col items-center">
      <span class="countdown countdown-xs font-mono"><span style="--countdown-value:24"></span></span>
      <span class="text-xs text-on-base/60">min</span>
    </div>
    <div class="flex flex-col items-center">
      <span class="countdown countdown-xs font-mono"><span style="--countdown-value:5"></span></span>
      <span class="text-xs text-on-base/60">sec</span>
    </div>
    <span class="self-center text-xs text-on-base/40">xs</span>
  </div>

  <div class="grid auto-cols-max grid-flow-col gap-3 text-center">
    <div class="flex flex-col items-center">
      <span class="countdown countdown-sm font-mono"><span style="--countdown-value:10"></span></span>
      <span class="text-xs text-on-base/60">hours</span>
    </div>
    <div class="flex flex-col items-center">
      <span class="countdown countdown-sm font-mono"><span style="--countdown-value:24"></span></span>
      <span class="text-xs text-on-base/60">min</span>
    </div>
    <div class="flex flex-col items-center">
      <span class="countdown countdown-sm font-mono"><span style="--countdown-value:5"></span></span>
      <span class="text-xs text-on-base/60">sec</span>
    </div>
    <span class="self-center text-xs text-on-base/40">sm</span>
  </div>

  <div class="grid auto-cols-max grid-flow-col gap-4 text-center">
    <div class="flex flex-col items-center">
      <span class="countdown countdown-md font-mono"><span style="--countdown-value:10"></span></span>
      <span class="text-xs text-on-base/60">hours</span>
    </div>
    <div class="flex flex-col items-center">
      <span class="countdown countdown-md font-mono"><span style="--countdown-value:24"></span></span>
      <span class="text-xs text-on-base/60">min</span>
    </div>
    <div class="flex flex-col items-center">
      <span class="countdown countdown-md font-mono"><span style="--countdown-value:5"></span></span>
      <span class="text-xs text-on-base/60">sec</span>
    </div>
    <span class="self-center text-xs text-on-base/40">md</span>
  </div>

  <div class="grid auto-cols-max grid-flow-col gap-5 text-center">
    <div class="flex flex-col items-center">
      <span class="countdown countdown-lg font-mono"><span style="--countdown-value:10"></span></span>
      <span class="text-sm text-on-base/60">hours</span>
    </div>
    <div class="flex flex-col items-center">
      <span class="countdown countdown-lg font-mono"><span style="--countdown-value:24"></span></span>
      <span class="text-sm text-on-base/60">min</span>
    </div>
    <div class="flex flex-col items-center">
      <span class="countdown countdown-lg font-mono"><span style="--countdown-value:5"></span></span>
      <span class="text-sm text-on-base/60">sec</span>
    </div>
    <span class="self-center text-xs text-on-base/40">lg</span>
  </div>

  <div class="grid auto-cols-max grid-flow-col gap-6 text-center">
    <div class="flex flex-col items-center">
      <span class="countdown countdown-xl font-mono"><span style="--countdown-value:10"></span></span>
      <span class="text-sm text-on-base/60">hours</span>
    </div>
    <div class="flex flex-col items-center">
      <span class="countdown countdown-xl font-mono"><span style="--countdown-value:24"></span></span>
      <span class="text-sm text-on-base/60">min</span>
    </div>
    <div class="flex flex-col items-center">
      <span class="countdown countdown-xl font-mono"><span style="--countdown-value:5"></span></span>
      <span class="text-sm text-on-base/60">sec</span>
    </div>
    <span class="self-center text-xs text-on-base/40">xl</span>
  </div>
</div>

現場倒數

days
hours
min
sec
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<div class="grid auto-cols-max grid-flow-col gap-5 text-center" id="live-timer">
  <div class="flex flex-col items-center">
    <span class="countdown font-mono text-5xl">
      <span id="cd-days" style="--countdown-value:0"></span>
    </span>
    <span class="mt-1 text-sm text-on-base/60">days</span>
  </div>
  <div class="flex flex-col items-center">
    <span class="countdown font-mono text-5xl">
      <span id="cd-hours" style="--countdown-value:0"></span>
    </span>
    <span class="mt-1 text-sm text-on-base/60">hours</span>
  </div>
  <div class="flex flex-col items-center">
    <span class="countdown font-mono text-5xl">
      <span id="cd-minutes" style="--countdown-value:0"></span>
    </span>
    <span class="mt-1 text-sm text-on-base/60">min</span>
  </div>
  <div class="flex flex-col items-center">
    <span class="countdown font-mono text-5xl">
      <span id="cd-seconds" style="--countdown-value:0"></span>
    </span>
    <span class="mt-1 text-sm text-on-base/60">sec</span>
  </div>
</div>
<script>
const target = new Date(Date.now() + 2 * 24 * 60 * 60 * 1000);

function update() {
  const diff = Math.max(0, target - Date.now());
  document.getElementById('cd-days').style.setProperty('--countdown-value', Math.floor(diff / 86400000));
  document.getElementById('cd-hours').style.setProperty('--countdown-value', Math.floor((diff % 86400000) / 3600000));
  document.getElementById('cd-minutes').style.setProperty('--countdown-value', Math.floor((diff % 3600000) / 60000));
  document.getElementById('cd-seconds').style.setProperty('--countdown-value', Math.floor((diff % 60000) / 1000));
}

update();
setInterval(update, 1000);
</script>

活動倒數

Flash Sale Ends In

Don't Miss Out!

days
hours
min
sec
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<div class="card bg-linear-to-br from-primary to-secondary shadow-lg max-w-sm">
  <div class="card-content">
    <p class="text-sm font-semibold uppercase tracking-widest text-white/80">Flash Sale Ends In</p>
    <h2 class="card-title text-2xl mt-1 text-white">Don't Miss Out!</h2>
    <div class="grid auto-cols-max grid-flow-col gap-4 text-center mt-4">
      <div class="flex flex-col items-center">
        <div class="bg-white/20 rounded-lg px-4 py-2 min-w-14">
          <span class="countdown font-mono text-4xl font-bold text-white">
            <span style="--countdown-value:2"></span>
          </span>
        </div>
        <span class="mt-1 text-xs text-white/75">days</span>
      </div>
      <div class="flex flex-col items-center">
        <div class="bg-white/20 rounded-lg px-4 py-2 min-w-14">
          <span class="countdown font-mono text-4xl font-bold text-white">
            <span style="--countdown-value:18"></span>
          </span>
        </div>
        <span class="mt-1 text-xs text-white/75">hours</span>
      </div>
      <div class="flex flex-col items-center">
        <div class="bg-white/20 rounded-lg px-4 py-2 min-w-14">
          <span class="countdown font-mono text-4xl font-bold text-white">
            <span style="--countdown-value:37"></span>
          </span>
        </div>
        <span class="mt-1 text-xs text-white/75">min</span>
      </div>
      <div class="flex flex-col items-center">
        <div class="bg-white/20 rounded-lg px-4 py-2 min-w-14">
          <span class="countdown font-mono text-4xl font-bold text-white">
            <span style="--countdown-value:20"></span>
          </span>
        </div>
        <span class="mt-1 text-xs text-white/75">sec</span>
      </div>
    </div>
  </div>
</div>