付費限定

React STOPWATCH專案製作

更新於 發佈於 閱讀時間約 16 分鐘

以一般邏輯來寫

import React, { useState, useEffect, useRef } from 'react';

const Stopwatch = () => {
const [time, setTime] = useState(0); // 當前時間(以秒為單位)
const [isRunning, setIsRunning] = useState(false); // 計時器是否正在運行

const intervalRef = useRef(null); // 用於保存計時器的 ID

useEffect(() => {
if (isRunning) {
// 如果計時器正在運行,則每 10 毫秒更新一次時間
intervalRef.current = setInterval(() => {
setTime((prevTime) => prevTime + 0.01);
}, 10);
}

// 在組件卸載時或isRunning改變時清除計時器,避免記憶體洩漏、避免意外行為
return () => clearInterval(intervalRef.current);
}, [isRunning]); // 依賴 isRunning 狀態

const start = () => {
setIsRunning(true);
};

const pause = () => {
setIsRunning(false);
};

const reset = () => {
setIsRunning(false);
setTime(0);
};

// 格式化時間,將秒轉換為分鐘、秒和毫秒
const formatTime = (time) => {
const minutes = Math.floor(time / 60);
const seconds = Math.floor(time % 60);
const milliseconds = Math.floor((time % 1) * 100);

return `${minutes.toString().padStart(2, '0')}:${seconds
.toString()
.padStart(2, '0')}.${milliseconds.toString().padStart(2, '0')}`;
};

return (
<div>
<h1>Stopwatch</h1>
<div>
{/* 顯示格式化後的時間 */}
<p>{formatTime(time)}</p>
</div>
<div>
{/* 根據計時器狀態顯示開始或暫停按鈕 */}
{!isRunning ? (
<button onClick={start}>Start</button>
) : (
<button onClick={pause}>Pause</button>
)}
{/* 重置按鈕 */}
<button onClick={reset}>Reset</button>
</div>
</div>
);
};

export default Stopwatch;
以行動支持創作者!付費即可解鎖
本篇內容共 6575 字、0 則留言,僅發佈於前端網頁程式設計入門你目前無法檢視以下內容,可能因為尚未登入,或沒有該房間的查看權限。
留言
avatar-img
留言分享你的想法!
avatar-img
電資鼠 - 您的學習好夥伴
9會員
215內容數
在當今數位時代,電資領域人才需求爆發式成長,不論是前端網頁設計、嵌入式開發、人工智慧、物聯網還是軟硬體整合,這些技術都在改變世界。而掌握 C/C++、Python、數位邏輯、電路學與嵌入式開發等大學電資領域的課程,正是進入這個高薪、高需求產業的關鍵!
2025/03/06
在 React 中,狀態管理是構建複雜應用的重要一環,其中 useContext 與 Redux 都提供了解決方案,但它們各有優缺點和適用場景。 有鑑於Redux以英文教學為主,網上中文的教學不多,初學者會遇到一些困難,所以本章節希望以一篇文章帶領你快速入門Redux,透過實作的方式上手這個技能!
2025/03/06
在 React 中,狀態管理是構建複雜應用的重要一環,其中 useContext 與 Redux 都提供了解決方案,但它們各有優缺點和適用場景。 有鑑於Redux以英文教學為主,網上中文的教學不多,初學者會遇到一些困難,所以本章節希望以一篇文章帶領你快速入門Redux,透過實作的方式上手這個技能!
2025/03/05
在 React 中,useContext() 是一個 Hook,用來讓你在函式元件中輕鬆地存取 context 資料,避免繁瑣的 props 傳遞。以下是一步步的教學與示例程式碼。 透過本章學習,你將掌握 如何在 React 應用中運用 useContext() 管理全域狀態,提升開發效率!
2025/03/05
在 React 中,useContext() 是一個 Hook,用來讓你在函式元件中輕鬆地存取 context 資料,避免繁瑣的 props 傳遞。以下是一步步的教學與示例程式碼。 透過本章學習,你將掌握 如何在 React 應用中運用 useContext() 管理全域狀態,提升開發效率!
2025/03/05
透過本章學習,你將掌握 useRef() 的核心概念與最佳應用方式,提高 React 應用的效能與靈活性!
2025/03/05
透過本章學習,你將掌握 useRef() 的核心概念與最佳應用方式,提高 React 應用的效能與靈活性!
看更多
你可能也想看
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
介紹朋友新開的蝦皮選物店『10樓2選物店』,並分享方格子與蝦皮合作的分潤計畫,註冊流程簡單,0成本、無綁約,推薦給想增加收入的讀者。
Thumbnail
介紹朋友新開的蝦皮選物店『10樓2選物店』,並分享方格子與蝦皮合作的分潤計畫,註冊流程簡單,0成本、無綁約,推薦給想增加收入的讀者。
Thumbnail
當你邊吃粽子邊看龍舟競賽直播的時候,可能會順道悼念一下2300多年前投江的屈原。但你知道端午節及其活動原先都與屈原毫無關係嗎?這是怎麼回事呢? 本文深入探討端午節設立初衷、粽子、龍舟競渡與屈原自沉四者。看完這篇文章,你就會對端午、粽子、龍舟和屈原的四角關係有新的認識喔。那就讓我們一起解開謎團吧!
Thumbnail
當你邊吃粽子邊看龍舟競賽直播的時候,可能會順道悼念一下2300多年前投江的屈原。但你知道端午節及其活動原先都與屈原毫無關係嗎?這是怎麼回事呢? 本文深入探討端午節設立初衷、粽子、龍舟競渡與屈原自沉四者。看完這篇文章,你就會對端午、粽子、龍舟和屈原的四角關係有新的認識喔。那就讓我們一起解開謎團吧!
Thumbnail
在網路速度有限的情況下,依序記錄不斷產生的資訊,能統計使用者在頁面上操作了哪些功能。
Thumbnail
在網路速度有限的情況下,依序記錄不斷產生的資訊,能統計使用者在頁面上操作了哪些功能。
Thumbnail
本章節提供了關於Typescript中流程控制元素的詳細介紹,包括if, else if, else語句,三元運算子,switch語句,各種for迴圈,while迴圈,循環嵌套和控制迴圈語句(break,continue和標籤)的使用。
Thumbnail
本章節提供了關於Typescript中流程控制元素的詳細介紹,包括if, else if, else語句,三元運算子,switch語句,各種for迴圈,while迴圈,循環嵌套和控制迴圈語句(break,continue和標籤)的使用。
Thumbnail
在程式任何地方都能修改各種react組件狀態的做法分享
Thumbnail
在程式任何地方都能修改各種react組件狀態的做法分享
Thumbnail
JavaScript30 傳送門:https://javascript30.com/ 今天才發現可以不用看著影片一步一步寫,可以自己先寫寫看😛 第二個挑戰是用 JS + CSS 寫一個時鐘,不過其實檔案裡面 HTML 跟 CSS 都已經寫好了,三個指針也都放好了,Go Live 起來就長
Thumbnail
JavaScript30 傳送門:https://javascript30.com/ 今天才發現可以不用看著影片一步一步寫,可以自己先寫寫看😛 第二個挑戰是用 JS + CSS 寫一個時鐘,不過其實檔案裡面 HTML 跟 CSS 都已經寫好了,三個指針也都放好了,Go Live 起來就長
Thumbnail
上次完成到基本的CRUD及權限控制,後面花了點時間把排序、分頁、圖表總覽的部分做完,其他細節是佈署上線,一般在公司內有專屬的部門處理,僅了解一下流程。
Thumbnail
上次完成到基本的CRUD及權限控制,後面花了點時間把排序、分頁、圖表總覽的部分做完,其他細節是佈署上線,一般在公司內有專屬的部門處理,僅了解一下流程。
Thumbnail
JavaScript 套件,頁碼 Pagination.js 搭配 axios API 請求範例
Thumbnail
JavaScript 套件,頁碼 Pagination.js 搭配 axios API 請求範例
Thumbnail
前言 現在的前端需求已經越來越高,要考慮HTML及CSS的切版美觀程度,以及React以及Flutter所提出的元件(Componet、widget)觀念,也就是將元件模組化,使元件可以更動態的被程式運行,而不用靜態的客製化每一個介面。開發一個好的元件可以提升整體的開發速度,讓任何使用元件的開發者
Thumbnail
前言 現在的前端需求已經越來越高,要考慮HTML及CSS的切版美觀程度,以及React以及Flutter所提出的元件(Componet、widget)觀念,也就是將元件模組化,使元件可以更動態的被程式運行,而不用靜態的客製化每一個介面。開發一個好的元件可以提升整體的開發速度,讓任何使用元件的開發者
Thumbnail
這是一個介紹React Text Wrap Balancer套件的文章,主要內容包括套件的使用方式,常見的實作方式和一些注意事項。文章內容較長,內容大概是在介紹套件的使用方法、使用技巧和注意事項。
Thumbnail
這是一個介紹React Text Wrap Balancer套件的文章,主要內容包括套件的使用方式,常見的實作方式和一些注意事項。文章內容較長,內容大概是在介紹套件的使用方法、使用技巧和注意事項。
Thumbnail
React Props - React 白話文運動。這一篇則會針對 React 語法進一步做講解, 前幾篇也學會了如何建立一個 React 元件,並且學會了元件之間有父子元件的關係。這篇會介紹 React Props 的概念,包含了:React 元件宣告、React Props。
Thumbnail
React Props - React 白話文運動。這一篇則會針對 React 語法進一步做講解, 前幾篇也學會了如何建立一個 React 元件,並且學會了元件之間有父子元件的關係。這篇會介紹 React Props 的概念,包含了:React 元件宣告、React Props。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News