JavaScript 网页设计案例操作指南

标签：指南 const color JavaScript li 待办网页事项 todoText

随着互联网的发展和现代网页设计的需求，JavaScript 已成为构建动态网页和增强用户体验的重要工具。无论是简单的网页交互，还是复杂的单页应用，JavaScript 的使用场景都越来越广泛。在本指南中，我们将通过构建一个简单的动态网页应用示例，深入探讨 JavaScript 在网页设计中的实际应用。我们将实现一个待办事项列表 (To-Do List) 应用，涉及 HTML、CSS 和 JavaScript 的协作，提供具体的代码示例和详细的操作步骤。

1. 项目准备

1.1 项目结构

首先，创建一个新的文件夹，命名为 todo-app。在该文件夹中，我们将创建三个主要文件：

index.html：用于构建网页的结构。
styles.css：定义网页的样式。
script.js：包含应用的逻辑。

最终的文件结构如下所示：

todo-app/
│
├── index.html
├── styles.css
└── script.js

1.2 创建 HTML 文件

在项目文件夹中，创建 index.html 文件并添加以下内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>待办事项列表</title>
</head>
<body>
    <div class="container">
        <h1>待办事项列表</h1>
        <input type="text" id="todoInput" placeholder="输入待办事项...">
        <button id="addButton">添加</button>
        <ul id="todoList"></ul>
    </div>
    <script src="script.js"></script>
</body>
</html>

上面的 HTML 代码构建了一个简单的待办事项列表界面，包括输入框、添加按钮和待办事项列表显示区域。

2. 添加样式

我们将使用 CSS 来美化我们的应用。打开 styles.css 文件并添加以下样式：

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

.container {
    max-width: 600px;
    margin: 50px auto;
    padding: 20px;
    background-color: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

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

input {
    width: 70%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

button {
    padding: 10px 15px;
    border: none;
    background-color: #5cb85c;
    color: white;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #4cae4c;
}

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

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

li button {
    background-color: #d9534f;
    border: none;
    color: white;
    border-radius: 5px;
    cursor: pointer;
}

li button:hover {
    background-color: #c9302c;
}

以上 CSS 代码为网页应用提供了基本的布局和样式，使其更加美观和易于交互。

3. 添加 JavaScript 功能

接下来，我们将实现应用的主要逻辑，使用 JavaScript 来实现待办事项的添加和删除功能。打开 script.js 文件并添加以下代码：

// 获取 DOM 元素
const todoInput = document.getElementById('todoInput');
const addButton = document.getElementById('addButton');
const todoList = document.getElementById('todoList');

// 添加待办事项的事件处理函数
addButton.addEventListener('click', function() {
    const todoText = todoInput.value.trim();

    if (todoText === '') {
        alert('请输入待办事项');
        return;
    }

    // 创建新的待办事项元素
    const li = document.createElement('li');
    li.textContent = todoText;

    // 创建删除按钮
    const deleteButton = document.createElement('button');
    deleteButton.textContent = '删除';
    
    // 添加删除事件
    deleteButton.addEventListener('click', function() {
        todoList.removeChild(li);
    });

    li.appendChild(deleteButton);
    todoList.appendChild(li);

    // 清空输入框
    todoInput.value = '';
});

3.1 代码解释

获取 DOM 元素：我们获取了待办事项输入框、添加按钮和列表的 DOM 元素，以便后续操作。
添加事件监听：当用户点击添加按钮时，我们获取输入框中的文本，并进行基本验证，如检查是否为空。如果有效，将创建一个新的列表项。
创建列表项：使用 document.createElement 方法创建新的列表项 <li> 和删除按钮。当用户点击删除按钮时，相应的待办事项将从列表中移除。

3.2 完整代码总结

到这里，我们的完整代码如下所示：

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>待办事项列表</title>
</head>
<body>
    <div class="container">
        <h1>待办事项列表</h1>
        <input type="text" id="todoInput" placeholder="输入待办事项...">
        <button id="addButton">添加</button>
        <ul id="todoList"></ul>
    </div>
    <script src="script.js"></script>
</body>
</html>

styles.css

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

.container {
    max-width: 600px;
    margin: 50px auto;
    padding: 20px;
    background-color: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

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

input {
    width: 70%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

button {
    padding: 10px 15px;
    border: none;
    background-color: #5cb85c;
    color: white;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #4cae4c;
}

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

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

li button {
    background-color: #d9534f;
    border: none;
    color: white;
    border-radius: 5px;
    cursor: pointer;
}

li button:hover {
    background-color: #c9302c;
}

script.js

const todoInput = document.getElementById('todoInput');
const addButton = document.getElementById('addButton');
const todoList = document.getElementById('todoList');

addButton.addEventListener('click', function() {
    const todoText = todoInput.value.trim();

    if (todoText === '') {
        alert('请输入待办事项');
        return;
    }

    const li = document.createElement('li');
    li.textContent = todoText;

    const deleteButton = document.createElement('button');
    deleteButton.textContent = '删除';
    
    deleteButton.addEventListener('click', function() {
        todoList.removeChild(li);
    });

    li.appendChild(deleteButton);
    todoList.appendChild(li);

    todoInput.value = '';
});

4. 增强功能

在基本的待办事项列表应用的基础上，我们可以添加一些增强功能以改进用户体验。例如，使用本地存储（LocalStorage）来保存待办事项，使数据在页面刷新时仍然保留。

4.1 添加本地存储功能

我们将修改 script.js 文件，以便在添加和删除待办事项时，与浏览器的本地存储进行交互：

// 获取 DOM 元素
const todoInput = document.getElementById('todoInput');
const addButton = document.getElementById('addButton');
const todoList = document.getElementById('todoList');

// 从本地存储读取待办事项
function loadTodos() {
    const todos = JSON.parse(localStorage.getItem('todos')) || [];
    todos.forEach(todoText => {
        addTodoToDOM(todoText);
    });
}

// 添加待办事项并更新本地存储
function addTodoToDOM(todoText) {
    const li = document.createElement('li');
    li.textContent = todoText;

    const deleteButton = document.createElement('button');
    deleteButton.textContent = '删除';

    deleteButton.addEventListener('click', function() {
        todoList.removeChild(li);
        removeTodoFromStorage(todoText);
    });

    li.appendChild(deleteButton);
    todoList.appendChild(li);
}

// 移除待办事项并更新本地存储
function removeTodoFromStorage(todoText) {
    let todos = JSON.parse(localStorage.getItem('todos')) || [];
    todos = todos.filter(todo => todo !== todoText);
    localStorage.setItem('todos', JSON.stringify(todos));
}

// 添加按钮点击事件
addButton.addEventListener('click', function() {
    const todoText = todoInput.value.trim();

    if (todoText === '') {
        alert('请输入待办事项');
        return;
    }

    addTodoToDOM(todoText);
    todoInput.value = '';

    let todos = JSON.parse(localStorage.getItem('todos')) || [];
    todos.push(todoText);
    localStorage.setItem('todos', JSON.stringify(todos));
});

// 加载待办事项
loadTodos();

4.2 更新代码解释

加载待办事项： loadTodos 函数用于从本地存储中获取已保存的待办事项，并将它们添加到 DOM 中。
添加待办事项： addTodoToDOM 函数用于在 DOM 中添加待办事项，同时更新本地存储以保存当前的待办事项列表。
删除待办事项：在删除按钮事件中，调用 removeTodoFromStorage 函数以更新本地存储，确保从列表中移除的待办事项不会再被保存。

5. 测试和优化

完成代码编写后，打开 index.html 在浏览器中进行测试。确保能够正确添加、删除待办事项，并且在刷新页面时，待办事项能够保持不变。

5.1 可能的改进

输入验证：可以增加对输入待办事项的更多验证，防止用户输入特定字符。
样式改进：可以使用 CSS 框架（如 Bootstrap）进一步美化界面。
数据持久化：除了本地存储，还可以探索使用后端 API 进行数据持久化，利用数据库存储项目数据。

在本操作指南中，我们通过构建一个简单的待办事项列表应用，直观地展示了 JavaScript 在网页设计和交互中的实际应用。我们学习了如何构建页面的基本结构，应用 CSS 进行样式设计，以及通过 JavaScript 实现动态交互和数据持久化。

希望整个项目能让你对 JavaScript 网页设计有更深的理解，同时激励你在未来的项目中创造更多有趣的功能和应用。如果你有任何疑问或希望深入探讨，可以随时联系我！

标签：指南,const,color,JavaScript,li,待办,网页,事项,todoText
From： https://blog.csdn.net/vvvae1234/article/details/143385574