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>
相关推荐
SameX2 分钟前
初识 HarmonyOS Next 的分布式管理：设备发现与认证
前端·harmonyos
M_emory_28 分钟前
解决 git clone 出现：Failed to connect to 127.0.0.1 port 1080: Connection refused 错误
前端·vue.js·git
Ciito32 分钟前
vue项目使用eslint+prettier管理项目格式化
前端·javascript·vue.js
成都被卷死的程序员1 小时前
响应式网页设计--html
前端·html
fighting ~1 小时前
react17安装html-react-parser运行报错记录
javascript·react.js·html
老码沉思录1 小时前
React Native 全栈开发实战班 - 列表与滚动视图
javascript·react native·react.js
abments1 小时前
JavaScript逆向爬虫教程-------基础篇之常用的编码与加密介绍(python和js实现)
javascript·爬虫·python
mon_star°1 小时前
将答题成绩排行榜数据通过前端生成excel的方式实现导出下载功能
前端·excel
Zrf21913184551 小时前
前端笔试中oj算法题的解法模版
前端·readline·oj算法
老码沉思录2 小时前
React Native 全栈开发实战班 - 状态管理入门（Context API）
javascript·react native·react.js
热门推荐
01玄机平台应急响应—webshell查杀02Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04新版微信小程序获取用户手机号05文件或文件夹名称中有空格如何批量去除06组基轨迹建模 GBTM的介绍与实现（Stata 或 R）07【TC3xx芯片】TC3xx芯片电源管理系统PMS详解08优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间09基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测10【Flutter】基于 GetX 实现 Dio 的生命周期自动化