資料結構
網路
關係資料庫管理系統 (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://:3000/ 上執行。
npm start
輸出
上面提到的倒計時器程式碼的輸出如下所示。請注意，輸出以 gif 格式新增。從輸出視窗中選擇您首選的日期和時間，然後單擊“啟動計時器”按鈕以啟動倒計時器。
結論
在 ReactJS 中開發倒計時器是狀態管理及其定期修訂的簡單任務。透過本教程，您將能夠在 React 中開發一個不僅實用而且外觀也漂亮的倒計時器。如果您願意，可以更改樣式並新增某些功能，但您也可以保持原樣。
注意：為了進一步改進，您可以設計動畫、使用動態時間間隔，甚至與不同的外部 API 連線。祝您編碼愉快！
0 次檢視
