用HTML、CSS、Javascript写todolist包括增加,删除和清空所有的功能
时间: 2024-02-04 20:02:07 浏览: 27
好的,我可以帮你解答这个问题。
首先,我们可以使用HTML创建一个文档结构,包括一个输入框用于输入待办事项和一个按钮用于添加待办事项,还可以创建一个ul元素用于展示待办事项列表,以及两个按钮用于删除待办事项和清空所有待办事项。代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<title>Todo List</title>
<style>
ul {
list-style-type: none;
padding: 0;
}
li:hover {
background-color: #eee;
}
li.checked {
text-decoration: line-through;
}
</style>
</head>
<body>
<h1>Todo List</h1>
<input type="text" id="todoInput">
<button onclick="addTodo()">Add</button>
<ul id="todoList"></ul>
<button onclick="deleteChecked()">Delete Checked</button>
<button onclick="clearAll()">Clear All</button>
<script src="todo.js"></script>
</body>
</html>
```
接下来,我们使用JavaScript编写addTodo函数,用于将输入框中的内容添加到待办事项列表中。代码如下:
```javascript
function addTodo() {
var todoInput = document.getElementById("todoInput");
var todoList = document.getElementById("todoList");
if (todoInput.value) {
var li = document.createElement("li");
li.innerHTML = todoInput.value;
li.onclick = toggleChecked;
todoList.appendChild(li);
todoInput.value = "";
}
}
```
其中,我们为每个li元素添加了一个点击事件toggleChecked,用于切换待办事项的状态(选中或未选中)。
接下来,我们编写toggleChecked函数,用于切换待办事项的状态。代码如下:
```javascript
function toggleChecked() {
this.classList.toggle("checked");
}
```
然后,我们编写deleteChecked函数,用于删除所有已选中的待办事项。代码如下:
```javascript
function deleteChecked() {
var todoList = document.getElementById("todoList");
var checkedItems = todoList.querySelectorAll(".checked");
for (var i = 0; i < checkedItems.length; i++) {
todoList.removeChild(checkedItems[i]);
}
}
```
最后,我们编写clearAll函数,用于清空所有待办事项。代码如下:
```javascript
function clearAll() {
var todoList = document.getElementById("todoList");
todoList.innerHTML = "";
}
```
这样,我们就完成了一个包括增加、删除和清空所有功能的todolist应用。完整的代码可以保存在todo.js文件中。