简单待办事项列表应用程序教程

开发待办事项应用, HTML任务列表, CSS样式, JavaScript交互, Web开发 01-21

创建一个简单的待办事项列表应用程序

在本教程中，我们将创建一个简单的待办事项列表应用程序，以帮助您管理日常任务。我们将使用HTML、CSS和JavaScript来实现这个应用程序。以下是步骤及其相应的代码示例。

第一步：创建基本的HTML结构

首先，我们需要创建一个基本的HTML页面，由一个输入框和一个显示待办事项的区域组成。

<!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="styles.css">
</head>
<body>
    <div id="app">
        <h1>待办事项列表</h1>
        <input type="text" id="task-input" placeholder="输入您的任务">
        <button onclick="addTask()">添加任务</button>
        <ul id="task-list"></ul>
    </div>
    <script src="script.js"></script>
</body>
</html>

第二步：添加CSS样式

接下来，我们将为应用程序添加一些样式，使其美观和用户友好。创建一个名为 styles.css 的文件。

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}

#app {
    background: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
    margin-bottom: 20px;
}

input[type="text"] {
    padding: 10px;
    width: calc(100% - 22px);
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
}

button {
    padding: 10px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    width: 100%;
    margin-bottom: 20px;
}

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

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

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

li:nth-child(odd) {
    background-color: #f1f1f1;
}

第三步：编写JavaScript代码来实现功能

创建一个名为 script.js 的文件，并编写JavaScript代码以管理待办事项的添加和删除。

document.getElementById('task-input').addEventListener('keyup', function(event) {
    if (event.keyCode === 13) {
        addTask();
    }
});

function addTask() {
    const taskInput = document.getElementById('task-input');
    const taskValue = taskInput.value.trim();

    if (taskValue) {
        const taskList = document.getElementById('task-list');
        const listItem = document.createElement('li');
        listItem.textContent = taskValue;

        const removeButton = document.createElement('button');
        removeButton.textContent = '删除';
        removeButton.onclick = function() {
            taskList.removeChild(listItem);
        };

        listItem.appendChild(removeButton);
        taskList.appendChild(listItem);

        taskInput.value = '';
        taskInput.focus();
    }
}

说明

HTML 部分：我们定义了输入框、按钮和任务列表区域。提供了一个按钮，用于在用户输入任务后触发任务的添加。
CSS 部分：样式使我们的应用更加美观，包括字体、按钮的颜色和样式等等。通过改变背景颜色区分任务条目的奇偶行。
JavaScript 部分：我们为输入框绑定了一个键盘事件，以便用户可以通过回车键添加任务。addTask 函数负责获取输入，创建新任务项，并将其添加到任务列表，同时还提供了删除功能。

这就是创建简单待办事项列表应用程序的完整过程。通过这些步骤，您可以轻松理解如何在Web应用程序中结合使用HTML、CSS和JavaScript来实现交互功能。

编辑：一起学习网