数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何在 ReactJS 中创建倒计时器？
倒计时器是任何 Web 应用程序中非常常见且有用的功能，例如，当网站切换到维护模式时，我们会看到它。事件在定义的时间开始或在第二天结束等。通过这种方式，使用 ReactJS 构建倒计时器可以提供完美的实现——它涉及最佳状态管理和生命周期方法，有助于交付具有吸引力的用户界面。在本文中，我们将学习如何在 ReactJS 中创建一个倒计时器。
先决条件
在开始在 ReactJS 中创建自己的倒计时器之前，请确保您具备以下先决条件。
- React 基础知识：您必须了解 React 组件、状态管理和 Hook 的基础知识。如果您以前从未使用过 React，则应首先阅读文档以了解其实际作用，然后学习一个初学者课程。
- Node.js 和 npm：Node 6 或更高版本以及 NPM（js 社区的包管理器）用于构建基于 Web 的前端应用程序，例如使用 Webpack 的 Angular JS 应用程序。但是，如果您已经安装了 Node.js 和 npm（节点包管理器），那就很好。我们可以在 npm 官网下载这些。
- 代码编辑器：您可以使用任何您熟悉的代码编辑器来编写和处理此 React 代码。
- React 应用程序设置：您应该已经预先配置并设置了 React 应用程序。如果您没有，则可以使用 Create React App 一行命令创建。
在 ReactJS 中创建倒计时器的步骤
下面提到的指南为您提供了创建自己的倒计时器的分步过程。
步骤 1：设置您的 React 环境
在进入主要代码之前，您需要准备好您的 React 环境。如果您没有 React 应用程序，则可以使用“create-react-app”命令创建一个。转到要在其中创建 React 应用程序的文件夹，打开终端/命令提示符，然后键入以下命令。此命令在此处构建 React 应用程序。
npx create-react-app countdown-timer
cd countdown-timer
注意：您可以将“countdown-timer”替换为您自己的首选项目名称（遵循项目命名约定）。
步骤 2：创建倒计时器组件
导入语句
在这里，我们将导入 React 的 useState 和 useEffect Hook。useState Hook 将用于倒计时器状态管理，而 useEffect 用于设置和清理效果，例如设置倒计时结束。如果需要，我们还需要导入 CSS 文件进行样式设置。
import React, { useState, useEffect } from 'react';
倒计时器组件
这构成了倒计时器函数组件的基础。
function CountdownTimer() {
return (
// Lines of code
);
}
状态初始化
我们使用 useState Hook 初始化 **'timeLeft'**、**'targetDate'** 和 **'isActive'** 状态。所有状态都以如下方式初始化。
const [targetDate, setTargetDate] = useState('');
const [timeLeft, setTimeLeft] = useState({});
const [isActive, setIsActive] = useState(false);
Effect Hook
我们使用 useEffect Hook 来创建一个每秒更新 timeLeft 状态的计时器。它创建一个每 1000 毫秒（1 秒）运行一次的间隔来检查和重新计算剩余时间。清理函数 clearInterval(timer) 确保在组件卸载或 targetDate 或 isActive 更改时清除间隔，因此它可以防止任何内存泄漏。需要注意的重要一点是，此效果仅在提供有效的目标日期并且倒计时器处于活动状态时才运行。
useEffect(() => {
if (isActive && targetDate) {
const timer = setInterval(() => {
setTimeLeft(calculateTimeLeft(targetDate));
}, 1000);
return () => clearInterval(timer);
}
}, [targetDate, isActive]);
计算剩余时间函数
剩余时间在 calculateTimeLeft() 函数中计算，它将计算当前时间和目标时间之间的差值。首先，它为当前时间和目标时间创建 Date 对象，然后计算它们的差值。该数学运算将此差值除以天、小时、分钟和秒。如果差值小于或等于零，则它会为所有时间单位返回零，表示倒计时停止，并将计时器的活动状态设置为 false。
const calculateTimeLeft = (targetDate) => {
const now = new Date();
const endDate = new Date(targetDate);
const difference = endDate - now;
if (difference <= 0) {
setIsActive(false);
return { days: 0, hours: 0, minutes: 0, seconds: 0 };
}
const days = Math.floor(difference / (1000 * 60 * 60 * 24));
const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((difference % (1000 * 60)) / 1000);
return { days, hours, minutes, seconds };
};
handleChange 和 handleStart 函数
当用户单击“启动计时器”按钮时，将触发 handleStart() 函数，类似地，handleChange() 函数将使用用户从输入字段中选择的任何值设置 targetDate 状态。event.target.value 是用户将选择的时间和日期。
const handleChange = (event) => {
setTargetDate(event.target.value);
};
const handleStart = () => {
setTimeLeft(calculateTimeLeft(targetDate));
setIsActive(true);
};
渲染方法
该组件呈现一个带有倒计时器类的 div 元素，其中包含倒计时显示和用户必须提供的倒计时器输入。timeLeft 是显示剩余天数、小时数、分钟数和秒数的变量。每个时间单位的显示都是通过带有相应单位标签的 span 元素完成的。
现在，组合所有这些部分后的完整代码如下所示。
// src/CountdownTimer.js
import React, { useState, useEffect } from "react";
import "./CountdownTimer.css";
function CountdownTimer() {
const [targetDate, setTargetDate] = useState("");
const [timeLeft, setTimeLeft] = useState({});
const [isActive, setIsActive] = useState(false);
useEffect(() => {
if (isActive && targetDate) {
const timer = setInterval(() => {
setTimeLeft(calculateTimeLeft(targetDate));
}, 1000);
return () => clearInterval(timer);
}
}, [targetDate, isActive]);
const calculateTimeLeft = (targetDate) => {
const now = new Date();
const endDate = new Date(targetDate);
const difference = endDate - now;
if (difference <= 0) {
setIsActive(false);
return { days: 0, hours: 0, minutes: 0, seconds: 0 };
}
const days = Math.floor(difference / (1000 * 60 * 60 * 24));
const hours = Math.floor(
(difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
);
const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((difference % (1000 * 60)) / 1000);
return { days, hours, minutes, seconds };
};
const handleChange = (event) => {
setTargetDate(event.target.value);
};
const handleStart = () => {
setTimeLeft(calculateTimeLeft(targetDate));
setIsActive(true);
};
return (
<div className="countdown-timer">
<h2>Set Your Countdown Timer</h2>
<input
type="datetime-local"
value={targetDate}
onChange={handleChange}
className="date-input"
/>
<button onClick={handleStart} className="start-button">
Start Timer
</button>
<div className="time-display">
<span className="time-box">
{timeLeft.days || 0} <small>Days</small>
</span>
<span className="time-box">
{timeLeft.hours || 0} <small>Hours</small>
</span>
<span className="time-box">
{timeLeft.minutes || 0} <small>Minutes</small>
</span>
<span className="time-box">
{timeLeft.seconds || 0} <small>Seconds</small>
</span>
</div>
</div>
);
}
export default CountdownTimer;
步骤 3：为倒计时器添加样式
这是一个可选步骤，您可以进行您自己喜欢的样式设置。此处演示的 CSS 仅供示例使用。因此，在“src”文件夹中创建一个名为“CountdownTimer.css”的文件来设置倒计时器组件的样式。
/* src/CountdownTimer.css */
.countdown-timer {
font-family: "Arial", sans-serif;
text-align: center;
padding: 2rem;
background: linear-gradient(to right, #1e3c72, #2a5298);
color: white;
border-radius: 10px;
max-width: 400px;
margin: 0 auto;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
h2 {
font-size: 1.5rem;
margin-bottom: 1rem;
}
.date-input {
padding: 0.5rem;
margin-bottom: 1rem;
border: none;
border-radius: 5px;
font-size: 1rem;
}
.start-button {
padding: 0.5rem 1rem;
font-size: 1rem;
color: white;
background-color: #007bff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.start-button:hover {
background-color: #0056b3;
}
.time-display {
display: flex;
justify-content: space-around;
margin-top: 1.5rem;
font-size: 1.2rem;
font-weight: bold;
}
.time-box {
background-color: rgba(255, 255, 255, 0.2);
padding: 1rem;
border-radius: 8px;
min-width: 60px;
}
.time-box small {
display: block;
font-size: 0.8rem;
margin-top: 0.5rem;
color: #ddd;
}
步骤 4：集成倒计时器组件
现在，我们的倒计时器组件已准备就绪。要使用它，我们需要将组件导入主应用程序文件，即“App.js”。包含以下代码以将倒计时器组件集成到您的应用程序中。
import React from "react";
// Import the CountdownTimer component
import CountdownTimer from "./CountdownTimer";
function App() {
return (
<div className="App">
<h1>Countdown Timer Application</h1>
<CountdownTimer />
</div>
);
}
export default App;
步骤 5：启动应用程序
代码准备就绪后，我们需要运行应用程序以查看输出。现在您可以转到 VSCode 编辑器终端并编写以下命令，然后运行应用程序，如下所示。在此存储库中，应用程序在端口 https://127.0.0.1:3000/ 上运行。
npm start
输出
上面提到的倒计时器代码的输出如下所示。请注意，输出以 gif 格式添加。从输出窗口中选择您首选的日期和时间，然后单击“启动计时器”按钮以启动倒计时器。
结论
在 ReactJS 中开发倒计时器是状态管理及其定期修订的简单任务。通过本教程，您将能够在 React 中开发一个不仅实用而且外观也漂亮的倒计时器。如果您愿意，可以更改样式并添加某些功能，但您也可以保持原样。
注意：为了进一步改进，您可以设计动画、使用动态时间间隔，甚至与不同的外部 API 连接。祝您编码愉快！
0 次查看
