HTML5在线如何构建任务列表 HTML5在线管理应用的开发教程-html教程-PHP中文网

HTML5在线如何构建任务列表 HTML5在线管理应用的开发教程

蓮花仙者

发布： 2025-10-24 09:23:02

原创

845人浏览过

首先搭建HTML结构并引入CSS与JS文件，接着通过JavaScript实现添加、删除、标记完成任务功能，并利用localStorage持久化数据，最后用CSS美化界面并支持响应式交互。

html5在线如何构建任务列表 html5在线管理应用的开发教程

在HTML5中构建一个任务列表管理应用，既能锻炼前端技能，又能实现实用功能。这类应用通常包括添加任务、标记完成、删除任务和数据持久化等基础功能。下面是一个简单但完整的开发教程，帮助你从零开始创建一个HTML5在线任务管理工具。

1. 项目结构与基础HTML搭建

首先创建基本的项目结构：

index.html — 主页面
style.css — 样式文件
script.js — JavaScript逻辑

在 index.html 中写入基础结构：

<!DOCTYPE html>
<html lang="zh">
<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>
    <input type="text" id="taskInput" placeholder="输入新任务..." />
    <button id="addTaskBtn">添加任务</button>
    <ul id="taskList"></ul>
  </div>
  <script src="script.js"></script>
</body>
</html>

登录后复制

2. 添加CSS美化界面

在 style.css 中加入简洁样式：

立即学习“前端免费学习笔记（深入）”；

表单大师AI

一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

查看详情

.container {
  max-width: 500px;
  margin: 40px auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}

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

#taskInput {
  width: 70%;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

#addTaskBtn {
  padding: 10px;
  font-size: 16px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

#addTaskBtn:hover {
  background-color: #0056b3;
}

#taskList {
  list-style: none;
  padding: 0;
  margin-top: 20px;
}

#taskList li {
  padding: 12px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  margin-bottom: 8px;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#taskList li.completed {
  text-decoration: line-through;
  color: #888;
  background-color: #f0f0f0;
}

.delete-btn {
  background-color: #dc3545;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
}

登录后复制

3. 实现JavaScript核心功能

在 script.js 中编写任务管理逻辑：

// 获取DOM元素
const taskInput = document.getElementById('taskInput');
const addTaskBtn = document.getElementById('addTaskBtn');
const taskList = document.getElementById('taskList');

// 存储任务数组
let tasks = JSON.parse(localStorage.getItem('tasks')) || [];

// 渲染任务列表
function renderTasks() {
  taskList.innerHTML = '';
  tasks.forEach((task, index) => {
    const li = document.createElement('li');
    if (task.completed) li.classList.add('completed');

    li.innerHTML = `
      <span onclick="toggleTask(${index})">${task.text}</span>
      <button class="delete-btn" onclick="deleteTask(${index})">删除</button>
    `;
    taskList.appendChild(li);
  });
}

// 添加任务
function addTask() {
  const text = taskInput.value.trim();
  if (text === '') return;

  tasks.push({ text, completed: false });
  saveToLocalStorage();
  taskInput.value = '';
  renderTasks();
}

// 切换任务完成状态
function toggleTask(index) {
  tasks[index].completed = !tasks[index].completed;
  saveToLocalStorage();
  renderTasks();
}

// 删除任务
function deleteTask(index) {
  tasks.splice(index, 1);
  saveToLocalStorage();
  renderTasks();
}

// 保存到 localStorage
function saveToLocalStorage() {
  localStorage.setItem('tasks', JSON.stringify(tasks));
}

// 绑定事件
addTaskBtn.addEventListener('click', addTask);
taskInput.addEventListener('keypress', (e) => {
  if (e.key === 'Enter') addTask();
});

// 初始化渲染
renderTasks();

登录后复制