Erstellen eines dynamischen Deadline-Countdown-Timers in React.js

In der Webentwicklung ist die Anzeige eines Countdown-Timers eine häufige Funktion für E-Commerce-Websites, insbesondere für Verkaufsveranstaltungen oder zeitlich begrenzte Angebote. Die Herausforderung besteht darin, einen dynamischen und optisch ansprechenden Countdown-Timer zu erstellen, ohne auf externe Bibliotheken angewiesen zu sein und eine effiziente Leistung und nahtlose Integration in jede React-Anwendung sicherzustellen.

Countdown-Timer sind unerlässlich, um bei Verkaufs- und Werbeveranstaltungen Dringlichkeit zu schaffen. Sie ermutigen Benutzer, Maßnahmen zu ergreifen, bevor der Timer abläuft, und machen sie zu einem leistungsstarken Werkzeug für Marketingstrategien. In diesem Beitrag werde ich Sie durch den Prozess der Erstellung eines dynamischen Countdown-Timers mit React.js und Tailwind CSS führen. Wir untersuchen, wie Sie die verbleibende Zeit bis zu einem bestimmten Termin berechnen und in einem benutzerfreundlichen Format anzeigen können.

Wir erstellen in React.js eine wiederverwendbare Countdown-Timer-Komponente, die die verbleibende Zeit bis zu einem bestimmten Stichtag berechnet und die Benutzeroberfläche jede Sekunde aktualisiert. Die Komponente wird mit Tailwind CSS gestaltet, um ein modernes und ansprechendes Design zu gewährleisten. Ziel ist es, einen Timer zu erstellen, der die Anzahl der Tage, Stunden, Minuten und Sekunden anzeigt, die bis zum Ende des Ereignisses verbleiben.

Erläuterung der Umsetzung:

Schritt 1: Einrichten der React-Komponente

Wir beginnen mit der Erstellung einer Counter-Komponente. Diese Komponente verwaltet den Status für die Tage und die verbleibende Zeit (Stunden, Minuten und Sekunden) bis zum Stichtag.

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,
    });

Hier ist Deadline das Zieldatum und useState wird verwendet, um die verbleibenden Tage und die Zeitkomponenten (Stunden, Minuten, Sekunden) zu speichern.

Schritt 2: Berechnen der verbleibenden Zeit

Im useEffect-Hook definieren wir eine Funktion berechneTimeLeft, die die verbleibende Zeit bis zum Ablauf der Frist berechnet. Die Funktion berechnet die Differenz zwischen der aktuellen Uhrzeit und dem Stichtag und wandelt diese Differenz dann in Tage, Stunden, Minuten und Sekunden um.

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]);

Dieser Hook stellt sicher, dass die verbleibende Zeit jede Sekunde neu berechnet wird, indem setInterval verwendet wird, um den Status zu aktualisieren, was ein erneutes Rendern der Komponente auslöst.

Schritt 3: Anzeigen des Countdown-Timers

Die berechneten Werte werden dann mithilfe der TimeBox-Komponente angezeigt, die jede Zeiteinheit (Tage, Stunden, Minuten, Sekunden) in einem optisch ansprechenden Format darstellt.

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>
);

Die TimeBox-Komponente wird separat definiert, um den Code modular und wiederverwendbar zu machen. Jede TimeBox zeigt eine Beschriftung (z. B. „Tage“) und den entsprechenden Wert an.

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>
);

Schritt 4: Styling mit Tailwind CSS

Wir verwenden Tailwind CSS, um den Countdown-Timer zu gestalten. Die Verwendung von Hilfsklassen wie bg-black, text-white, text-5xl undrounded-xl hilft bei der Erstellung einer modernen und reaktionsfähigen Benutzeroberfläche mit minimalem CSS.

Wenn Sie diesem Ansatz folgen, können Sie eine hochgradig anpassbare und wiederverwendbare Countdown-Timer-Komponente für jede React-Anwendung erstellen. Diese Lösung ist effizient, vermeidet unnötiges erneutes Rendern und bietet mit Tailwind CSS ein klares und modernes Design. Egal, ob Sie an einer E-Commerce-Website oder einem anderen Projekt arbeiten, das einen Countdown erfordert, diese Timer-Komponente lässt sich nahtlos integrieren und verbessert das Benutzererlebnis.

Das obige ist der detaillierte Inhalt vonErstellen eines dynamischen Deadline-Countdown-Timers in React.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!