LabEx
登录免费加入

创建一个任务定时器网络应用程序

JavaScriptJavaScriptBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文，您可以 切换至英文原版

简介

在这个循序渐进的项目中，你将学习如何使用 HTML、CSS 和 JavaScript 创建一个任务定时器 Web 应用程序。这个 Web 应用程序将允许用户添加任务、为每个任务启动和停止定时器以及删除任务。在本项目结束时，你将拥有一个功能齐全、界面现代且用户友好的任务定时器 Web 应用程序。

👀 预览

任务定时器 Web 应用程序演示

🎯 任务

在本项目中，你将学习：

  • 如何为任务定时器 Web 应用程序创建基本的 HTML 结构
  • 如何使用 CSS 对 Web 应用程序进行样式设计，使其在视觉上具有吸引力
  • 如何实现 JavaScript 功能，以便向应用程序中添加任务
  • 如何添加定时器功能，为每个任务启动和停止定时器
  • 如何实现从应用程序中删除任务的功能

🏆 成果

完成本项目后，你将能够：

  • 处理 Web 表单中的用户输入和验证
  • 使用 JavaScript 动态启动和停止定时器
  • 以用户友好的格式更新和显示时间
  • 使用 JavaScript 从文档对象模型 (DOM) 中删除元素
  • 构建和组织一个简单的 Web 应用程序项目
  • 创建按钮并为其附加事件监听器
  • 用户交互后清除输入字段
  • 根据用户操作启用和禁用按钮
  • 使用数据属性在 HTML 元素中存储信息

创建 HTML 结构

要求：

  • 打开 index.html 文件。
  • 创建基本的 HTML 结构，包括一个标题、一个头部、用于任务名称的输入字段、一个“添加任务”按钮以及一个空的任务列表（ul）。

功能：

  • 建立任务定时器 Web 应用程序的初始结构。

步骤：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>任务定时器</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <h1>任务定时器</h1>
      <div class="task-input">
        <input type="text" id="taskName" placeholder="任务名称" />
        <button onclick="addTask()">添加任务</button>
      </div>
      <ul id="taskList"></ul>
    </div>
    <script src="script.js"></script>
  </body>
</html>

此 HTML 结构包括主容器、一个头部、用于任务名称的输入字段、一个“添加任务”按钮以及一个空的任务列表（ul），该列表将动态填充。

✨ 查看解决方案并练习

CSS 样式设计

要求：

  • 打开 style.css 文件。
  • 添加 CSS 样式，使 Web 应用程序在视觉上更具吸引力。

功能：

  • 为 Web 应用程序元素应用基本样式。

步骤：

body {
  font-family: "Arial", sans-serif;
  background-color: #f3f3f3;
  margin: 0;
  padding: 0;
}

.container {
  max-width: 600px;
  margin: 20px auto;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  padding: 20px;
}

h1 {
  text-align: center;
  color: #333;
}

.task-input {
  display: flex;
  margin-bottom: 20px;
}

input[type="text"] {
  flex: 1;
  padding: 10px;
  border: none;
  border-bottom: 2px solid #333;
  border-radius: 0;
  outline: none;
}

button {
  padding: 10px 20px;
  background-color: #333;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  outline: none;
}

button:hover {
  background-color: #444;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 10px;
  background-color: #f9f9f9;
}

.timer-controls {
  display: flex;
  gap: 10px;
}

.timer-controls button {
  padding: 8px 16px;
  background-color: #333;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  outline: none;
}

.timer-controls button:hover {
  background-color: #444;
}

.task-time {
  font-size: 1.2rem;
  color: #555;
}

我们将在后续步骤中添加 CSS 样式，以确保与 JavaScript 功能正确协调。

✨ 查看解决方案并练习

实现添加任务功能

要求：

  • 打开 script.js 文件。
  • 创建 addTask 函数，当点击“添加任务”按钮时，将任务添加到列表中。

功能：

  • 用户可以将任务添加到任务列表中。

步骤：

// 用于添加新任务的函数
function addTask() {
  const taskNameInput = document.getElementById("taskName");
  const taskName = taskNameInput.value.trim();

  if (taskName === "") {
    alert("请输入任务名称。");
    return;
  }

  // 创建一个新的列表项（li）
  const li = document.createElement("li");
  li.innerHTML = `
        <span>${taskName}</span>
        <div class="timer-controls">
            <button onclick="startTimer(this)">开始</button>
            <button onclick="stopTimer(this)">停止</button>
            <button onclick="deleteTask(this)">删除</button>
        </div>
        <span class="task-time">0:00</span>
    `;

  // 将新任务追加到任务列表（ul）中
  const taskList = document.getElementById("taskList");
  taskList.appendChild(li);

  // 清空输入字段
  taskNameInput.value = "";
}

这段代码定义了 addTask 函数，当点击“添加任务”按钮时，该函数会创建一个新的任务项。

✨ 查看解决方案并练习

实现任务定时器启动功能

要求：

  • 扩展 script.js 文件。
  • 创建 startTimer 函数，当点击“开始”按钮时，为任务启动定时器。

功能：

  • 用户可以为特定任务启动定时器。

步骤：

// 用于启动定时器的函数
function startTimer(button) {
  // 获取被点击按钮的父列表项（li）
  const li = button.parentElement.parentElement;
  const taskTime = li.querySelector(".task-time");
  const startTime = Date.now();

  // 禁用“开始”按钮并启用“停止”按钮
  button.disabled = true;
  li.querySelector("button:nth-child(2)").disabled = false;

  // 每秒更新一次定时器显示
  const interval = setInterval(() => {
    const elapsedTime = new Date(Date.now() - startTime);
    taskTime.textContent = elapsedTime.toISOString().substr(14, 5);
  }, 1000);

  // 将定时器间隔 ID 存储在数据属性中，以便后续使用
  li.dataset.intervalId = interval;
}

这段代码定义了 startTimer 函数，当点击“开始”按钮时，该函数会启动一个定时器。

✨ 查看解决方案并练习

实现任务定时器停止功能

要求：

  • 继续在 script.js 文件中操作。
  • 创建 stopTimer 函数，当点击“停止”按钮时，停止任务的定时器。

功能：

  • 用户可以停止特定任务的定时器。

步骤：

// 用于停止定时器的函数
function stopTimer(button) {
  const li = button.parentElement.parentElement;
  const taskTime = li.querySelector(".task-time");
  const intervalId = li.dataset.intervalId;

  clearInterval(intervalId);
  button.disabled = true;
  li.querySelector("button:nth-child(1)").disabled = false;

  // 显示最终的 elapsed 时间
  const totalTime = taskTime.textContent;
  taskTime.textContent = totalTime;

  button.disabled = true;
}

这段代码定义了 stopTimer 函数，当点击“停止”按钮时，该函数会停止定时器。

✨ 查看解决方案并练习

实现任务删除功能

要求：

  • 仍然在 script.js 文件中。
  • 创建 deleteTask 函数，当用户点击“删除”按钮时，允许用户删除任务。

功能：

  • 用户可以从列表中删除任务。

步骤：

// 用于删除任务的函数
function deleteTask(button) {
  const li = button.parentElement.parentElement;
  li.remove();
}

这段代码定义了 deleteTask 函数，当点击“删除”按钮时，该函数会删除一个任务。

✨ 查看解决方案并练习

运行应用程序

  • 在网页浏览器中打开 index.html。
open web
  • 通过添加任务并验证任务列表和摘要是否正确更新来测试应用程序。
  • 页面效果如下：
task timer demo animation
✨ 查看解决方案并练习

总结

恭喜你！你已经成功地使用 HTML、CSS 和 JavaScript 创建了一个任务定时器网络应用程序。用户可以添加任务，为每个任务启动和停止定时器，并根据需要删除任务。这个网络应用程序为跟踪在特定任务或项目上花费的时间提供了一个现代且用户友好的界面。

相关 JavaScript 课程
JavaScript 快速入门

JavaScript 快速入门

JavaScript
初级
使用 ChatGPT 构建 VSCode 扩展

使用 ChatGPT 构建 VSCode 扩展

GitJavaScriptTypeScript
初级
构建一个井字棋网页应用

构建一个井字棋网页应用

HTMLCSSJavaScript
初级