极客教程使用React的Lap Memory秒表
秒表是一个应用程序，用于追踪小时、分钟、秒和毫秒的时间。该应用程序实现了秒表的所有基本操作，如开始、暂停和复位按钮。它还具有一个附加功能，可以记录圈数，这在我们必须记录某些检查点的时间时非常有用。
最终输出的预览：
先决条件和技术
- ReactJS
- CSS
- JSX
- 在React中使用函数组件
方法：
这个程序创建了一个具有开始、暂停、重置和圈选功能的函数式秒表计时器。它通过使用”useEffect”钩子来维护小时、分钟、秒和毫秒的状态变量，以确保实时更新。适当的间隔清除防止内存泄漏，提供了一个简单可靠的秒表来跟踪时间。
功能：
- 当用户点击“开始”时，计时器开始工作，并禁用按钮并显示”不允许”光标。
- “暂停”停止计时器，“重置”将所有时间单位设置为零。
- 该程序还提供了一个“圈选”功能，用于记录圈选时间，允许用户跟踪多个时间间隔。
创建此应用的步骤：
步骤1： 使用以下命令设置React项目
npx create-react-app <<name of project>>
步骤2： 使用以下步骤进入项目文件夹
cd <<Name_of_project>>
步骤3： 创建一个名为“components”的文件夹，并在其中添加三个新文件，分别为StopWatch.js、Lap.js和StopWatch.css。
项目结构：
package.json中更新的依赖项将如下所示：
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
示例： 在相应的文件中编写以下代码
- App.js： 此文件导入StopWatch组件并将其导出。
- StopWatch.js： 此文件包含以小时、分钟、秒和毫秒跟踪时间的逻辑，为启动、暂停和重置计时器提供用户友好的控件。
- Lap.js : 此文件包含在列表中显示圈数的逻辑。从StopWatch.js文件中，我们向此文件发送一个props属性laps。
- StopWatch.css: 此文件包含StopWatch.js元素的设计样式。
// App.js
import './App.css';
import StopWatch from './components/StopWatch';
function App() {
return (
<div className="App">
<StopWatch />
</div>
);
}
export default App;
// StopWatch.js
import React, { useState, useEffect } from "react";
import "./StopWatch.css";
import Lap from "./Lap";
export default function StopWatch() {
const [seconds, setSeconds] = useState(0);
const [minutes, setMinutes] = useState(0);
const [hours, setHours] = useState(0);
const [miliSeconds, setMiliSeconds] = useState(0);
const [laps, setLaps] = useState([]);
const [isRunning, setIsRunning] = useState(false);
const formatWithLeadingZero = (number) => {
if (number < 10) return "0" + number;
else return number.toString();
};
useEffect(() => {
let interval;
if (isRunning) {
interval = setInterval(() => {
setMiliSeconds((miliSeconds) => {
if (miliSeconds >= 99) {
setSeconds((seconds) => {
if (seconds >= 59) {
setMinutes((minutes) => {
if (minutes >= 59) {
setHours((prevHours) => prevHours + 1);
return 0;
} else {
return minutes + 1;
}
});
return 0;
} else {
return seconds + 1;
}
});
return 0;
} else {
return miliSeconds + 1;
}
});
}, 10);
}
return () => clearInterval(interval);
}, [isRunning]);
const handleStart = () => {
setIsRunning(true);
};
const handlePause = () => {
setIsRunning(false);
};
const handleLap = () => {
const lapTime =
formatWithLeadingZero(hours) +
":" +
formatWithLeadingZero(minutes) +
":" +
formatWithLeadingZero(seconds) +
"." +
formatWithLeadingZero(miliSeconds);
setLaps((prevLaps) => [...prevLaps, lapTime]);
};
const handleReset = () => {
setIsRunning(false);
setMiliSeconds(0);
setSeconds(0);
setMinutes(0);
setHours(0);
setLaps([]);
};
return (
<div className="container">
<div className="timeDisplay">
{formatWithLeadingZero(hours)} : {formatWithLeadingZero(minutes)} :{" "}
{formatWithLeadingZero(seconds)} : {formatWithLeadingZero(miliSeconds)}
</div>
<div className="buttons">
<button
className="btn"
onClick={handleStart}
disabled={isRunning}
style={{ cursor: isRunning ? "not-allowed" : "pointer" }}
>
Start
</button>
<button className="btn" onClick={handlePause}>
Pause
</button>
<button className="btn" onClick={handleLap}>
Lap
</button>
<button className="btn" onClick={handleReset}>
Reset
</button>
</div>
<Lap laps={laps} />
</div>
);
}
// Lap.js
import React from "react";
export default function Laps({ laps }) {
const calculateTimeDifference = (timeString1, timeString2) => {
const time1 = new Date(`1970-01-01T{timeString1}Z`);
const time2 = new Date(`1970-01-01T{timeString2}Z`);
const timeDiff = Math.abs(time2 - time1);
const hours = Math.floor(timeDiff / 3600000).toString().padStart(2, '0');
const minutes = Math.floor((timeDiff % 3600000) / 60000).toString().padStart(2, '0');
const seconds = Math.floor((timeDiff % 60000) / 1000).toString().padStart(2, '0');
const milliseconds = ((timeDiff % 1000) / 10).toString().padStart(2, '0');
const resultString = `{hours}:{minutes}:{seconds}.{milliseconds}`;
return resultString;
}
return (
<div className="laps" style={{ display: (laps.length) ? 'block' : 'none' }}>
<h3><span>Lap</span><span>Time</span><span>Total Time</span></h3>
<ul>
{laps.map((lap, index) => (
<li key={index}>
<span>{`Lap ${index + 1}`}</span>
<span>{calculateTimeDifference(lap, (index !== 0) ? laps[index - 1] : "00:00:00.00")}</span>
<span>{lap}</span>
</li>
))}
</ul>
</div>
);
};
CSS
/* StopWatch.css */
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
.container {
padding: 30px;
border: 1px solid #ced4da;
border-radius: 10px;
background: #fff;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.25);
margin: 5px;
width: 100%;
max-width: 400px;
box-sizing: border-box;
}
.timeDisplay {
padding: 20px;
font-size: 30px;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.25);
border-radius: 0.25em;
text-align: center;
}
.buttons {
display: flex;
justify-content: center;
margin-top: 20px;
}
button.btn {
padding: 10px 20px;
outline: none;
border: 1px solid #ced4da;
margin: 5px;
border-radius: 4px;
cursor: pointer;
background: #1d9bf0;
color: #fff;
font-size: 16px;
transition: all 0.5s;
}
button.btn:hover {
background-color: #1879ba;
}
.laps {
margin-top: 20px;
}
.laps h3 {
text-align: left;
display: flex;
justify-content: space-between;
margin: 5px;
}
.laps ul {
list-style-type: none;
padding: 0;
}
.laps li {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0px 5px 10px 5px;
}
@media screen and (max-width: 420px) {
.buttons {
display: grid;
grid-template-columns: 1fr 1fr;
}
}
运行该应用程序的步骤：
步骤1： 在终端中输入以下命令。
npm start
步骤2： 打开网络浏览器并输入以下URL
http://localhost:3000/
输出：
