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

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

news 2025/7/7 9:41:25

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

RestClient

什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端&#xff0c;它允许HTTP与Elasticsearch 集群通信&#xff0c;而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级&#xff…...

编程新知 2025/6/23 4:26:10

django filter 统计数量 按属性去重

在Django中&#xff0c;如果你想要根据某个属性对查询集进行去重并统计数量&#xff0c;你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求&#xff1a; 方法1&#xff1a;使用annotate()和Count 假设你有一个模型Item&#xff0c;并且你想…...

编程新知 2025/6/24 3:45:54

c++ 面试题(1)-----深度优先搜索（DFS）实现

操作系统&#xff1a;ubuntu22.04 IDE:Visual Studio Code 编程语言&#xff1a;C11 题目描述 地上有一个 m 行 n 列的方格&#xff0c;从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子&#xff0c;但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...

编程新知 2025/7/6 20:47:25

如何在看板中有效管理突发紧急任务

在看板中有效管理突发紧急任务需要&#xff1a;设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP&#xff08;Work-in-Progress&#xff09;弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中&#xff0c;设立专门的紧急任务通道尤为重要&#xff0c;这能…...

编程新知 2025/7/6 0:01:32

Robots.txt 文件

什么是robots.txt&#xff1f; robots.txt 是一个位于网站根目录下的文本文件&#xff08;如&#xff1a;https://example.com/robots.txt&#xff09;&#xff0c;它用于指导网络爬虫&#xff08;如搜索引擎的蜘蛛程序&#xff09;如何抓取该网站的内容。这个文件遵循 Robots…...

编程新知 2025/7/6 16:44:22

C++.OpenGL （10/64）基础光照（Basic Lighting）

基础光照（Basic Lighting） 冯氏光照模型（Phong Lighting Model） #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...

编程新知 2025/6/25 15:26:59

大模型多显卡多服务器并行计算方法与实践指南

一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术，以解决单机资源不足的问题。分布式训练主要分为两种模式： 数据并行：将数据分片到不同设备，每个设备拥有完整的模型副本 模型并行：将模型分割到不同设备，每个设备处理部分模型计算 现代大模型训练通常结合…...

编程新知 2025/6/24 6:21:26

10-Oracle 23 ai Vector Search 概述和参数

一、Oracle AI Vector Search 概述 企业和个人都在尝试各种AI&#xff0c;使用客户端或是内部自己搭建集成大模型的终端&#xff0c;加速与大型语言模型&#xff08;LLM&#xff09;的结合&#xff0c;同时使用检索增强生成&#xff08;Retrieval Augmented Generation &#…...

编程新知 2025/7/6 11:15:06

PAN/FPN

import torch import torch.nn as nn import torch.nn.functional as F import mathclass LowResQueryHighResKVAttention(nn.Module):"""方案 1: 低分辨率特征 (Query) 查询高分辨率特征 (Key, Value).输出分辨率与低分辨率输入相同。"""def __…...

编程新知 2025/7/6 7:40:12

GitHub 趋势日报 (2025年06月06日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 590 cognee 551 onlook 399 project-based-learning 348 build-your-own-x 320 ne…...

编程新知 2025/7/6 4:09:59