时间管理应用（可复制源码）
创建一个简单的时间管理应用程序，结合 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(); // 初始化时显示默认时间
相关文章：
时间管理应用（可复制源码）
创建一个简单的时间管理应用程序，结合 Pomodoro 技术使用 HTML、CSS 和 JavaScript 1. HTML 创建一个基本的 HTML 文件 (index.html)： <!DOCTYPE html> <html lang"zh"> <head> <meta charset"UTF-8"&…...
SQL server 列转行
在 SQL Server 中，将列转换为行的操作通常被称为“透视”（Pivot）的逆操作，即“反透视”（Unpivot）。SQL Server 提供了 UNPIVOT 关键字来实现这一功能。假设你有一个表 EmployeeDetails，其中包含…...
aws申请ssl证书的方法【该证书仅供aws】
这里先声明，过程是对的，最终没有达到目的。 原本想着申请ssl证书替代，结果发现aws证书只能给自己的服务器用 但是整套申请证书以及下载，以及使用aws控制台的过程可以参考借鉴。 起因： 腾讯云的ssl证书越来越没法用了…...
Linux中目录配置标准的FHS
文件系统层次结构标准（Filesystem Hierarchy Standard, FHS）定义了Linux和其他类Unix操作系统中文件和目录的标准布局。FHS的目标是确保在不同的Linux发行版之间具有一致的文件系统结构，从而使软件能够在不同的系统上容易地安装和运行。 FHS…...
目标检测YOLO实战应用案例100讲-基于深度学习的人眼视线检测
目录 知识储备 视觉深度的测定 基本知识 视觉检测中的关键技术 单眼感知景深 内部摄像机距离的效果 Face ID 与3D传感技术 什么是Face ID? 3D传感技术原理 主动测距法 被动测距法 基于深度学习的人眼视线检测代码 数据集读取与预处理 卷积神经网络模型构建 模型…...
SpringCloud篇（微服务）
目录 一、认识微服务 1. 单体架构 2. 分布式架构 3. 微服务 3.1. 特点 3.2. 优点 3.3 缺点 二、微服务设计、拆分原则 1. AKF 拆分原则 2. Y轴（功能）关注应用中功能划分，基于不同的业务拆分 3. X轴（水平扩展）…...
[每日一练]过去30天的用户活动
#该题目来源于力扣： 1142. 过去30天的用户活动 II - 力扣（LeetCode） Activity 表：------------------------ | Column Name | Type | ------------------------ | user_id | int | | session_id | int | …...
华为2288HV2服务器安装BCLinux8U6无法显示完整安装界面的问题处理
本文记录了华为2288HV2服务器安装BCLinux8U6无法显示完整安装界面，在安装过程中配置选择时，右侧安装按钮不可见，导致安装无法继续的问题处理过程。 一、问题现象 华为2288HV2服务器安装BCLinux8U6时无法显示完整的安装界面，问题…...
【python】OpenCV—findContours（4.6）
文章目录 1、功能描述2、代码实现3、效果展示4、完整代码5、涉及到的库函数cv2.inRange 6、参考 1、功能描述 给出一张仅含有手指的图片，判断图片中有多少根手指 2、代码实现 导入库函数，图像预处理 import numpy as np import cv2 as cv img cv.im…...
【C++】——多态
一.多态的概念 1.多态 多态(polymorphism)的概念：通俗的来说，就是多种形态。多态分为静态多态(编译时多态)和动态多态(运行时多态)，而我们讲的多态大部分都是动态多态。 静态多态主要就是我们前面了解过的函数模板和函数重载，它…...
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.表单控件结语 前言 生活中处处都有网站，无论你是学习爬…...
AI驱动的网络空间智能对抗；无人集群系统，多体协同算法创新和故障智能预警
目录 AI驱动的网络空间智能对抗 认知与认知域安全 认知攻击-杀伤链 PPDR主动安全框架 短视频内容分析 不良视频鉴别：人工+智能 舆情监测 非介入式监测 大模型对新闻内容审查与播报 无人集群系统，多体协同算法创新和故障智能预警 一、无人集群系统概述 二、多体协…...
推荐一款SSD硬盘优化器：Auslogics SSD Optimizer Pro
SSD Optimizer Pro 是一款专为优化固态硬盘 (SSD) 性能而设计的专业工具，旨在最大化 SSD 的效率，延长硬盘使用寿命。凭借简便的操作界面和强大的优化功能，SSD Optimizer Pro 可以让用户充分利用 SSD 的优势，从而获得更高的系统性能…...
k8s-service、endpoints、pod之间是怎么进行网络互通的
k8s-service、endpoints、pod之间是怎么进行网络互通的 1、service2、endpoints3、service、endpoints、pod通信图4、不通服务pod内部间访问 1、service 在K8S中，Service是一种抽象，定义了一组Pod的逻辑集合和访问这些Pod的策略。首先，我们需…...
Go语言开发商城管理后台-GoFly框架商城插件已发布 需要Go开发商城的朋友可以来看看哦！
温馨提示：我们分享的文章是给需要的人，不需要的人请绕过，文明浏览，误恶语伤人！ 前言 虽然现在做商城的需求不多，但有很多项目中带有商城功能，如社区医院系统有上服务套餐、理疗产品需求、宠物…...
【51单片机】UART串口通信原理 + 使用
学习使用的开发板：STC89C52RC/LE52RC 编程软件：Keil5 烧录软件：stc-isp 开发板实图： 文章目录 串口硬件电路UART串口相关寄存器 编码单片机通过串口发送数据电脑通过串口发送数据控制LED灯 串口 串口是一种应用十分广泛的通讯接…...
高性能分布式缓存Redis-高可用部署
一、主从架构搭建 为什么要进行主从架构搭建，一台redis不行吗？ ①、持久化后的数据只在一台机器上，因此当硬件发生故障时，比如主板或CPU坏了，这时候无法重启服务器，有什么办法可以保证服务器发生故障时数…...
如何使用XSL-FO生成PDF格式的电子发票的技术博文示例
目录 使用 XSL-FO 生成电子发票 PDF：从布局设计到优化为什么选择 XSL-FO？1. 初始设置2. 标题区块3. 买卖方信息4. 商品明细表格5. 合计信息6. 优化代码结构与布局7. 生成 PDF 文件8. 示例总结 使用 XSL-FO 生成电子发票 PDF：从布局设计到优化…...
TDengine 签约山东港，赋能港口数字化转型
随着全球港口物流数字化进程的加速，港口运营面临日益复杂的数据管理挑战，从能源管理、设备监控到运营安全保障，各类数据需要及时存储并高效分析。山东港在信息化建设过程中，数字化综合管理平台的性能和查询功能一度受到瓶颈制约。…...
基于YOLO11/v10/v8/v5深度学习的煤矿传送带异物检测系统设计与实现【python源码+Pyqt5界面+数据集+训练代码】
《------往期经典推荐------》 一、AI应用软件开发实战专栏【链接】 项目名称项目名称1.【人脸识别与管理系统开发】2.【车牌识别与自动收费管理系统开发】3.【手势识别系统开发】4.【人脸面部活体检测系统开发】5.【图片风格快速迁移软件开发】6.【人脸表表情识别系统】7.【…...
vscode里如何用git
打开vs终端执行如下： 1 初始化 Git 仓库（如果尚未初始化） git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...
基于数字孪生的水厂可视化平台建设：架构与实践
分享大纲： 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年，数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段，基于数字孪生的水厂可视化平台的…...
镜像里切换为普通用户
如果你登录远程虚拟机默认就是 root 用户，但你不希望用 root 权限运行 ns-3（这是对的，ns3 工具会拒绝 root），你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案：创建非 roo…...
python爬虫：Newspaper3k 的详细使用（好用的新闻网站文章抓取和解析的Python库）
更多内容请见： 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...
Python爬虫（一）：爬虫伪装
一、网站防爬机制概述 在当今互联网环境中，具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类： 身份验证机制：直接将未经授权的爬虫阻挡在外反爬技术体系：通过各种技术手段增加爬虫获取数据的难度…...
图表类系列各种样式PPT模版分享
图标图表系列PPT模版，柱状图PPT模版，线状图PPT模版，折线图PPT模版，饼状图PPT模版，雷达图PPT模版，树状图PPT模版 图表类系列各种样式PPT模版分享：图表系列PPT模板https://pan.quark.cn/s/20d40aa…...
Linux C语言网络编程详细入门教程：如何一步步实现TCP服务端与客户端通信
文章目录 Linux C语言网络编程详细入门教程：如何一步步实现TCP服务端与客户端通信前言一、网络通信基础概念二、服务端与客户端的完整流程图解三、每一步的详细讲解和代码示例1. 创建Socket（服务端和客户端都要）2. 绑定本地地址和端口&#x…...
STM32---外部32.768K晶振（LSE）无法起振问题
晶振是否起振主要就检查两个1、晶振与MCU是否兼容；2、晶振的负载电容是否匹配 目录 一、判断晶振与MCU是否兼容 二、判断负载电容是否匹配 1. 晶振负载电容（CL）与匹配电容（CL1、CL2）的关系 2. 如何选择 CL1 和 CL…...
TSN交换机正在重构工业网络，PROFINET和EtherCAT会被取代吗？
在工业自动化持续演进的今天，通信网络的角色正变得愈发关键。 2025年6月6日，为期三天的华南国际工业博览会在深圳国际会展中心（宝安）圆满落幕。作为国内工业通信领域的技术型企业，光路科技（Fiberroad&…...
Modbus RTU与Modbus TCP详解指南
目录 1. Modbus协议基础 1.1 什么是Modbus？ 1.2 Modbus协议历史 1.3 Modbus协议族 1.4 Modbus通信模型 🎭 主从架构 🔄 请求响应模式 2. Modbus RTU详解 2.1 RTU是什么？ 2.2 RTU物理层 🔌 连接方式 ⚡ 通信参数 2.3 RTU数据帧格式 📦 帧结构详解 🔍…...