用js写列表的增删和移动
时间: 2024-02-24 22:57:20 浏览: 20
好的,下面是一个简单的示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>JS动态列表</title>
</head>
<body>
<h1>JS动态列表</h1>
<input type="text" placeholder="请输入待办事项" id="input" />
<button onclick="addItem()">添加</button>
<ul id="list"></ul>
<script>
const input = document.getElementById("input");
const list = document.getElementById("list");
// 添加列表项
function addItem() {
const value = input.value.trim();
if (value === "") {
alert("请输入待办事项!");
return;
}
const li = document.createElement("li");
li.textContent = value;
li.onclick = () => {
li.remove();
};
list.appendChild(li);
input.value = "";
}
// 移动列表项
function moveItem(direction) {
const selected = document.querySelector("li.selected");
if (!selected) {
return;
}
const sibling =
direction === "up" ? selected.previousElementSibling : selected.nextElementSibling;
if (!sibling) {
return;
}
if (direction === "up") {
list.insertBefore(selected, sibling);
} else {
list.insertBefore(sibling, selected);
}
}
// 监听键盘事件
document.addEventListener("keydown", (event) => {
if (event.key === "Enter") {
addItem();
} else if (event.key === "ArrowUp") {
moveItem("up");
} else if (event.key === "ArrowDown") {
moveItem("down");
}
});
// 监听列表项点击事件
list.addEventListener("click", (event) => {
const selected = document.querySelector("li.selected");
if (selected) {
selected.classList.remove("selected");
}
event.target.classList.add("selected");
});
</script>
<style>
li {
cursor: pointer;
}
.selected {
background-color: #eee;
}
</style>
</body>
</html>
```
这个示例中,我们创建了一个文本输入框和一个按钮,用于添加列表项。点击列表项时,会将其从列表中删除。我们还实现了按下 Enter 键添加列表项,按下上下箭头键移动选中的列表项。在样式方面,我们为选中的列表项设置了背景色以便于区分。