【html】有一个文本框可添加任务，需实现列表渲染，删除功能，添加功能，底部合计，和清空任务

HTML中实现这样的任务管理界面通常会结合JavaScript和一些前端框架（如React、Vue或Angular）。以下是简要步骤：

1. **HTML结构**：
- 创建一个包含输入框的任务添加区域（`<input type="text">`），以及一个按钮用于提交新任务（`<button onclick="addTask()">添加</button>`）
- 使用无序列表 (`<ul id="taskList">`) 来显示已添加的任务
- 底部可以添加一个 `<p id="totalTasks"></p>` 显示总任务数

2. **JavaScript函数**：
- `addTask()`: 当用户点击“添加”按钮时，获取输入框内容，创建一个新的`<li>`元素，然后添加到任务列表，并更新`totalTasks`计数。

   function addTask() {
     var taskInput = document.getElementById("taskInput");
     var newTask = taskInput.value;
     if (newTask) {
       var li = document.createElement('li');
       li.textContent = newTask;
       document.getElementById("taskList").appendChild(li);
       updateTotal();
       taskInput.value = "";
     }
   }

3. **删除功能**：
- 给每个任务列表项添加删除按钮，点击时触发 `removeTask()` 函数。

   <button onclick="removeTask(this)">删除</button>

   function removeTask(deleteBtn) {
     deleteBtn.parentElement.remove();
     updateTotal();
   }

4. **总计计算**：
- `updateTotal()` 函数负责根据任务列表长度更新 `totalTasks` 的文本内容。

   function updateTotal() {
     var totalTasksElement = document.getElementById("totalTasks");
     totalTasksElement.textContent = "总任务数: " + document.querySelectorAll('#taskList li').length;
   }

5. **清空任务**：
- 添加一个“清空”按钮，点击时清除整个任务列表。

   <button onclick="clearAll()">清空</button>

   function clearAll() {
     document.getElementById("taskList").innerHTML = "";
     document.getElementById("totalTasks").textContent = "总任务数: 0";
   }