在 React.js 中建立動態截止日期倒數計時器-js教程-PHP中文網

在 React.js 中建立動態截止日期倒數計時器

PHPz

發布： 2024-08-11 06:30:32

原創

1044 人瀏覽過

Building a Dynamic Deadline Countdown Timer in React.js

在 Web 開發中，顯示倒數計時器是電子商務網站的常見功能，特別是對於銷售活動或限時優惠。面臨的挑戰是在不依賴外部程式庫的情況下創建一個動態且具有視覺吸引力的倒數計時器，確保高效的性能並無縫整合到任何 React 應用程式中。

倒數計時器對於在銷售和促銷活動中營造緊迫感至關重要。它們鼓勵用戶在計時器用完之前採取行動，使它們成為行銷策略的強大工具。在這篇文章中，我將引導您完成使用 React.js 和 Tailwind CSS 建立動態倒數計時器的過程。我們將探索如何計算特定截止日期之前的剩餘時間並以用戶友好的格式顯示它。

我們將在 React.js 中建立一個可重複使用的倒數計時器元件，用於計算指定截止日期之前的剩餘時間並每秒更新 UI。該元件將使用 Tailwind CSS 進行樣式設置，以確保現代且響應式的設計。目標是建立一個計時器，顯示活動結束前剩餘的天數、小時數、分鐘數和秒數。

實施說明：

第 1 步：設定 React 元件

我們將從建立一個 Counter 元件開始。此元件將管理截止日期之前的天數和剩餘時間（小時、分鐘和秒）的狀態。

import React, { useState, useEffect } from 'react';

const Counter = () => {
    const deadline = new Date('December 31 2024');
    const [days, setDays] = useState(0);
    const [timer, setTimer] = useState({
        hours: 0,
        minutes: 0,
        seconds: 0,
    });

登入後複製

這裡，deadline 是目標日期，useState 用來儲存剩餘天數和時間組成部分（小時、分鐘、秒）。

第 2 步：計算剩餘時間

在 useEffect 掛鉤內，我們定義了一個函數calculateTimeLeft，用於計算截止日期之前的剩餘時間。此函數計算當前時間與截止時間之間的差值，然後將該差值轉換為天、小時、分鐘和秒。

useEffect(() => {
    const calculateTimeLeft = () => {
        const currentDate = new Date();
        const timeLeft = deadline.getTime() - currentDate.getTime();

        const days = Math.floor(timeLeft / (24 * 60 * 60 * 1000));
        const hours = 23 - currentDate.getHours();
        const minutes = 59 - currentDate.getMinutes();
        const seconds = 59 - currentDate.getSeconds();

        setDays(days);
        setTimer({ hours, minutes, seconds });
    };

    calculateTimeLeft();
    const intervalId = setInterval(calculateTimeLeft, 1000);

    return () => clearInterval(intervalId);
}, [deadline]);

登入後複製

此鉤子確保透過使用 setInterval 更新狀態來每秒重新計算剩餘時間，從而觸發元件的重新渲染。

步驟 3：顯示倒數計時器

然後使用 TimeBox 元件顯示計算值，該元件以視覺上吸引人的格式呈現每個時間單位（天、小時、分鐘、秒）。

return (
    <div className='w-full h-screen bg-black flex items-center justify-center'>
        <div className="w-full h-auto bg-black grid grid-cols-1 gap-8 place-items-center">
            <h1 className="text-5xl font-extrabold text-white">Sales Ends In</h1>
            <div className="w-fit h-auto overflow-hidden grid grid-cols-4 gap-4 place-items-center">
                <TimeBox label="Days" value={days} />
                <TimeBox label="Hours" value={timer.hours} />
                <TimeBox label="Minutes" value={timer.minutes} />
                <TimeBox label="Seconds" value={timer.seconds} />
            </div>
        </div>
    </div>
);

登入後複製

TimeBox元件單獨定義，使程式碼模組化且可重複使用。每個時間框顯示一個標籤（例如“天”）和相應的值。

const TimeBox = ({ label, value }) => (
    <div className="w-24 h-24 bg-red rounded-xl p-4">
        <p className="text-center text-yellow font-bold">{label}</p>
        <p className="text-center font-bold text-2xl text-white">{value}</p>
    </div>
);

登入後複製