AISchedule(3)：基础生成表格

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"] {
      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="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: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);
    }
    
    /* 标题样式 */
    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"] {
        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;
    }
  </style>
</head>

<body>
  <h1>AISchedule</h1>
  <p>一个事件列表工具，帮助你更好地分配、管理时间。</p>
  
  <!-- 创建表单 -->
  <form onsubmit="event.preventDefault(); showSchedule();">
    <!-- 创建事件列表 -->
    <table id="myTable">
      <thead>
        <tr>
          <th>时长(分钟)</th>
          <th>事件名称</th>
        </tr>
      </thead>
      <tbody>
        <!-- 创建第一行 -->
        <tr>
          <td><input type="text" name="time[]"/></td>
          <td><input type="text" name="task[]"/></td>
        </tr>
      </tbody>
    </table>
    
    <!-- 创建按钮组 -->
    <div class="btn-container">
      <!-- 创建添加事件按钮 -->
      <button class="btn btn-add" type="button" onclick="addRow()">+事件</button>
      <!-- 创建删除事件按钮 -->
      <button class="btn btn-remove" type="button" onclick="deleteRow()">-事件</button>
      <!-- 创建提交按钮 -->
      <input class="btn btn-submit" type="submit" value="提交"/>
    </div>
  </form>
  
  <!-- 创建脚本 -->
  <script>
    // 添加行
    function addRow() {
      var table = document.getElementById("myTable");
      var row = table.insertRow(-1);
      var cell1 = row.insertCell(0);
      var cell2 = row.insertCell(1);
      cell1.innerHTML = '<input type="text" name="time[]"/>';
      cell2.innerHTML = '<input type="text" name="task[]"/>';
    }
    
    // 删除行
    function deleteRow() {
      var table = document.getElementById("myTable");
      if(table.rows.length > 2) {
        table.deleteRow(-1);
      }
    }
    
    // 验证表单
    function validateForm() {
      var table = document.getElementById("myTable");
      for(var i = 1; i < table.rows.length; i++) {
        var timeInput = table.rows[i].cells[0].querySelector("input[type='text']");
        var taskInput = table.rows[i].cells[1].querySelector("input[type='text']");
        var timeValue = timeInput.value.trim();
        var taskValue = taskInput.value.trim();
        if(timeValue === "" && taskValue === "") {
          alert("请点击'删事件'以删除空事件，方便我进行时间分配。")
          taskInput.focus();
          return false;
        }
        if(timeValue === "" || isNaN(timeValue) || timeValue <= 0) {
          alert("请输入有效的时长，以方便我知道你要花的时间。");
          timeInput.focus();
          return false;
        }
        if(taskValue === "") {
          alert("请输入事件名称，以方便我为你智能提醒。");
          taskInput.focus();
          return false;
        }
      }
      return true;
    }

    // 展示时间表格
    function showSchedule() {
    if (validateForm()) {
        var table = document.getElementById("myTable");
        var startTime = new Date(Date.parse("2021-01-01 08:00:00"));
        var totalMinutes = 0;
        var html = '<table class="schedule-table"><thead><tr><th>开始时间</th><th>结束时间</th><th>时长</th><th>事件名称</th></tr></thead><tbody>';
        for(var i = 1; i < table.rows.length; i++) {
        var timeInput = table.rows[i].cells[0].querySelector("input[type='text']");
        var taskInput = table.rows[i].cells[1].querySelector("input[type='text']");
        var timeValue = parseInt(timeInput.value.trim());
        var taskValue = taskInput.value.trim();
        totalMinutes += timeValue;
        var endTime = new Date(startTime.getTime() + timeValue * 60 * 1000);
        var startTimestamp = getTimeString(startTime);
        var endTimestamp = getTimeString(endTime);
        var duration = getTimeDuration(startTime, endTime);
        html += '<tr><td>' + startTimestamp + '</td><td>' + endTimestamp + '</td><td>' + duration + '</td><td>' + taskValue + '</td></tr>';
        if (i % 2 === 0) {
            // 插入5分钟休息
            var breakTime = 5;
            totalMinutes += breakTime;
            var breakEndTime = new Date(endTime.getTime() + breakTime * 60 * 1000);
            html += '<tr class="break-row"><td colspan="4">休息5分钟</td></tr>';
            endTime = breakEndTime;
        }
        startTime = endTime;
        }
        html += '</tbody></table>';
        // 打开展示窗口
        openScheduleWindow(html);
    }
    }

    // 获取时间字符串，格式为hh:mm:ss
    function getTimeString(date) {
    var hour = date.getHours();
    var minute = date.getMinutes();
    var second = date.getSeconds();
    return formatNumber(hour) + ':' + formatNumber(minute) + ':' + formatNumber(second);
    }

    // 获取时间差，格式为hh:mm:ss
    function getTimeDuration(startTime, endTime) {
    var duration = Math.abs(endTime - startTime) / 1000;
    var hours = Math.floor(duration / 3600) % 24;
    var minutes = Math.floor(duration / 60) % 60;
    var seconds = Math.floor(duration % 60);
    return formatNumber(hours) + ':' + formatNumber(minutes) + ':' + formatNumber(seconds);
    }

    // 打开展示窗口
    function openScheduleWindow(html) {
      var windowHtml = '<div class="schedule-window"><div class="schedule-close" οnclick="closeScheduleWindow()">&times;</div><div class="schedule-header"><p>时间表格<br>（点击左上角的叉关闭）</p></div><div class="schedule-wrapper">' + html + '</div></div>';
      document.body.innerHTML += windowHtml;
    }

    // 关闭展示窗口
    function closeScheduleWindow() {
      var scheduleWindow = document.querySelector('.schedule-window');
      scheduleWindow.parentNode.removeChild(scheduleWindow);
    }

    // 格式化数字，不足两位前面补0
    function formatNumber(num) {
      return num < 10 ? '0' + num : num;
    }
  </script>
</body>
</html>