正文

请提供您需要填写的JavaScript脚本的具体内容或功能描述，这样我才能帮助您创作合适的脚本。

/0 浏览量
0713

脚本概述

这个JavaScript脚本旨在创建一个简单的待办事项列表。用户可以在一个文本框中输入待办事项，点击“添加”按钮后将该事项添加到网页上的列表中。此外，用户可以删除列表中的任何特定项。

功能需求

1. 输入待办事项

  • 用户在一个文本框中输入待办事项。
  • 文本框应有一个提示，如“在此输入待办事项”。

2. 添加待办事项

  • 用户点击“添加”按钮后，待办事项被添加到网页的列表中。
  • 添加的待办事项应该显示为列表格式，以便与其他事项区分。

3. 列表示例

  • 列表中的每一项都应该有一个勾选框，表示该项是否完成。
  • 列表中的每一项还应该有一个“删除”按钮，用于移除该项。

4. 删除待办事项

  • 当用户点击“删除”按钮时，对应的事项应该从列表中移除。
  • 删除操作应该即时反映在页面上，无需刷新。

技术实现

HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>待办事项列表</title>
    <style>
        /* CSS样式 */
        #todoList {
            list-style-type: none;
            padding: 0;
        }
        #todoList li {
            margin: 5px 0;
            display: flex;
            align-items: center;
        }
        #todoList li label {
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <h2>我的待办事项</h2>
    <input type="text" id="todoInput" placeholder="在此输入待办事项">
    <button onclick="addTodo()">添加</button>
    <ul id="todoList"></ul>

    <script>
        // JavaScript脚本
    </script>
</body>
</html>

JavaScript脚本

function addTodo() {
    var todoInput = document.getElementById('todoInput');
    var todoValue = todoInput.value.trim();

    if (todoValue !== '') {
        var li = document.createElement('li');
        li.innerHTML = `
            <label><input type="checkbox"> ${todoValue}</label>
            <button onclick="removeTodo(this)">删除</button>
        `;
        document.getElementById('todoList').appendChild(li);
        todoInput.value = ''; // 清空输入框
    } else {
        alert('请输入待办事项！');
    }
}

function removeTodo(element) {
    element.parentElement.remove();
}

用户友好性

  • 提示用户输入待办事项，并在输入为空时给出提示。
  • 列表项的勾选框和删除按钮应该直观易懂。
  • 删除操作即点即删，无需刷新页面。

教育意义

  • 通过这个脚本，用户可以学习到基本的HTML、CSS和JavaScript。
  • 了解如何使用DOM操作动态更新网页内容。
  • 掌握事件处理和简单的用户界面设计。
-- 展开阅读全文 --