AISchedule(2)：基础界面美化

最新推荐文章于 2025-12-18 17:13:23 发布
原创最新推荐文章于 2025-12-18 17:13:23 发布 · 84 阅读
0 ·
CC 4.0 BY-SA版权
文章标签：
#css #javascript #html
这篇文章介绍了使用HTML和JavaScript构建的一个事件列表工具AISchedule，用户可以输入时长和事件名称，实现动态添加、删除和表单验证，有助于时间管理和任务分配。
<!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;
      }
    }

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

    .btn {
      margin: 0 10px;
    }
  </style>
</head>

<body>
  <h1>AISchedule</h1>
  <p>一个事件列表工具，帮助你更好地分配、管理时间。</p>
  
  <!-- 创建表单 -->
  <form onsubmit="return validateForm()">
    <!-- 创建事件列表 -->
    <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;
    }
  </script>
</body>
</html>