React.js で動的なデッドライン カウントダウン タイマーを構築する

Web 開発では、カウントダウン タイマーの表示は、電子商取引サイト、特にセール イベントや期間限定のオファーで一般的な機能です。課題は、外部ライブラリに依存せずに動的で視覚的に魅力的なカウントダウン タイマーを作成し、効率的なパフォーマンスと React アプリケーションへのシームレスな統合を確保することです。

カウントダウン タイマーは、販売やプロモーション イベントで緊急性を高めるために不可欠です。タイマーが切れる前にユーザーにアクションを起こすよう促し、マーケティング戦略における強力なツールとなります。この投稿では、React.js と Tailwind CSS を使用して動的なカウントダウン タイマーを構築するプロセスを説明します。特定の期限までの残り時間を計算し、使いやすい形式で表示する方法を検討します。

指定された期限までの残り時間を計算し、UI を毎秒更新する再利用可能なカウントダウン タイマー コンポーネントを React.js で構築します。コンポーネントは、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,
    });

ここで、期限は目標日であり、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 を使用して状態を更新することにより、残り時間が 1 秒ごとに再計算され、コンポーネントの再レンダリングがトリガーされます。

ステップ 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 コンポーネントはコードをモジュール化して再利用可能にするために個別に定義されています。各 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>
);

ステップ 4: Tailwind CSS を使用したスタイル設定

Tailwind CSS を使用してカウントダウン タイマーのスタイルを設定します。 bg-black、text-white、text-5xl、rounded-xl などのユーティリティ クラスを使用すると、最小限の CSS で最新の応答性の高い UI を作成するのに役立ちます。

このアプローチに従うことで、あらゆる React アプリケーション用に、高度にカスタマイズ可能で再利用可能なカウントダウン タイマー コンポーネントを作成できます。このソリューションは効率的で、不必要な再レンダリングを回避し、Tailwind CSS を使用したクリーンでモダンなデザインを提供します。電子商取引サイトで作業している場合でも、カウントダウンが必要なその他のプロジェクトで作業している場合でも、このタイマー コンポーネントはシームレスに統合され、ユーザー エクスペリエンスを向上させます。

以上がReact.js で動的なデッドライン カウントダウン タイマーを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。