首页根据题目提供的基础HTML代码，完成Todolist前端页面开发，要求： 1点击Add增加一项新任务 2点击×删除一条记录

根据题目提供的基础HTML代码，完成Todolist前端页面开发，要求： 1点击Add增加一项新任务 2点击×删除一条记录

时间: 2024-09-08 08:03:34 浏览: 132

根据您的要求，完成一个简单的TODO list前端页面开发，我们可以使用HTML和JavaScript来实现。以下是一个基础的实现方案： 1. 首先创建一个HTML页面，其中包含一个输入框用于添加新的任务，一个按钮用于提交任务，以及一个列表用于显示所有任务。 2. 使用JavaScript添加事件监听器，当点击添加按钮时，将输入框的内容添加到列表中。 3. 为列表中的每个任务项添加一个删除按钮，当点击删除按钮时，删除对应的任务项。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>TODO List</title> <script> function addTask() { // 获取输入框的值 var taskInput = document.getElementById('taskInput'); var taskText = taskInput.value.trim(); // 检查输入是否为空 if(taskText) { // 创建新的列表项 var taskItem = document.createElement('li'); taskItem.innerText = taskText; // 创建删除按钮 var deleteBtn = document.createElement('span'); deleteBtn.innerText = '×'; deleteBtn.onclick = function() { // 删除任务项 taskItem.parentNode.removeChild(taskItem); }; // 将删除按钮添加到任务项中 taskItem.appendChild(deleteBtn); // 将任务项添加到列表中 document.getElementById('taskList').appendChild(taskItem); // 清空输入框 taskInput.value = ''; } } </script> </head> <body> <input type="text" id="taskInput" placeholder="Enter a task"> <button onclick="addTask()">Add</button> <ul id="taskList"></ul> </body> </html> ``` 这段代码实现了一个基本的TODO list功能，用户可以在输入框中输入任务，点击"Add"按钮后，任务会被添加到下方的列表中。每个列表项旁边有一个"×"按钮，点击该按钮会删除对应的列表项。

阅读全文