用antd实现番茄钟

番茄工作法是十分有效的时间管理工具，动手开发一个番茄钟提高自己的工作效率。

点击链接，体验一个简单番茄钟的实现效果:软件测试工具箱

只需要一个js文件，代码如下

import { Typography, Statistic, Modal,Progress, Button, Space } from 'antd';
import {DashboardOutlined} from '@ant-design/icons';
import React,{ useState } from 'react';
const { Countdown } = Statistic;
const { Paragraph } = Typography;const CountDown = () => {const onFinish = () => {alert('恭喜你完成目标');};const [visible, setVisible] = useState(false);const deadline = Date.now() + 1000*60*25  ; // 设置25分钟倒计时const showModal = () => {setVisible(true);deadline = Date.now() + 1000*60*25;};const handleCancel = () => {setVisible(false);};return (<><p></p><Space align='left'><DashboardOutlined /><Paragraph>番茄钟</Paragraph></Space><p></p><Space direction="vertical"size="middle"> <Progress type="circle"  percent={100} format={() => `25分钟`} /> <Button onClick={showModal}>开始</Button></Space><Modalvisible={visible}title="请保持专注"onCancel={handleCancel}footer={[<Button key="back" onClick={handleCancel}>放弃</Button>,]}><Countdown value={deadline} onFinish={onFinish} format="mm:ss"/></Modal></>);
};export default CountDown;

用antd实现番茄钟相关推荐

todo文件说明已停止工作_番茄ToDo，一款颜值功能兼备的番茄钟。
文/ Quasimodo 首发于一周进步相信很多人都听过了「番茄工作法」,是一个对比GTD更加微观的时间管理方法. 它的工作原理是:每工作25分钟(即一个番茄时间),休息5分钟. 在这25分钟内,专 ...
番茄钟怎么调_学习神器-番茄钟
番茄钟番茄工作法是简单易行的时间管理方法. 使用番茄工作法,选择一个待完成的任务,将番茄时间设为25分钟,专注工作,中途不允许做任何与该任务无关的事. 直到番茄时钟响起,然后进行短暂休息一下(5分钟 ...
番茄钟怎么调_不一样的番茄计时 APP，让番茄钟回归效率的本质
这几年 App Store 上的效率应用层出不穷,为此苹果单独辟出了一个「效率」专栏,可谓是为了提升人民群众的工作学习效率用心良苦. 效率应用我个人将它们分成了这么两大类,分别是"提醒&qu ...
网页番茄钟(Pomodoro timer)
用js/jq实现一个番茄钟的方法最终效果如图: 这个番茄钟主要的功能需求有三个: 1. 修改休息时间 2. 修改工作时间 3. 显示timer 修改时间的部分比较简单,需要注意的就是在时间为1分钟的 ...
Pomodoro Technique番茄钟的理解
今天看了一篇文章关于番茄钟的描述.仔细看了几遍,觉得这个番茄钟只是一个时间管理的工具.将时间分成几个较小的时间片,在这个固定的时间片内集中精力去完成一项已经预计好的计划,尽量避免被打扰. 这个确实是一 ...
基于微信小程序实现番茄钟专注时间项目演示【附项目源码+论文说明】
基于微信小程序实现番茄钟专注时间项目演示摘要时间管理是指事先计划和运用一定的技能.方法和事物,以敏感.有效地利用时间完成既定的个人或安排的过程.其中番茄法则是一种先进的时间管理理论与方法,正受到越 ...
番茄钟App(Pomodoro Tracker)
最近为了学习Swift编程语言,写了一个番茄钟的App(Pomodoro Tracker).刚上线的1.2版本增加了Apple Watch的支持. iPhone版 Apple Watch版如果你跟我 ...
APP案例分析——嘀嗒番茄钟
第一部分调研, 评测个人第一次上手体验一直在用时间管理的软件,但是下载了卸载,来来去去也用了很多个.这个嘀嗒番茄钟也是最近比较喜欢的软件,界面简洁,功能简单,没有那么复杂非常容易上手. 功能性的 ...
番茄钟怎么调_实操番茄钟使用方法
听到这个番茄钟的时候,是一次我们在每周五的共读社,听到这个词的时候,满是纳闷,好奇心促使我去app上去找寻,没错,找到后就放在那里,自己也没再研究明白. 第二次听说,是一森要跟我们分享,可是自己工作时 ...

用antd实现番茄钟

用antd实现番茄钟相关推荐

最新文章

热门文章