چگونه با React یک تایمر شمارش معکوس بسازیم - راهنمای گام به گام

چگونه با React یک تایمر شمارش معکوس بسازیم – راهنمای گام به گام

شناسهٔ خبر: 786013 - تاریخ: اکتبر 14, 2024

در این آموزش، نحوه ساخت یک تایمر شمارش معکوس سفارشی برای ردیابی رویدادها با استفاده از React.js را خواهید آموخت.

تایمر شمارش معکوس یک راه ساده برای اندازه گیری زمان تا وقوع یک رویداد است. این زمان را به صورت معکوس شمارش می کند - مانند 5، 4، 3، 2، 1. به شما کمک می کند زمان منتهی به رویدادهای آینده، راه اندازی محصول یا پیشنهادات را مدیریت کنید و به شما امکان می دهد تا کاربران را در مورد آن جدول زمانی مطلع کنید.

فهرست مطالب

1. برنامه React خود را راه اندازی کنید

2. کامپوننت شمارش معکوس را ایجاد کنید

3. مدیریت زمان و کارکرد

4. یک فرم شمارش معکوس ایجاد کنید

5. عملکرد شروع، توقف و تنظیم مجدد شمارش معکوس را مدیریت کنید

6. تاریخ و زمان رویداد را فرمت کنید

7. تایمر شمارش معکوس را نمایش دهید

8. حالت دادن به مؤلفه تایمر شمارش معکوس

نتیجه گیری

پیش نیازها

شما باید دانش مناسبی از HTML، CSS و جاوا اسکریپت داشته باشید تا از این مقاله بیشترین بهره را ببرید.

بیایید شروع کنیم.

1. برنامه React خود را راه اندازی کنید

اگر قبلاً یک برنامه آماده برای استفاده ندارید، ابتدا باید یک برنامه React ایجاد کنید . در این آموزش من از Vite استفاده می کنم. سپس با اجرای دستورات زیر در ویرایشگر کد خود، به دایرکتوری پروژه جدید تغییر دهید:

 npm create vite countdown-timer cd countdown-timer

این دستور را برای شروع برنامه در سرور محلی اجرا کنید:

 npm run dev

اکنون باید پروژه را در مرورگر خود در https://localhost/3000 مشاهده کنید.

2. کامپوننت شمارش معکوس را ایجاد کنید

در پوشه src برنامه React خود، یک پوشه components ایجاد کنید و در داخل آن یک فایل CountDown.jsx ایجاد کنید.

 /* components/CountDown.jsx */ import React from "react" ; const CountdownTImer = () => { return ( < div className = "countdown-timer-container" > </ div > ); }; export default CountdownTimer;

3. مدیریت زمان و کارکرد

متغیرهای حالت را با استفاده از قلاب useState تعریف کنید. فایل CountDown.jsx را با کد زیر به روز کنید:

 /* components/CountDown.jsx */ import React, { useState, useEffect } from "react" ; const CountdownTimer = () => { const [eventName, setEventName] = useState( "" ); const [eventDate, setEventDate] = useState( "" ); const [countdownStarted, setCountdownStarted] = useState( false ); const [timeRemaining, setTimeRemaining] = useState( 0 ); return ( < div className = "countdown-timer-container" > </ div > ); }; export default CountdownTimer;

در اینجا یک تفکیک مختصر از useState آورده شده است:

eventName : نام رویداد را برای تایمر شمارش معکوس ذخیره می کند.

eventDate : تاریخ رویداد را برای تایمر شمارش معکوس ذخیره می کند.

countdownStarted : ردیابی می کند که آیا تایمر شمارش معکوس شروع شده است یا خیر.

timeRemaining : زمان باقیمانده را در میلی ثانیه برای شمارش معکوس ذخیره می کند.

اکنون، عملکرد تایمر شمارش معکوس را با استفاده از قلاب useEffect پیاده سازی می کنیم:

 /* components/CountDown.jsx */ import React, { useState, useEffect } from "react" ; const CountdownTimer = () => { // ... useEffect( () => { if (countdownStarted && eventDate) { const countdownInterval = setInterval ( () => { const currentTime = new Date ().getTime(); const eventTime = new Date (eventDate).getTime(); let remainingTime = eventTime - currentTime; if (remainingTime <= 0 ) { remainingTime = 0 ; clearInterval (countdownInterval); alert( "Countdown complete!" ); } setTimeRemaining(remainingTime); }, 1000 ); return () => clearInterval (countdownInterval); } }, [countdownStarted, eventDate, timeRemaining]); return ( < div className = "countdown-timer-container" > </ div > ); }; export default CountdownTimer;

قلاب useEffect هر زمان که countdownStarted یا eventDate تغییر کند اجرا می شود. بازه‌ای تنظیم می‌کند که بر اساس زمان فعلی و زمان رویداد، timeRemaining هر ثانیه به‌روزرسانی می‌کند. اگر زمان باقی مانده کمتر یا مساوی 0 شود، بازه زمانی را متوقف می کند و اعلان "شمارش معکوس کامل شد!"

 /* components/CountDown.jsx */ import React, { useState, useEffect } from "react" ; const CountdownTimer = () => { // ... useEffect( () => { if (countdownStarted) { document .title = eventName; } }, [countdownStarted, eventName]); return ( < div className = "countdown-timer-container" > </ div > ); }; export default CountdownTimer;

در اینجا، هر زمان که countdownStarted یا eventName تغییر کند، قلاب useEffect اجرا می‌شود. عنوان تایمر شمارش معکوس را برای نمایش eventName هنگام شروع تایمر شمارش معکوس به روز می کند.

4. یک فرم شمارش معکوس ایجاد کنید

برای کنترل تایمر شمارش معکوس، باید فرمی با دو ورودی برای نام و تاریخ رویداد ایجاد کنید. سپس کد زیر را اضافه کنید:

 /* components/CountDown.jsx */ import React from "react" ; // ... const handleSetCountdown = () => { setCountdownStarted( true ); }; return ( < div className = "countdown-timer-container" > < h2 className = "countdown-name" > {countdownStarted ? eventName : "Countdown Timer"} </ h2 > {!countdownStarted ? ( < form className = "countdown-form" > < label htmlFor = "title" > Event Name </ label > < input name = "title" type = "text" placeholder = "Enter event name" value = {eventName} onChange = {(e) => setEventName(e.target.value)} /> < label htmlFor = "date-picker" > Event Date </ label > < input name = "date-picker" type = "date" value = {eventDate} onChange = {(e) => setEventDate(e.target.value)} onClick={(e) => (e.target.type = "date")} /> < button onClick = {handleSetCountdown} > Start Countdown </ button > </ form > } </ div > ); }; export default CountdownTimer;

در اینجا یک تفکیک مختصر از useState آورده شده است:

eventName : نام رویداد را برای تایمر شمارش معکوس ذخیره می کند.

countdown-name : «تایمر شمارش معکوس» را به‌طور پیش‌فرض نشان می‌دهد یا به‌روزرسانی eventName پس از شروع شمارش معکوس وارد می‌کند.

دیگر اخبار

ویژگی «Ask Photos» Google Photos در ایالات متحده راه اندازی شد.

فرم شامل:

فیلد ورودی با title نام و برچسب Event Name مقدار حالت eventName را به‌روزرسانی می‌کند.

فیلد ورودی با نام date-picker به کاربران امکان می دهد تاریخ را انتخاب کرده و مقدار حالت eventDate را کنترل کنند.

دکمه Start Countdown هنگامی که برای شروع شمارش معکوس کلیک می شود، تابع handleSetCountdown فعال می کند.

5. عملکرد شروع، توقف و تنظیم مجدد شمارش معکوس را مدیریت کنید

سپس، تابع handleSetCountdown را به‌روزرسانی کنید تا نام و تاریخ رویداد را با استفاده از localStorage.setItem در حافظه محلی ذخیره کنید. localStorage یک API وب است که کاربران را قادر می‌سازد تا داده‌ها را به صورت جفت کلید-مقدار به طور مداوم ذخیره کنند، حتی زمانی که مرورگر بسته یا تازه‌سازی شده است.

کد به شرح زیر است:

 /* components/CountDown.jsx */ import React from "react" ; // ... const handleSetCountdown = () => { setCountdownStarted( true ); localStorage .setItem( "eventDate" , eventDate); localStorage .setItem( "eventName" , eventName); }; return ( < div className = "countdown-timer-container" > // ... </ div > ); }; export default CountdownTimer;

اکنون، توابع handleStopCountdown و handleResetCountdown را ایجاد کنید تا با به روز رسانی حالت countdownStarted به false ، تایمر شمارش معکوس متوقف شود.

بیشتر بخوانید

چگونه استوری واتساپ دیگران را به‌صورت مخفیانه مشاهده کنیم؟

 /* components/CountDown.jsx */ import React from "react" ; // ... const handleStopCountdown = () => { setCountdownStarted( false ); setTimeRemaining( 0 ); }; const handleResetCountdown = () => { setCountdownStarted( false ); setEventDate( "" ); setEventName( "" ); setTimeRemaining( 0 ); localStorage .removeItem( "eventDate" ); localStorage .removeItem( "eventName" ); }; return ( < div className = "countdown-timer-container" > // ... < div className = "control-buttons" > < button onClick = {handleStopCountdown} > Stop </ button > < button onClick = {handleResetCountdown} > Reset </ button > </ div > </ div > ); }; export default CountdownTimer;

اینجا:

handleStopCountdown : حالت timeRemaining را به صفر بازنشانی می کند.

handleResetCountdown : تایمر شمارش معکوس را به حالت اولیه خود بازنشانی می کند. حالت های زمانی باقیمانده را پاک می کند و تاریخ رویداد و نام رویداد را با استفاده از localStorage.removeItem() از حافظه محلی حذف می کند.

6. تاریخ و زمان رویداد را فرمت کنید

بیایید داده های تاریخ و زمان را به یک قالب قابل خواندن تبدیل کنیم.

 /* components/CountDown.jsx */ import React from "react" ; // ... const formatDate = ( date ) => { const options = { month : "long" , day : "numeric" , year : "numeric" }; return new Date (date).toLocaleDateString( "en-US" , options); }; const formatTime = ( time ) => { const seconds = Math .floor((time / 1000 ) % 60 ); const minutes = Math .floor((time / ( 1000 * 60 )) % 60 ); const hours = Math .floor((time / ( 1000 * 60 * 60 )) % 24 ); const days = Math .floor(time / ( 1000 * 60 * 60 * 24 )); return ( < div className = "countdown-display" > < div className = "countdown-value" > {days.toString().padStart(2, "0")} < span > days </ span > </ div > < div className = "countdown-value" > {hours.toString().padStart(2, "0")} < span > hours </ span > </ div > < div className = "countdown-value" > {minutes.toString().padStart(2, "0")} < span > minutes </ span > </ div > < div className = "countdown-value" > {seconds.toString().padStart(2, "0")} < span > seconds </ span > </ div > </ div > ); }; return ( < div className = "countdown-timer-container" > // ... </ div > ); }; export default CountdownTimer;

در اینجا یک تفکیک مختصر از توابع آورده شده است:

formatDate : ورودی تاریخ را در یک رشته تاریخ قابل خواندن توسط انسان قالب بندی می کند.

formatTime : زمان را بر حسب میلی ثانیه به عنوان ورودی می گیرد و روزها، ساعت ها، دقیقه ها و ثانیه های تایمر را محاسبه می کند. .toString().padStart(2, "0") زمان فرمت شده را به صورت دو کاراکتر با اضافه کردن 0 در ابتدای زمان تنها در صورتی که طول عدد کمتر از 2 باشد برمی گرداند.

در اینجا محتویات کامل فایل CountDown.jsx آمده است:

 /* components/CountDown.jsx */ import React, { useState, useEffect } from "react" ; const CountdownTimer = () => { const [eventName, setEventName] = useState( "" ); const [eventDate, setEventDate] = useState( "" ); const [countdownStarted, setCountdownStarted] = useState( false ); const [timeRemaining, setTimeRemaining] = useState( 0 ); useEffect( () => { if (countdownStarted && eventDate) { const countdownInterval = setInterval ( () => { const currentTime = new Date ().getTime(); const eventTime = new Date (eventDate).getTime(); let remainingTime = eventTime - currentTime; if (remainingTime <= 0 ) { remainingTime = 0 ; clearInterval (countdownInterval); alert( "Countdown complete!" ); } setTimeRemaining(remainingTime); }, 1000 ); return () => clearInterval (countdownInterval); } }, [countdownStarted, eventDate, timeRemaining]); useEffect( () => { if (countdownStarted) { document .title = eventName; } }, [countdownStarted, eventName]); const handleSetCountdown = () => { setCountdownStarted( true ); localStorage .setItem( "eventDate" , eventDate); localStorage .setItem( "eventName" , eventName); }; const handleStopCountdown = () => { setCountdownStarted( false ); setTimeRemaining( 0 ); }; const handleResetCountdown = () => { setCountdownStarted( false ); setEventDate( "" ); setEventName( "" ); setTimeRemaining( 0 ); localStorage .removeItem( "eventDate" ); localStorage .removeItem( "eventName" ); }; const formatDate = ( date ) => { const options = { month : "long" , day : "numeric" , year : "numeric" }; return new Date (date).toLocaleDateString( "en-US" , options); }; const formatTime = ( time ) => { const seconds = Math .floor((time / 1000 ) % 60 ); const minutes = Math .floor((time / ( 1000 * 60 )) % 60 ); const hours = Math .floor((time / ( 1000 * 60 * 60 )) % 24 ); const days = Math .floor(time / ( 1000 * 60 * 60 * 24 )); return ( < div className = "countdown-display" > < div className = "countdown-value" > {days.toString().padStart(2, "0")} < span > days </ span > </ div > < div className = "countdown-value" > {hours.toString().padStart(2, "0")} < span > hours </ span > </ div > < div className = "countdown-value" > {minutes.toString().padStart(2, "0")} < span > minutes </ span > </ div > < div className = "countdown-value" > {seconds.toString().padStart(2, "0")} < span > seconds </ span > </ div > </ div > ); }; return ( < div className = "countdown-timer-container" > < h2 className = "countdown-name" > {countdownStarted ? eventName : "Countdown Timer"} </ h2 > < p className = "countdown-date" > {countdownStarted && formatDate(eventDate)} </ p > {!countdownStarted ? ( < form className = "countdown-form" > < label htmlFor = "title" > Event Name </ label > < input name = "title" type = "text" placeholder = "Enter event name" value = {eventName} onChange = {(e) => setEventName(e.target.value)} /> < label htmlFor = "date-picker" > Event Date </ label > < input name = "date-picker" type = "date" value = {eventDate} onChange = {(e) => setEventDate(e.target.value)} onClick={(e) => (e.target.type = "date")} /> < button onClick = {handleSetCountdown} > Start Countdown </ button > </ form > ) : ( <> {formatTime(timeRemaining)} < div className = "control-buttons" > < button onClick = {handleStopCountdown} > Stop </ button > < button onClick = {handleResetCountdown} > Reset </ button > </ div > </> )} </div> ); }; export default CountdownTimer;

7. تایمر شمارش معکوس را نمایش دهید

CountDownTimer در App.jsx وارد کنید و کد پیش‌فرض را با این جایگزین کنید:

 /* App.jsx */ import React from "react" ; import CountdownTimer from "./components/CountDown" ; function App ( ) { return ( < div className = "App" > < CountdownTimer /> </ div > ); } export default App;

و بس! برنامه تایمر شمارش معکوس شما باید در localhost:3000 در مرورگر ارائه شود.

8. حالت دادن به مؤلفه تایمر شمارش معکوس

در نهایت، فایل index.css را در همان فهرست پروژه خود با گفت ن سبک های زیر به روز کنید:

 /* index.css */ @import url( "https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Open+Sans:wght@400;500;700&display=swap" ); * { box-sizing : border-box; margin : 0 ; padding : 0 ; } body { background : url ( "./img/bg-img.jpg" ) top center; background-size : cover; font-family : "Inter" , sans-serif; font-size : 1rem ; display : flex; justify-content : center; align-items : center; flex-direction : column; margin : 0 auto; width : 100vw ; height : 100vh ; } .countdown-form { background-color : #f6f6f6 ; display : flex; flex-direction : column; justify-content : center; padding : 20px ; width : 300px ; } label { font-weight : bold; margin-bottom : 5px ; } input { background-color : #d1f1ee ; border : 1px solid #dfdfdf ; outline : none; margin-bottom : 10px ; padding : 10px ; width : 100% ; } button { background-color : #038a7f ; border : none; color : #fff ; cursor : pointer; outline : none; margin-top : 15px ; text-transform : uppercase; width : 100% ; height : 40px ; } button :hover { background-color : #005a53 ; } .countdown-message { display : flex; justify-content : center; align-items : center; font-size : 24px ; } .countdown-name { color : #fff ; font-size : 1.5rem ; margin-bottom : 14px ; text-align : center; } .countdown-date { color : #eafbfa ; margin : - 22px 0 10px ; text-align : center; } .countdown-display { display : flex; justify-content : space-around; } .countdown-value :not(span) { background-color : #2f5d6f ; border-radius : 50% ; color : #03d5c0 ; font-size : 46px ; padding : 20px ; margin : 0 5px ; padding : 10px ; text-align : center; width : 140px ; height : 140px ; } .countdown-value > span { display : block; color : #fff ; font-size : 0.8rem ; letter-spacing : 2px ; text-transform : uppercase; margin-top : - 25px ; } .control-buttons { margin-top : 50px ; text-align : center; } .control-buttons > button { background-color : #03b4a2 ; border : none; border-radius : 50% ; color : #fff ; cursor : pointer; font-size : 0.7rem ; margin : 0 10px ; width : 50px ; height : 50px ; } .control-buttons button :hover { background-color : #0b7c71 ; } @media only screen and ( max-width: 600px ) { .countdown-form { width : 90% ; max-width : 300px ; } input { width : 100% ; } .countdown-name { margin-left : - 20px ; } .countdown-value :not(span) { font-size : 1.1rem ; width : 80px ; height : 80px ; } .countdown-value > span { font-size : 0.7rem ; margin-top : - 15px ; } }

تبریک می‌گوییم، ساختن برنامه تایمر شمارش معکوس خود را به پایان رساندید!

نتیجه گیری

در این مقاله، نحوه ساختن یک برنامه اولیه تایمر شمارش معکوس React و نحوه کار با حافظه محلی مرورگر را یاد گرفتید.

کد پیاده سازی شده در این مقاله در این مخزن GitHub قابل دسترسی است. برای کسب اطلاعات بیشتر در مورد توسعه وب و فناوری، وبلاگ من را تحلیل کنید یا با من در X(Twitter) و LinkedIn ارتباط برقرار کنید.

ممنون که خواندید.

خبرکاو