当前位置： 首页 > news >正文

时间管理应用（可复制源码）

news 2026/2/8 13:06:13

创建一个简单的时间管理应用程序，结合 Pomodoro 技术使用 HTML、CSS 和 JavaScript

1. HTML

创建一个基本的 HTML 文件 (index.html)：

<!DOCTYPE html>  
<html lang="zh">  
<head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Pomodoro 时间管理应用</title>  <link rel="stylesheet" href="styles.css">  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">  
</head>  
<body>  <div class="container">  <h1>Pomodoro 时间管理应用</h1>  <div class="timer">  <span id="timeDisplay">25:00</span>  </div>  <div class="time-settings">  <input type="number" id="workTime" placeholder="工作时间（分钟）" value="25" min="1">  <input type="number" id="breakTime" placeholder="休息时间（分钟）" value="5" min="1">  </div>  <div class="button-group">  <button id="startBtn"><i class="fas fa-play"></i> 开始</button>  <button id="stopBtn"><i class="fas fa-pause"></i> 停止</button>  <button id="resetBtn"><i class="fas fa-refresh"></i> 重置</button>  </div>  <div class="status" id="statusDisplay">状态: 准备开始</div>  <div class="stats" id="statsDisplay">完成的 Pomodoro 数量: <span id="pomodoroCount">0</span></div>  </div>  <audio id="timerEndSound" src="timer-end-sound.mp3" preload="auto"></audio>  <script src="script.js"></script>  
</body>  
</html>

2. CSS

创建一个简单的 CSS 文件 (styles.css) 来美化界面：

body {  font-family: 'Arial', sans-serif;  background: linear-gradient(to right, #f0f7ff, #e8f0fe);  margin: 0;  padding: 20px;  
}  .container {  max-width: 400px;  margin: auto;  background: white;  border-radius: 10px;  padding: 20px;  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);  text-align: center;  
}  h1 {  margin-bottom: 20px;  font-size: 24px;  color: #333;  
}  .timer {  font-size: 64px;  margin: 20px 0;  color: #28a745;  border: 2px solid #28a745;  border-radius: 10px;  padding: 20px;  background-color: #e9f7ef;  transition: background-color 0.5s ease;  
}  .timer.active {  background-color: #d4edda;  
}  .time-settings {  display: flex;  justify-content: space-between;  margin: 20px 0;  
}  input[type="number"] {  width: 48%;  padding: 10px;  border-radius: 5px;  border: 1px solid #ccc;  font-size: 16px;  transition: border-color 0.3s;  
}  input[type="number"]:focus {  border-color: #28a745;  
}  .button-group {  display: flex;  justify-content: space-between;  margin: 20px 0;  
}  button {  padding: 10px 15px;  margin: 5px;  border: none;  border-radius: 5px;  cursor: pointer;  background-color: #007bff;  color: white;  font-size: 16px;  transition: background-color 0.3s, transform 0.2s;  flex: 1;  
}  button:hover {  background-color: #0056b3;  transform: scale(1.05);  
}  .status {  margin-top: 20px;  font-size: 18px;  color: #555;  
}  .stats {  margin-top: 10px;  font-size: 16px;  color: #888;  
}  /* 响应式设计 */  
@media (max-width: 500px) {  .timer {  font-size: 48px;  }  button {  padding: 8px;  font-size: 14px;  }  input[type="number"] {  font-size: 14px;  }  
}

3. JavaScript

最后，创建一个 JavaScript 文件 (script.js) 来处理计时器逻辑：

let timer;  
let isRunning = false;  
let timeLeft; // 用于存储剩余时间  
let pomodoroCount = 0;  const timeDisplay = document.getElementById("timeDisplay");  
const statusDisplay = document.getElementById("statusDisplay");  
const pomodoroCountDisplay = document.getElementById("pomodoroCount");  
const timerEndSound = document.getElementById("timerEndSound");  function updateDisplay() {  const minutes = Math.floor(timeLeft / 60);  const seconds = timeLeft % 60;  timeDisplay.textContent = `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;  
}  function startTimer() {  if (isRunning) return; // 如果已经在运行，则不再启动  isRunning = true;  // 获取用户输入的工作和休息时间  const workTime = parseInt(document.getElementById("workTime").value) || 25;  const breakTime = parseInt(document.getElementById("breakTime").value) || 5;  // 初始化工作时间  timeLeft = workTime * 60; // 设置工作时间  statusDisplay.textContent = "状态: 工作中";  updateDisplay(); // 更新显示  timer = setInterval(() => {  if (timeLeft <= 0) {  clearInterval(timer);  isRunning = false;  pomodoroCount++;  pomodoroCountDisplay.textContent = pomodoroCount;  timerEndSound.play(); // 播放结束声音  statusDisplay.textContent = "状态: 休息时间！";  timeLeft = breakTime * 60; // 设置休息时间  updateDisplay(); // 更新显示  startTimer(); // 休息结束后自动开始下一个Pomodoro  } else {  timeLeft--;  updateDisplay();  }  }, 1000);  
}  function stopTimer() {  clearInterval(timer);  isRunning = false;  statusDisplay.textContent = "状态: 停止";  
}  function resetTimer() {  clearInterval(timer);  isRunning = false;  const workTime = parseInt(document.getElementById("workTime").value) || 25;  timeLeft = workTime * 60; // 重置为用户输入的工作时间  updateDisplay();  pomodoroCount = 0; // 重置Pomodoro计数  pomodoroCountDisplay.textContent = pomodoroCount;  statusDisplay.textContent = "状态: 准备开始";  
}  // 事件监听  
document.getElementById("startBtn").addEventListener("click", startTimer);  
document.getElementById("stopBtn").addEventListener("click", stopTimer);  
document.getElementById("resetBtn").addEventListener("click", resetTimer);  // 初始化显示  
resetTimer(); // 初始化时显示默认时间

相关文章：

时间管理应用（可复制源码）

创建一个简单的时间管理应用程序&#xff0c;结合 Pomodoro 技术使用 HTML、CSS 和 JavaScript 1. HTML 创建一个基本的 HTML 文件 (index.html)&#xff1a; <!DOCTYPE html> <html lang"zh"> <head> <meta charset"UTF-8"&…...

编程日记 2024/11/10 0:08:59

SQL server 列转行

在 SQL Server 中&#xff0c;将列转换为行的操作通常被称为“透视”&#xff08;Pivot&#xff09;的逆操作&#xff0c;即“反透视”&#xff08;Unpivot&#xff09;。SQL Server 提供了 UNPIVOT 关键字来实现这一功能。假设你有一个表 EmployeeDetails&#xff0c;其中包含…...

编程日记 2024/11/10 0:07:58

aws申请ssl证书的方法【该证书仅供aws】

这里先声明&#xff0c;过程是对的&#xff0c;最终没有达到目的。 原本想着申请ssl证书替代&#xff0c;结果发现aws证书只能给自己的服务器用 但是整套申请证书以及下载&#xff0c;以及使用aws控制台的过程可以参考借鉴。 起因&#xff1a; 腾讯云的ssl证书越来越没法用了…...

编程日记 2024/11/10 0:06:56

Linux中目录配置标准的FHS

文件系统层次结构标准&#xff08;Filesystem Hierarchy Standard, FHS&#xff09;定义了Linux和其他类Unix操作系统中文件和目录的标准布局。FHS的目标是确保在不同的Linux发行版之间具有一致的文件系统结构&#xff0c;从而使软件能够在不同的系统上容易地安装和运行。 FHS…...

编程日记 2024/11/10 0:05:55

目标检测YOLO实战应用案例100讲-基于深度学习的人眼视线检测

目录 知识储备 视觉深度的测定 基本知识 视觉检测中的关键技术 单眼感知景深 内部摄像机距离的效果 Face ID 与3D传感技术 什么是Face ID? 3D传感技术原理 主动测距法 被动测距法 基于深度学习的人眼视线检测代码 数据集读取与预处理 卷积神经网络模型构建 模型…...

编程日记 2024/11/10 0:04:54

SpringCloud篇（微服务）

目录 一、认识微服务 1. 单体架构 2. 分布式架构 3. 微服务 3.1. 特点 3.2. 优点 3.3 缺点 二、微服务设计、拆分原则 1. AKF 拆分原则 2. Y轴&#xff08;功能&#xff09;关注应用中功能划分&#xff0c;基于不同的业务拆分 3. X轴&#xff08;水平扩展&#xff09…...

编程日记 2024/11/10 0:00:51

[每日一练]过去30天的用户活动

#该题目来源于力扣&#xff1a; 1142. 过去30天的用户活动 II - 力扣&#xff08;LeetCode&#xff09; Activity 表&#xff1a;------------------------ | Column Name | Type | ------------------------ | user_id | int | | session_id | int | …...

编程日记 2024/11/9 23:58:49

华为2288HV2服务器安装BCLinux8U6无法显示完整安装界面的问题处理

本文记录了华为2288HV2服务器安装BCLinux8U6无法显示完整安装界面&#xff0c;在安装过程中配置选择时&#xff0c;右侧安装按钮不可见&#xff0c;导致安装无法继续的问题处理过程。 一、问题现象 华为2288HV2服务器安装BCLinux8U6时无法显示完整的安装界面&#xff0c;问题…...

编程日记 2024/11/9 23:57:47

【python】OpenCV—findContours（4.6）

文章目录 1、功能描述2、代码实现3、效果展示4、完整代码5、涉及到的库函数cv2.inRange 6、参考 1、功能描述 给出一张仅含有手指的图片&#xff0c;判断图片中有多少根手指 2、代码实现 导入库函数&#xff0c;图像预处理 import numpy as np import cv2 as cv img cv.im…...

编程日记 2024/11/9 23:52:41

【C++】——多态

一.多态的概念 1.多态 多态(polymorphism)的概念&#xff1a;通俗的来说&#xff0c;就是多种形态。多态分为静态多态(编译时多态)和动态多态(运行时多态)&#xff0c;而我们讲的多态大部分都是动态多态。 静态多态主要就是我们前面了解过的函数模板和函数重载&#xff0c;它…...

编程日记 2024/11/9 23:50:39

Web前端开发--HTML语言

文章目录 前言1.介绍2.组成3.基本框架4.常见标签4.1双标签4.1.1.标题标签4.2.2段落标签4.1.3文本格式化标签4.1.4超链接标签4.1.5视频标签4.1.6 音频标签 4.2单标签4.2.1换行标签和水平线标签4.2.2 图像标签 5.表单控件结语 前言 生活中处处都有网站&#xff0c;无论你是学习爬…...

编程日记 2024/11/9 23:46:35

AI驱动的网络空间智能对抗；无人集群系统，多体协同算法创新和故障智能预警

目录 AI驱动的网络空间智能对抗 认知与认知域安全 认知攻击-杀伤链 PPDR主动安全框架 短视频内容分析 不良视频鉴别：人工+智能 舆情监测 非介入式监测 大模型对新闻内容审查与播报 无人集群系统，多体协同算法创新和故障智能预警 一、无人集群系统概述 二、多体协…...

编程日记 2024/11/9 23:45:34

推荐一款SSD硬盘优化器：Auslogics SSD Optimizer Pro

SSD Optimizer Pro 是一款专为优化固态硬盘 (SSD) 性能而设计的专业工具&#xff0c;旨在最大化 SSD 的效率&#xff0c;延长硬盘使用寿命。凭借简便的操作界面和强大的优化功能&#xff0c;SSD Optimizer Pro 可以让用户充分利用 SSD 的优势&#xff0c;从而获得更高的系统性能…...

编程日记 2024/11/9 23:42:31

k8s-service、endpoints、pod之间是怎么进行网络互通的

k8s-service、endpoints、pod之间是怎么进行网络互通的 1、service2、endpoints3、service、endpoints、pod通信图4、不通服务pod内部间访问 1、service 在K8S中&#xff0c;Service是一种抽象&#xff0c;定义了一组Pod的逻辑集合和访问这些Pod的策略。首先&#xff0c;我们需…...

编程日记 2024/11/9 23:41:29

Go语言开发商城管理后台-GoFly框架商城插件已发布 需要Go开发商城的朋友可以来看看哦！

温馨提示&#xff1a;我们分享的文章是给需要的人&#xff0c;不需要的人请绕过&#xff0c;文明浏览&#xff0c;误恶语伤人&#xff01; 前言 虽然现在做商城的需求不多&#xff0c;但有很多项目中带有商城功能&#xff0c;如社区医院系统有上服务套餐、理疗产品需求、宠物…...

编程日记 2024/11/9 23:40:29

【51单片机】UART串口通信原理 + 使用

学习使用的开发板&#xff1a;STC89C52RC/LE52RC 编程软件&#xff1a;Keil5 烧录软件&#xff1a;stc-isp 开发板实图&#xff1a; 文章目录 串口硬件电路UART串口相关寄存器 编码单片机通过串口发送数据电脑通过串口发送数据控制LED灯 串口 串口是一种应用十分广泛的通讯接…...

编程日记 2024/11/9 23:39:27

高性能分布式缓存Redis-高可用部署

一、主从架构搭建 为什么要进行主从架构搭建&#xff0c;一台redis不行吗&#xff1f; ①、持久化后的数据只在一台机器上&#xff0c;因此当硬件发生故障时&#xff0c;比如主板或CPU坏了&#xff0c;这时候无法重启服务器&#xff0c;有什么办法可以保证服务器发生故障时数…...

编程日记 2024/11/9 23:36:25

如何使用XSL-FO生成PDF格式的电子发票的技术博文示例

目录 使用 XSL-FO 生成电子发票 PDF&#xff1a;从布局设计到优化为什么选择 XSL-FO&#xff1f;1. 初始设置2. 标题区块3. 买卖方信息4. 商品明细表格5. 合计信息6. 优化代码结构与布局7. 生成 PDF 文件8. 示例总结 使用 XSL-FO 生成电子发票 PDF&#xff1a;从布局设计到优化…...

编程日记 2024/11/9 23:34:23

TDengine 签约山东港，赋能港口数字化转型

随着全球港口物流数字化进程的加速&#xff0c;港口运营面临日益复杂的数据管理挑战&#xff0c;从能源管理、设备监控到运营安全保障&#xff0c;各类数据需要及时存储并高效分析。山东港在信息化建设过程中&#xff0c;数字化综合管理平台的性能和查询功能一度受到瓶颈制约。…...

编程日记 2024/11/9 23:33:22

基于YOLO11/v10/v8/v5深度学习的煤矿传送带异物检测系统设计与实现【python源码+Pyqt5界面+数据集+训练代码】

《------往期经典推荐------》 一、AI应用软件开发实战专栏【链接】 项目名称项目名称1.【人脸识别与管理系统开发】2.【车牌识别与自动收费管理系统开发】3.【手势识别系统开发】4.【人脸面部活体检测系统开发】5.【图片风格快速迁移软件开发】6.【人脸表表情识别系统】7.【…...

编程日记 2024/11/9 23:32:21

【Linux】C语言执行shell指令

在C语言中执行Shell指令 在C语言中&#xff0c;有几种方法可以执行Shell指令&#xff1a; 1. 使用system()函数 这是最简单的方法&#xff0c;包含在stdlib.h头文件中&#xff1a; #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...

编程新知 2025/11/20 18:42:48

安宝特方案丨XRSOP人员作业标准化管理平台：AR智慧点检验收套件

在选煤厂、化工厂、钢铁厂等过程生产型企业&#xff0c;其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进&#xff0c;需提前预防假检、错检、漏检&#xff0c;推动智慧生产运维系统数据的流动和现场赋能应用。同时&#xff0c;…...

编程新知 2026/2/5 17:57:20

蓝桥杯 2024 15届国赛 A组 儿童节快乐

P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡&#xff0c;轻快的音乐在耳边持续回荡&#xff0c;小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下&#xff0c;六一来了。 今天是六一儿童节&#xff0c;小蓝老师为了让大家在节…...

编程新知 2025/12/5 2:40:04

汽车生产虚拟实训中的技能提升与生产优化​

在制造业蓬勃发展的大背景下&#xff0c;虚拟教学实训宛如一颗璀璨的新星&#xff0c;正发挥着不可或缺且日益凸显的关键作用&#xff0c;源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例&#xff0c;汽车生产线上各类…...

编程新知 2026/1/27 7:46:36

STM32标准库-DMA直接存储器存取

文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA&#xff08;Direct Memory Access&#xff09;直接存储器存取 DMA可以提供外设…...

编程新知 2026/1/26 10:55:51

【2025年】解决Burpsuite抓不到https包的问题

环境&#xff1a;windows11 burpsuite:2025.5 在抓取https网站时&#xff0c;burpsuite抓取不到https数据包&#xff0c;只显示&#xff1a; 解决该问题只需如下三个步骤&#xff1a; 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...

编程新知 2026/1/28 3:43:20

鱼香ros docker配置镜像报错：https://registry-1.docker.io/v2/

使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题&#xff1a;docker pull 失败 网络不同&#xff0c;需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...

编程新知 2025/12/31 6:28:08

【JavaSE】绘图与事件入门学习笔记

-Java绘图坐标体系 坐标体系-介绍 坐标原点位于左上角&#xff0c;以像素为单位。 在Java坐标系中,第一个是x坐标,表示当前位置为水平方向&#xff0c;距离坐标原点x个像素;第二个是y坐标&#xff0c;表示当前位置为垂直方向&#xff0c;距离坐标原点y个像素。 坐标体系-像素 …...

编程新知 2025/12/19 20:46:15

GruntJS-前端自动化任务运行器从入门到实战

Grunt 完全指南&#xff1a;从入门到实战 一、Grunt 是什么&#xff1f; Grunt是一个基于 Node.js 的前端自动化任务运行器&#xff0c;主要用于自动化执行项目开发中重复性高的任务&#xff0c;例如文件压缩、代码编译、语法检查、单元测试、文件合并等。通过配置简洁的任务…...

编程新知 2026/1/25 11:52:39

scikit-learn机器学习

# 同时添加如下代码, 这样每次环境(kernel)启动的时候只要运行下方代码即可: # Also add the following code, # so that every time the environment (kernel) starts, # just run the following code: import sys sys.path.append(/home/aistudio/external-libraries)机…...

编程新知 2026/2/1 17:50:36