在 React.js 中构建动态截止日期倒计时器-js教程-PHP中文网

在 React.js 中构建动态截止日期倒计时器

PHPz

发布： 2024-08-11 06:30:32

原创

962 人浏览过

Building a Dynamic Deadline Countdown Timer in React.js

在 Web 开发中，显示倒计时器是电子商务网站的常见功能，特别是对于销售活动或限时优惠。面临的挑战是在不依赖外部库的情况下创建一个动态且具有视觉吸引力的倒计时器，确保高效的性能并无缝集成到任何 React 应用程序中。

倒计时器对于在销售和促销活动中营造紧迫感至关重要。它们鼓励用户在计时器用完之前采取行动，使它们成为营销策略的强大工具。在这篇文章中，我将引导您完成使用 React.js 和 Tailwind CSS 构建动态倒计时器的过程。我们将探索如何计算特定截止日期之前的剩余时间并以用户友好的格式显示它。

我们将在 React.js 中构建一个可重用的倒数计时器组件，用于计算指定截止日期之前的剩余时间并每秒更新 UI。该组件将使用 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,
    });

登录后复制

这里，deadline 是目标日期，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 更新状态来确保每秒重新计算剩余时间，从而触发组件的重新渲染。

步骤 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组件单独定义，使代码模块化且可重用。每个时间框显示一个标签（例如“天”）和相应的值。

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

登录后复制