Membina Pemasa Undur Tarikh Akhir Dinamik dalam React.js

Dalam pembangunan web, memaparkan pemasa kira detik ialah ciri biasa untuk tapak e-dagang, terutamanya untuk acara jualan atau tawaran masa terhad. Cabarannya ialah untuk mencipta pemasa kira detik yang dinamik dan menarik secara visual tanpa bergantung pada perpustakaan luaran, memastikan prestasi yang cekap dan penyepaduan yang lancar ke dalam mana-mana aplikasi React.

Pemasa undur adalah penting untuk mewujudkan keperluan mendesak dalam acara jualan dan promosi. Mereka menggalakkan pengguna untuk mengambil tindakan sebelum pemasa kehabisan, menjadikan mereka alat yang berkuasa dalam strategi pemasaran. Dalam siaran ini, saya akan membimbing anda melalui proses membina pemasa kira detik dinamik menggunakan React.js dan Tailwind CSS. Kami akan meneroka cara mengira baki masa sehingga tarikh akhir tertentu dan memaparkannya dalam format yang mesra pengguna.

Kami akan membina komponen pemasa undur boleh guna semula dalam React.js yang mengira baki masa sehingga tarikh akhir yang ditentukan dan mengemas kini UI setiap saat. Komponen tersebut akan digayakan menggunakan CSS Tailwind untuk memastikan reka bentuk yang moden dan responsif. Matlamatnya ialah untuk mencipta pemasa yang memaparkan bilangan hari, jam, minit dan saat yang tinggal sehingga acara tamat.

Penjelasan Pelaksanaan:

Langkah 1: Sediakan Komponen React

Kita akan mulakan dengan mencipta komponen Kaunter. Komponen ini akan mengurus keadaan untuk hari dan masa yang tinggal (jam, minit dan saat) sehingga tarikh akhir.

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

Di sini, tarikh akhir ialah tarikh sasaran dan useState digunakan untuk menyimpan hari yang tinggal dan komponen masa (jam, minit, saat).

Langkah 2: Mengira Masa Tinggal

Di dalam cangkuk useEffect, kami mentakrifkan fungsi calculateTimeLeft yang mengira baki masa sehingga tarikh akhir. Fungsi mengira perbezaan antara masa semasa dan tarikh akhir, kemudian menukar perbezaan ini kepada hari, jam, minit dan saat.

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

Cakuk ini memastikan bahawa masa yang tinggal dikira semula setiap saat dengan menggunakan setInterval untuk mengemas kini keadaan, yang mencetuskan pemaparan semula komponen.

Langkah 3: Memaparkan Pemasa Undur

Nilai yang dikira kemudiannya dipaparkan menggunakan komponen TimeBox, yang memaparkan setiap unit masa (hari, jam, minit, saat) dalam format yang menarik secara visual.

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

Komponen TimeBox ditakrifkan secara berasingan untuk menjadikan kod modular dan boleh digunakan semula. Setiap TimeBox memaparkan label (cth., "Hari") dan nilai yang sepadan.

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

Langkah 4: Menggayakan dengan CSS Tailwind

Kami menggunakan CSS Tailwind untuk menggayakan pemasa kira detik. Penggunaan kelas utiliti seperti bg-black, text-white, text-5xl dan rounded-xl membantu dalam mencipta UI moden dan responsif dengan CSS yang minimum.

Dengan mengikuti pendekatan ini, anda boleh mencipta komponen pemasa undur yang boleh disesuaikan dan boleh digunakan semula untuk sebarang aplikasi React. Penyelesaian ini cekap, mengelakkan pemaparan semula yang tidak perlu dan menawarkan reka bentuk yang bersih dan moden dengan Tailwind CSS. Sama ada anda sedang mengusahakan tapak e-dagang atau mana-mana projek lain yang memerlukan kira detik, komponen pemasa ini akan menyepadukan dan meningkatkan pengalaman pengguna dengan lancar.

Atas ialah kandungan terperinci Membina Pemasa Undur Tarikh Akhir Dinamik dalam React.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!