AISchedule(4)：番茄钟功能

AICodeThunder2023-12-04 19:33
html 复制代码 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>时间管理器</title>
  <!-- 加载样式表 -->
  <style>
    /* 基础样式 */
    body {
      background: linear-gradient(to bottom, #f2f2f2, #e0e0e0);
      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    }
    
    /* 表格样式 */
    table {
      border-collapse: collapse;
      border: 1px solid #ddd;
      border-radius: 5px;
      box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
      margin: 50px auto;
      width: 80%;
    }
    
    th {
      background-color: #f5f5f5;
      color: #333;
      font-weight: bold;
      padding: 10px 20px;
      text-align: center;
      text-shadow: 1px 1px 0px rgba(255,255,255,0.5);
    }
    
    td {
      background-color: #fff;
      color: #333;
      padding: 10px 20px;
      text-align: center;
      vertical-align: middle;
    }

    /* 输入框样式 */
    input[type="text"], input[type="button"], input[type="submit"], input[type="number"] {
      border: 1px solid #ccc;
      border-radius: 5px;
      font-size: 16px;
      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
      padding: 10px;
      width: 100%;
    }
    
    input[type="text"]:focus, input[type="number"]:focus, input[type="button"]:hover, input[type="submit"]:hover {
      border-color: #333;
      outline: none;
    }
    
    /* 按钮样式 */
    .btn-row {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 20px;
    }

    .btn-container {
      display: flex;
      justify-content: center;
      margin-top: 30px;
    }

    .btn {
      background-color: #4CAF50;
      border: none;
      color: white;
      padding: 10px 20px;
      text-align: center;
      text-decoration: none;
      font-size: 16px;
      margin: 0 10px;
      border-radius: 5px;
      width: 120px;
      height: 40px;
      cursor: pointer;
      transition: background-color 0.3s ease-out, color 0.3s ease-out;
    }

    .btn-add {
      background-color: #00a600;
      padding-left: 20px;
      padding-right: 20px;
    }
    
    .btn-remove {
      background-color: #EA3526;
      padding-left: 20px;
      padding-right: 20px;
    }
    
    .btn-submit {
      background-color: #009BFF;
      width: 80px;
      margin-left: 5px;
      padding-left: 5px;
      padding-right: 5px;
    }

    .btn-clear {
      background-color: #ff9800;
      width: 80px;
      margin-left: 5px;
      padding-left: 5px;
      padding-right: 5px;
    }
    
    .btn-reminder {
      background-color: #FFC107;
      width: 120px;
      margin-left: 5px;
      padding-left: 5px;
      padding-right: 5px;
      font-size: 14px;
    }
    
    .btn:hover {
      background-color: rgba(76, 175, 80, 1);
      color: #fff;
      opacity: 0.7;
    }
    
    .btn-add:hover {
      background-color: rgba(0, 166, 0, 0.7);
    }
    
    .btn-remove:hover {
      background-color: rgba(234, 53, 38, 0.7);
    }
    
    .btn-submit:hover {
      background-color: rgba(0, 155, 255, 0.7);
    }

    .btn-clear:hover {
      background-color: rgba(255, 152, 0, 0.7);
    }
    
    .btn-reminder:hover {
      background-color: rgba(255, 193, 7, 0.7);
    }
    
    /* 标题样式 */
    h1 {
      color: #333;
      text-align: center;
      margin-top: 50px;
      margin-bottom: 30px;
      font-size: 4em;
      text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.1);
      letter-spacing: 2px;
    }

    /* 描述样式 */
    p {
      color: #555;
      font-size: 1.2em;
      font-weight: bold;
      text-align: center;
      margin-bottom: 50px;
    }

    /* 响应式布局 */
    @media(max-width: 768px) {
      table {
        font-size: 14px;
        width: 95%;
      }
      
      input[type="text"], input[type="button"], input[type="submit"], input[type="number"] {
        font-size: 14px;
        padding: 8px;
      }
      
      h1 {
        font-size: 3em;
      }

      p {
        font-size: 1em;
      }

      .schedule-table {
        border-collapse: collapse;
        width: 100%;
        margin-top: 20px;
      }

      .schedule-table th {
        background-color: #4CAF50;
        color: white;
        font-size: 14px;
        font-weight: normal;
        padding: 8px;
        text-align: center;
      }

      .schedule-table td {
        border: 1px solid #ddd;
        font-size: 14px;
        padding: 8px;
        text-align: center;
      }

      .break-row {
        background-color: #f5f5f5;
        font-size: 14px;
        font-weight: bold;
      }

      /* 弹窗样式 */
      .schedule-window {
        width: 90%;
        margin: 50px auto;
      }

      .schedule-header {
        font-size: 24px;
        font-weight: bold;
        text-align: center;
        margin-bottom: 20px;
      }

      .schedule-wrapper {
        overflow-x: auto;
      }

      .schedule-close {
        position: absolute;
        top: 10px;
        right: 10px;
        font-size: 20px;
        cursor: pointer;
      }
    }

    /* 调整按钮布局 */
    .btn-container {
      display: flex;
      justify-content: center;
      margin-top: 30px;
    }

    .btn {
      margin: 0 10px;
    }

    .schedule-table {
      border-collapse: collapse;
      width: 100%;
      margin-top: 20px;
    }

    .schedule-table th {
      background-color: #4CAF50;
      color: white;
      font-size: 14px;
      font-weight: normal;
      padding: 8px;
      text-align: center;
    }

    .schedule-table td {
      border: 1px solid #ddd;
      font-size: 14px;
      padding: 8px;
      text-align: center;
    }

    .break-row {
      background-color: #f5f5f5;
      font-size: 14px;
      font-weight: bold;
    }

    /* 添加番茄钟样式 */
    .tomato-container {
      display: flex;
      justify-content: center;
      margin-top: 30px;
      margin-bottom: 30px;
    }

    .tomato-wrapper {
      width: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }

    .tomato-tasks {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 30px;
      margin-bottom: 30px;
    }

    .tomato-task {
      padding: 10px 20px;
      border-radius: 5px;
      background-color: #fff;
      margin: 0 10px;
      box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
      text-align: center;
      font-size: 16px;
      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
      text-align: center;
      width: 120px;
      height: 40px;
    }

    .tomato-task-active {
      background-color: #4CAF50;
      color: #fff;
    }

    .tomato-timer {
      font-size: 5em;
      font-weight: bold;
      color: #4CAF50;
      text-align: center;
      margin-bottom: 30px;
    }

    .tomato-buttons {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .tomato-button {
      background-color: #4CAF50;
      border:none;
      color: white;
      padding: 10px 20px;
      text-align: center;
      text-decoration: none;
      font-size: 16px;
      margin: 0 10px;
      border-radius: 5px;
      width: 120px;
      height: 40px;
      cursor: pointer;
      transition: background-color 0.3s ease-out, color 0.3s ease-out;
    }

    .tomato-button:hover {
      background-color: rgba(76, 175, 80, 1);
      color: #fff;
      opacity: 0.7;
    }

    /* 模态框样式 */
    .modal {
      display: none; /* 隐藏模态框 */
      position: fixed; /* 固定定位 */
      z-index: 1; /* 设置模态框在最上层 */
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,0.4); /* 半透明黑色背景 */
    }

    .modal-content {
      background-color: #fff;
      margin: 15% auto;
      padding: 20px;
      border: 1px solid #888;
      border-radius: 5px;
      width: 50%;
      height: 50%;
    }

    .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .modal-header h2 {
      margin: 0;
      font-size: 24px;
      font-weight: bold;
    }

    .close {
      color: #888;
      font-size: 28px;
      font-weight: bold;
      cursor: pointer;
    }

    /* 响应式模态框 */
    @media(max-width: 768px) {
      .modal-content {
        width: 90%;
        height: 70%;
      }
    }
  </style>
</head>

<body>
  <h1>时间管理器</h1>
  <p>一个事件列表工具，帮助你更好地安排和管理时间。</p>
  
  <!-- 创建表单 -->
  <form id="myForm" onsubmit="return validateForm()">
    <!-- 创建事件列表 -->
    <table id="myTable">
      <thead>
        <tr>
          <th>时间(分钟)</th>
          <th>任务</th>
        </tr>
      </thead>
      <tbody id="myTbody">
        <!-- 创建第一行 -->
        <tr>
          <td><input type="number" min="1" name="time[]" required/><label for="time[]"></label></td>
          <td><input type="text" name="task[]" required/><label for="task[]"></label></td>
        </tr>
      </tbody>
    </table>
    
    <!-- 创建按钮组 -->
    <div class="btn-container">
      <!-- 创建添加事件按钮 -->
      <button class="btn btn-add" type="button" onclick="addRow()">+1行</button>
      <!-- 创建删除事件按钮 -->
      <button class="btn btn-remove" type="button" onclick="deleteRow()">-1行</button>
      <!-- 创建清空按钮 -->
      <button class="btn btn-clear" type="button" onclick="clearTable()">清空</button>
      <!-- 创建提交按钮 -->
      <input class="btn btn-submit" type="submit" value="我已完成表单"/>
    </div>
  </form>

  <!-- 添加番茄钟 -->
  <div class="tomato-container" id="tomato-container">
    <div class="tomato-wrapper">
      <div class="tomato-tasks" id="tomato-tasks">
        <!-- 任务列表 -->
      </div>
      <div class="tomato-timer" id="tomato-timer">25:00</div>
      <div class="tomato-buttons">
        <button class="tomato-button" id="start-button" onclick="startTimer()">开始</button>
        <button class="tomato-button" id="pause-button" onclick="pauseTimer()">暂停</button>
        <button class="tomato-button" id="stop-button" onclick="stopTimer()">停止</button>
      </div>
    </div>
  </div>

  <!-- 创建模态框 -->
  <div id="myModal" class="modal">
    <div class="modal-content">
      <div class="modal-header">
        <h2 id="modal-header">番茄钟已结束！</h2>
        <span class="close" id="close">&times;</span>
      </div>
      <div class="modal-body" id="modal-body">
        
      </div>
      <div class="modal-footer">
        <button class="btn btn-reminder" onclick="remind()">提醒我</button>
        <button class="btn btn-submit" onclick="resetTimer()">再来一组</button>
      </div>
    </div>
  </div>
  
  <!-- 创建脚本 -->
  <script>
    // 创建全局变量
    var timerInterval;
    var currentTaskIndex = 0;
    var tomatoTasks = [];
    var tomatoTime = 25 * 60;
    var tomatoStartTime = tomatoTime;
    var taskList = document.getElementsByName('task[]');
    var timeList = document.getElementsByName('time[]');
    var modal = document.getElementById("myModal");
    var modalHeader = document.getElementById("modal-header");
    var modalBody = document.getElementById("modal-body");
    var modalClose = document.getElementById("close");

    // 尝试从本地存储加载列表
    if (localStorage.getItem("eventList")) {
      document.getElementById("myTable").innerHTML = localStorage.getItem("eventList");
    }

    // 初始化番茄钟任务
    for (var i = 0; i < taskList.length; i++) {
      tomatoTasks.push({task: taskList[i].value, time: timeList[i].value * 60});
    }

    // 添加行
    function addRow() {
      var table = document.getElementById("myTbody");
      
      var row = table.insertRow(-1);
      var cell1 = row.insertCell(0);
      var cell2 = row.insertCell(1);
      cell1.innerHTML = '<input type="number" min="1" name="time[]" required/><label for="time[]">时间(分钟)</label>';
      cell2.innerHTML = '<input type="text" name="task[]" required/><label for="task[]">任务名称</label>';
    }

    // 删除行
    function deleteRow() {
      var table = document.getElementById("myTbody");
      if(table.rows.length > 1) {
        table.deleteRow(-1);
      }
    }

    // 清空表格
    function clearTable() {
      if(confirm("确定要清空时间列表吗？")) {
        document.getElementById("myTbody").innerHTML = '<tr><td><input type="number" min="1" name="time[]" required/><label for="time[]">时间(分钟)</label></td><td><input type="text" name="task[]" required/><label for="task[]">任务名称</label></td></tr>';
        localStorage.removeItem("eventList");
      }
    }

    // 验证表单
    function validateForm() {
      var table = document.getElementById("myTable");
      for(var i = 1; i < table.rows.length; i++) {
        if (table.rows[i].cells[0].firstElementChild.value == "" || table.rows[i].cells[1].firstElementChild.value == "") {
          alert("请填写完整的时间列表！");
          return false;
        }
      }
      // 保存事件列表到本地存储
      localStorage.setItem("eventList", document.getElementById("myTable").innerHTML);
      // 创建番茄钟任务列表
      tomatoTasks = [];
      for (var i = 0; i < taskList.length; i++) {
        tomatoTasks.push({task: taskList[i].value, time: timeList[i].value * 60});
      }
      // 显示番茄钟
      showTomato();
      return false;
    }

    // 显示番茄钟
    function showTomato() {
      // 清空任务列表
      document.getElementById("tomato-tasks").innerHTML = "";
      // 显示任务列表
      for (var i = 0; i < tomatoTasks.length; i++) {
        var taskButton = document.createElement("button");
        taskButton.innerText = tomatoTasks[i].task;
        taskButton.className = "tomato-task";
        if (i == currentTaskIndex) {
          taskButton.classList.add("tomato-task-active");
        }
        taskButton.setAttribute("onclick", "changeTask(" + i + ")");
        document.getElementById("tomato-tasks").appendChild(taskButton);
      }
      // 显示番茄钟容器
      var container = document.getElementById("tomato-container");
      if (container.style.display === "none") {
        container.style.display = "flex";
      }
      // 开始倒计时
      startTimer();
    }

    // 开始计时器
    function startTimer() {
      // 显示暂停按钮
      document.getElementById("pause-button").style.display = "inline-block";
      // 隐藏
      document.getElementById("start-button").style.display = "none";
      // 设置定时器
      timerInterval = setInterval(updateTimer, 1000);
    }

    // 暂停计时器
    function pauseTimer() {
      // 显示开始按钮
      document.getElementById("start-button").style.display = "inline-block";
      // 隐藏暂停按钮
      document.getElementById("pause-button").style.display = "none";
      // 清除定时器
      clearInterval(timerInterval);
    }

    // 停止计时器
    function stopTimer() {
      // 隐藏番茄钟容器
      var container = document.getElementById("tomato-container");
      container.style.display = "none";
      // 清除定时器
      clearInterval(timerInterval);
      // 重置番茄钟
      resetTimer();
    }

    // 重置计时器
    function resetTimer() {
      // 重置当前任务索引
      currentTaskIndex = 0;
      // 重置时间
      tomatoTime = tomatoStartTime;
      // 显示开始按钮
      document.getElementById("start-button").style.display = "inline-block";
      // 隐藏暂停按钮
      document.getElementById("pause-button").style.display = "none";
      // 关闭模态框
      modal.style.display = "none";
      // 显示第一个任务
      showTask();
    }

    function updateTimer() {
      // 更新时间
      tomatoTime--;
      // 显示时间
      var minutes = Math.floor(tomatoTime / 60);
      var seconds = tomatoTime % 60;
      document.getElementById("tomato-timer").innerHTML = (minutes < 10 ? "0" : "") + minutes + ":" + (seconds < 10 ? "0" : "") + seconds;
      // 时间到了
      if (tomatoTime == 0) {
        // 播放提示音
        var audio = new Audio("https://assets.coderrocketfuel.com/pomodoro-times-up.mp3");
        audio.play();
        // 显示模态框
        modalHeader.innerText = tomatoTasks[currentTaskIndex].task;
        modalBody.innerHTML = "恭喜你完成了这个任务！";
        modal.style.display = "block";
        // 显示下一个任务
        currentTaskIndex++;
        if (currentTaskIndex < tomatoTasks.length) {
          showTask();
        }
        else {
          // 全部任务完成
          resetTimer();
        }
      }
    }

    // 显示当前任务
    function showTask() {
      // 更新时间
      tomatoTime = tomatoTasks[currentTaskIndex].time;
      tomatoStartTime = tomatoTime;
      // 显示任务
      var taskButton = document.getElementsByClassName("tomato-task")[currentTaskIndex];
      for (var i = 0; i < taskList.length; i++) {
        if (taskList[i].value == tomatoTasks[currentTaskIndex].task) {
          taskButton.classList.add("tomato-task-active");
          timeList[i].focus();
        }
        else {
          taskList[i].parentNode.parentNode.classList.remove("tomato-task-active");
        }
      }
      // 更新时间显示
      var minutes = Math.floor(tomatoTime / 60);
      var seconds = tomatoTime % 60;
      document.getElementById("tomato-timer").innerHTML = (minutes < 10 ? "0" : "") + minutes + ":" + (seconds < 10 ? "0" : "") + seconds;
    }

    // 切换任务
    function changeTask(index) {
      if (index != currentTaskIndex) {
        // 更新索引
        currentTaskIndex = index;
        // 显示任务
        showTask();
      }
    }

    // 关闭模态框
    modalClose.onclick = function() {
      modal.style.display = "none";
    }

    // 点击模态框外部区域关闭模态框
    window.onclick = function(event) {
      if (event.target == modal) {
        modal.style.display = "none";
      }
    }

    // 提醒功能
    function remind() {
      // 创建通知
      if (Notification.permission !== "granted") {
        Notification.requestPermission();
      }
      else {
        var notification = new Notification(tomatoTasks[currentTaskIndex - 1].task, {
          body: "时间到了！",
        });
      }
      // 关闭模态框
      modal.style.display = "none";
    }
  </script>
</body>
</html>
相关推荐
崔庆才丨静觅6 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby60617 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了7 小时前
「2025 年终总结」在所有失去的人中，我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅7 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅8 小时前
5分钟快速搭建 AI 平台并用它赚钱！
前端
崔庆才丨静觅8 小时前
比官方便宜一半以上！Midjourney API 申请及使用
前端
Moment8 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅8 小时前
刷屏全网的“nano-banana”API接入指南！0.1元/张量产高清创意图，开发者必藏
前端
剪刀石头布啊8 小时前
jwt介绍
前端
爱敲代码的小鱼8 小时前
AJAX（异步交互的技术来实现从服务端中获取数据）：
前端·javascript·ajax
热门推荐
01GitHub 镜像站点02Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services03openclaw配置教程（linux+局域网ollama）04UV安装并设置国内源05OpenClaw Chrome扩展使用教程 - 浏览器中继控制06Linux下V2Ray安装配置指南07Claude Code Skills 实用使用手册08Vue-skills的中文文档09让 Trae IDE 智能体 “读懂”文档 Excel+PDF+DOCX ：mcp-documents-reader 工具使用指南10一文了解国产算子编程语言 TileLang，TileLang 对国产开源生态的影响与启示