用HTML、CSS、Javascript写todolist
时间: 2023-07-04 14:17:27 浏览: 55
好的,我可以帮你解答这个问题。
首先,我们可以使用HTML创建一个文档结构,包括一个输入框用于输入待办事项和一个按钮用于添加待办事项,还可以创建一个ul元素用于展示待办事项列表。代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<title>Todo List</title>
<style>
ul {
list-style-type: none;
padding: 0;
}
</style>
</head>
<body>
<h1>Todo List</h1>
<input type="text" id="todoInput">
<button onclick="addTodo()">Add</button>
<ul id="todoList"></ul>
<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;
todoList.appendChild(li);
todoInput.value = "";
}
}
```
最后,我们可以使用CSS为待办事项列表添加样式,例如添加鼠标悬浮效果和删除线效果。代码如下:
```css
li:hover {
background-color: #eee;
}
li.checked {
text-decoration: line-through;
}
```
这样,我们就完成了一个简单的todolist应用。完整的代码可以保存在todo.js文件中。