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

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

news 2025/9/18 5:00:55

创建一个简单的时间管理应用程序，结合 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

AI-调查研究-01-正念冥想有用吗？对健康的影响及科学指南

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

编程新知 2025/9/14 13:49:41

Redis相关知识总结（缓存雪崩，缓存穿透，缓存击穿，Redis实现分布式锁，如何保持数据库和缓存一致）

文章目录 1.什么是Redis&#xff1f;2.为什么要使用redis作为mysql的缓存&#xff1f;3.什么是缓存雪崩、缓存穿透、缓存击穿&#xff1f;3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

编程新知 2025/9/13 17:44:49

ffmpeg（四）：滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具&#xff0c;可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下&#xff1a; ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜&#xff1a; ffmpeg…...

编程新知 2025/7/23 10:55:13

WEB3全栈开发——面试专业技能点P2智能合约开发（Solidity）

一、Solidity合约开发 下面是 Solidity 合约开发 的概念、代码示例及讲解&#xff0c;适合用作学习或写简历项目背景说明。 &#x1f9e0; 一、概念简介&#xff1a;Solidity 合约开发 Solidity 是一种专门为 以太坊&#xff08;Ethereum&#xff09;平台编写智能合约的高级编…...

编程新知 2025/8/13 16:04:59

关于 WASM：1. WASM 基础原理

一、WASM 简介 1.1 WebAssembly 是什么&#xff1f; WebAssembly&#xff08;WASM&#xff09; 是一种能在现代浏览器中高效运行的二进制指令格式&#xff0c;它不是传统的编程语言&#xff0c;而是一种 低级字节码格式&#xff0c;可由高级语言&#xff08;如 C、C、Rust&am…...

编程新知 2025/8/22 19:28:03

高防服务器能够抵御哪些网络攻击呢？

高防服务器作为一种有着高度防御能力的服务器&#xff0c;可以帮助网站应对分布式拒绝服务攻击&#xff0c;有效识别和清理一些恶意的网络流量&#xff0c;为用户提供安全且稳定的网络环境&#xff0c;那么&#xff0c;高防服务器一般都可以抵御哪些网络攻击呢&#xff1f;下面…...

编程新知 2025/9/3 19:14:38

基于matlab策略迭代和值迭代法的动态规划

经典的基于策略迭代和值迭代法的动态规划matlab代码&#xff0c;实现机器人的最优运输 Dynamic-Programming-master/Environment.pdf , 104724 Dynamic-Programming-master/README.md , 506 Dynamic-Programming-master/generalizedPolicyIteration.m , 1970 Dynamic-Programm…...

编程新知 2025/8/3 2:20:04

代理篇12|深入理解 Vite中的Proxy接口代理配置

在前端开发中，常常会遇到 跨域请求接口 的情况。为了解决这个问题，Vite 和 Webpack 都提供了 proxy 代理功能，用于将本地开发请求转发到后端服务器。 什么是代理（proxy）？ 代理是在开发过程中，前端项目通过开发服务器，将指定的请求“转发”到真实的后端服务器，从而绕…...

编程新知 2025/9/13 13:10:12

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中&#xff0c;从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备&#xff08;如专用硬件设备&#xff09;&#xff0c;从而消除了直接物理连接的需要。USB over IP的…...

编程新知 2025/9/13 17:42:33

AGain DB和倍数增益的关系

我在设置一款索尼CMOS芯片时&#xff0c;Again增益0db变化为6DB&#xff0c;画面的变化只有2倍DN的增益&#xff0c;比如10变为20。 这与dB和线性增益的关系以及传感器处理流程有关。以下是具体原因分析&#xff1a; 1. dB与线性增益的换算关系 6dB对应的理论线性增益应为&…...

编程新知 2025/7/8 0:38:36