实现以下页面效果: 1.实现在列表中添加一个好友的功能 2.实现在列表中删除、移动该行好友的数据
时间: 2024-03-03 13:48:17 浏览: 17
好的,我可以给您提供一些思路和代码片段:
首先,您需要一个包含好友列表的 HTML 页面,您可以使用 `<ul>` 和 `<li>` 标签来创建一个无序列表,每个列表项表示一个好友。例如:
```html
<ul id="friend-list">
<li>好友1</li>
<li>好友2</li>
<li>好友3</li>
</ul>
```
在页面上添加好友的功能可以通过添加一个表单来实现。您可以使用 `<input>` 标签来让用户输入好友的名字,并使用 `<button>` 标签来触发添加操作。例如:
```html
<form id="add-friend-form">
<label for="friend-name">好友名字:</label>
<input type="text" id="friend-name" name="friendName">
<button type="submit">添加</button>
</form>
```
然后,您需要编写 JavaScript 代码来处理表单的提交事件。您可以使用 `addEventListener` 方法来监听表单的 `submit` 事件,并在事件处理程序中获取用户输入的好友名字并添加到列表中。例如:
```js
const addFriendForm = document.getElementById("add-friend-form");
const friendList = document.getElementById("friend-list");
addFriendForm.addEventListener("submit", (event) => {
event.preventDefault(); // 阻止表单的默认提交行为
const friendNameInput = document.getElementById("friend-name");
const friendName = friendNameInput.value;
// 创建一个新的列表项并添加到列表中
const newFriendItem = document.createElement("li");
newFriendItem.textContent = friendName;
friendList.appendChild(newFriendItem);
// 清空输入框
friendNameInput.value = "";
});
```
接下来,您需要实现删除和移动好友的功能。您可以为每个列表项添加一个删除按钮和上下移动按钮,当用户点击这些按钮时,您可以使用 JavaScript 来删除或移动列表项。例如:
```html
<ul id="friend-list">
<li>
好友1
<button class="delete-btn">删除</button>
<button class="move-up-btn">上移</button>
<button class="move-down-btn">下移</button>
</li>
<li>
好友2
<button class="delete-btn">删除</button>
<button class="move-up-btn">上移</button>
<button class="move-down-btn">下移</button>
</li>
<li>
好友3
<button class="delete-btn">删除</button>
<button class="move-up-btn">上移</button>
<button class="move-down-btn">下移</button>
</li>
</ul>
```
然后,您需要编写 JavaScript 代码来处理按钮的点击事件。您可以使用 `addEventListener` 方法来监听按钮的 `click` 事件,并在事件处理程序中删除或移动对应的列表项。例如:
```js
// 删除按钮的事件处理程序
friendList.addEventListener("click", (event) => {
if (event.target.classList.contains("delete-btn")) {
const friendItem = event.target.parentNode;
friendList.removeChild(friendItem);
}
});
// 上移按钮的事件处理程序
friendList.addEventListener("click", (event) => {
if (event.target.classList.contains("move-up-btn")) {
const friendItem = event.target.parentNode;
const prevFriendItem = friendItem.previousElementSibling;
if (prevFriendItem) {
friendList.insertBefore(friendItem, prevFriendItem);
}
}
});
// 下移按钮的事件处理程序
friendList.addEventListener("click", (event) => {
if (event.target.classList.contains("move-down-btn")) {
const friendItem = event.target.parentNode;
const nextFriendItem = friendItem.nextElementSibling;
if (nextFriendItem) {
friendList.insertBefore(nextFriendItem, friendItem);
}
}
});
```
这样,您就实现了在列表中添加好友、删除好友、上下移动好友的功能。希望这些代码可以帮助到您!