包含添加、删除、标记任务功能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Todo List</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
#todo-list {
list-style-type: none;
padding: 0;
}
#todo-list li {
padding: 10px;
background-color: #f4f4f4;
margin-bottom: 5px;
display: flex;
justify-content: space-between;
}
.completed {
text-decoration: line-through;
color: gray;
}
</style>
</head>
<body>
<h1>Todo List</h1>
<input type="text" id="new-task" placeholder="Add a new task">
<button onclick="addTask()">Add</button>
<ul id="todo-list"></ul>
<script>
function addTask() {
const taskInput = document.getElementById('new-task');
const taskText = taskInput.value.trim();
if (taskText === '') return;
const li = document.createElement('li');
li.textContent = taskText;
li.addEventListener('click', function() {
this.classList.toggle('completed');
});
const deleteBtn = document.createElement('button');
deleteBtn.textContent = 'Delete';
deleteBtn.addEventListener('click', function() {
li.remove();
});
li.appendChild(deleteBtn);
document.getElementById('todo-list').appendChild(li);
taskInput.value = '';
}
</script>
</body>
</html>
运行上述代码可得
点击后面的删除键可以进行删除等功能。
js的解析：使用addTask()函数：
先从输入框里拿到你输入的任务，并把两边的空格去掉。
如果你什么都没写，这段代码就直接结束，不会添加一个空任务。
接着，它会新建一个列表项（`li`），并把你刚刚输入的任务内容放进去。
给这个列表项加上一个点击功能，让你可以点击它来切换成“已完成”的状态。
然后，代码会创建一个“删除”按钮，并给这个按钮加上点击功能，这样你点击它就能删除这个任务。
把这个“删除”按钮放到任务项的后面。
最后，把这个任务项加到待办事项的列表里去，并清空输入框，让你可以继续输入下一个任务。
标签：const,删除,deleteBtn,JavaScript,list,li,待办,构建,document From： https://blog.csdn.net/weixin_66004363/article/details/141523593