ساخت یک تایمر پویا مهلت شمارش معکوس در React.js

Summarize this content to 400 words in Persian Lang
در توسعه وب، نمایش تایمر شمارش معکوس یک ویژگی رایج برای سایت های تجارت الکترونیکی است، به ویژه برای رویدادهای فروش یا پیشنهادات با زمان محدود. چالش ایجاد یک تایمر شمارش معکوس پویا و از نظر بصری جذاب بدون تکیه بر کتابخانه های خارجی، تضمین عملکرد کارآمد و ادغام یکپارچه در هر برنامه React است.

تایمرهای شمارش معکوس برای ایجاد فوریت در فروش و رویدادهای تبلیغاتی ضروری هستند. آنها کاربران را تشویق می کنند تا قبل از اتمام زمان سنج اقدام کنند و آنها را به ابزاری قدرتمند در استراتژی های بازاریابی تبدیل می کند. در این پست، روند ساخت یک تایمر شمارش معکوس پویا با استفاده از React.js و Tailwind CSS را به شما آموزش خواهم داد. نحوه محاسبه زمان باقیمانده تا یک مهلت مشخص و نمایش آن در قالب کاربر پسند را بررسی خواهیم کرد.

ما یک مؤلفه تایمر شمارش معکوس قابل استفاده مجدد در React.js خواهیم ساخت که زمان باقیمانده تا یک مهلت مشخص را محاسبه می کند و هر ثانیه رابط کاربری را به روز می کند. این کامپوننت با استفاده از Tailwind CSS برای اطمینان از طراحی مدرن و پاسخگو استایل دهی می شود. هدف ایجاد یک تایمر است که تعداد روزها، ساعت ها، دقیقه ها و ثانیه های باقی مانده تا پایان رویداد را نمایش دهد.

توضیح اجرا:

مرحله 1: راه اندازی React Component

ما با ایجاد یک جزء 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، یک تابع محاسبه TimeLeft تعریف می کنیم که زمان باقی مانده تا پایان مهلت را محاسبه می کند. این تابع تفاوت بین زمان فعلی و مهلت را محاسبه می کند، سپس این تفاوت را به روز، ساعت، دقیقه و ثانیه تبدیل می کند.

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 (

);

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

جزء TimeBox به طور جداگانه تعریف شده است تا کد را ماژولار و قابل استفاده مجدد کند. هر TimeBox یک برچسب (به عنوان مثال، “روز”) و مقدار مربوطه را نمایش می دهد.

const TimeBox = ({ label, value }) => (

);

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مرحله 4: استایل با Tailwind CSS

ما از Tailwind CSS برای استایل دادن به تایمر شمارش معکوس استفاده می کنیم. استفاده از کلاس های کاربردی مانند bg-black، text-white، text-5xl و rounded-xl به ایجاد یک رابط کاربری مدرن و پاسخگو با حداقل CSS کمک می کند.

با پیروی از این رویکرد، می توانید یک جزء تایمر شمارش معکوس بسیار قابل تنظیم و قابل استفاده مجدد برای هر برنامه React ایجاد کنید. این راه حل کارآمد است، از رندرهای غیر ضروری جلوگیری می کند و طراحی تمیز و مدرنی را با Tailwind CSS ارائه می دهد. چه در حال کار بر روی یک سایت تجارت الکترونیک یا هر پروژه دیگری که نیاز به شمارش معکوس دارد، این جزء تایمر به طور یکپارچه یکپارچه شده و تجربه کاربر را ارتقا می دهد.

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

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

return (
    
);

const TimeBox = ({ label, value }) => (
    
);