当我们提到todolist功能时,我们通常指的是一个可以添加、删除、编辑、标记已完成等功能的任务列表。
实现这样一个功能,可以使用原生JavaScript来完成。下面是一些步骤和示例代码:
步骤一:创建HTML结构
首先,需要创建一个HTML结构来展示任务列表。需要一个输入框来允许用户输入新任务,还需要一个可滚动的任务列表来展示已有的任务。每个任务项需要包含一个复选框来标记任务是否已完成,还需要包含一个编辑按钮来允许用户编辑任务。
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Todo List</title>
</head>
<body>
<h1>Todo List</h1>
<input type="text" placeholder="Add New Task">
<ul>
<li>
<input type="checkbox">
<span>Buy Milk</span>
<button>Edit</button>
<button>Delete</button>
</li>
<li>
<input type="checkbox">
<span>Wash Car</span>
<button>Edit</button>
<button>Delete</button>
</li>
<li>
<input type="checkbox">
<span>Walk Dog</span>
<button>Edit</button>
<button>Delete</button>
</li>
</ul>
</body>
</html>
步骤二:添加CSS样式
接下来,需要使用CSS为任务列表添加样式,使其外观更美观。
示例代码:
ul {
list-style-type: none;
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
li {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
input[type="checkbox"] {
margin-right: 10px;
}
button {
background-color: transparent;
border: none;
color: #666;
cursor: pointer;
}
button:hover {
color: #000;
}
.completed {
text-decoration: line-through;
opacity: 0.5;
}
.editMode span {
display: none;
}
.editMode input[type="text"] {
display: inline-block;
padding: 5px;
margin-right: 10px;
width: 200px;
border: 1px solid #ccc;
border-radius: 5px;
}
步骤三:使用JavaScript管理任务列表
接下来,需要使用JavaScript来添加、删除、编辑和标记任务为已完成。
示例代码:
// 获取DOM元素
var input = document.querySelector("input[type='text']");
var ul = document.querySelector("ul");
// 添加任务
function addTask() {
if (input.value != "") {
var li = document.createElement("li");
li.innerHTML = `
<input type="checkbox">
<span>${input.value}</span>
<button>Edit</button>
<button>Delete</button>
`;
ul.appendChild(li);
input.value = "";
addEventListenerToButtons();
}
}
// 删除任务
function deleteTask(el) {
el.parentElement.remove();
}
// 编辑任务文本
function editTask(el) {
var span = el.parentElement.querySelector("span");
var input = el.parentElement.querySelector("input[type='text']");
if (el.textContent == "Edit") {
el.textContent = "Save";
el.parentElement.classList.add("editMode");
input.value = span.textContent;
input.focus();
input.selectionStart = 0;
input.selectionEnd = input.value.length;
} else {
el.textContent = "Edit";
el.parentElement.classList.remove("editMode");
span.textContent = input.value;
}
}
// 标记已完成
function toggleCompleted(el) {
var span = el.parentElement.querySelector("span");
if (el.checked) {
span.classList.add("completed");
} else {
span.classList.remove("completed");
}
}
// 给所有按钮添加事件监听器
function addEventListenerToButtons() {
var buttons = document.querySelectorAll("li button");
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("click", function(e) {
if (e.target.textContent == "Delete") {
deleteTask(e.target);
} else {
editTask(e.target);
}
});
}
var checkboxes = document.querySelectorAll("li input[type='checkbox']");
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].addEventListener("click", function(e) { toggleCompleted(e.target); });
}
}
// 给添加按钮添加事件监听器
var addButton = document.querySelector("input[type='button']");
addButton.addEventListener("click", addTask);
addEventListenerToButtons();
以上代码实现了添加、删除、编辑和标记任务为已完成的功能。在此基础上,您可以继续添加其他功能来完善您的todolist应用程序。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:原生JavaScript实现todolist功能 - Python技术站