技术介绍
JavaScript(简称JS)是一种具有强大功能的编程语言，广泛应用于网页开发，在本文中，我们将使用JavaScript实现一个简单的留言板功能，留言板可以分为以下几个部分：
1、用户输入：用户可以在文本框中输入留言内容。
2、留言显示：将用户输入的留言内容显示在页面上。
3、删除留言：用户可以选择删除某条留言。
4、提交留言：用户点击提交按钮后，留言将被保存到服务器。
实现步骤
1、创建HTML页面结构
我们需要创建一个HTML页面，包含一个表单用于用户输入留言内容，一个列表用于显示留言，以及一些辅助元素如提交按钮和删除按钮。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简单留言板</title>
</head>
<body>
<form id="messageForm">
<textarea id="messageInput" rows="5" cols="30"></textarea><br>
<button type="submit">提交留言</button>
</form>
<ul id="messageList"></ul>
<script src="main.js"></script>
</body>
</html>
2、编写JavaScript代码
接下来，我们需要编写JavaScript代码来实现留言板的功能，我们需要获取HTML页面中的元素，然后为这些元素添加事件监听器，当用户输入留言并点击提交按钮时，我们将调用一个名为addMessage的函数；当用户点击删除按钮或选择某条留言时，我们将调用一个名为deleteMessage的函数，我们还需要编写一个名为saveMessages的函数，用于将留言保存到服务器，这里我们假设已经有一个名为serverSaveMessages的函数可以实现这个功能。
// main.js
document.getElementById('messageForm').addEventListener('submit', function (event) {
event.preventDefault(); // 阻止表单默认提交行为
addMessage(); // 添加留言
});
document.getElementById('messageList').addEventListener('click', function (event) {
if (event.target.className === 'deleteButton') { // 如果点击的是删除按钮
deleteMessage(event.target); // 删除该条留言
} else if (event.target.className === 'commentItem') { // 如果点击的是某条留言的删除按钮或复选框(表示已读/未读状态)
const comment = event.target.closest('li'); // 获取该条留言所在的li元素
const messageId = parseInt(comment.dataset.id); // 从data-id属性中获取留言ID
deleteMessage(messageId); // 删除该条留言
}
});
3、实现addMessage、deleteMessage和saveMessages函数
下面是这三个函数的具体实现：
function addMessage() {
const messageInput = document.getElementById('messageInput'); // 获取输入框元素
const messageText = messageInput.value.trim(); // 获取输入的留言内容并去除首尾空格
if (!messageText) return; // 如果留言内容为空，则直接返回
const commentItem = document.createElement('li'); // 创建一个新的li元素作为留言项容器
commentItem.dataset.id = Date.now().toString(); // 为该元素设置一个唯一的data-id属性值(这里使用当前时间戳作为示例)
commentItem.innerHTML = <strong class="userInfo">${messageText}</strong><span class="deleteButton" data-id="${commentItem.dataset.id}"></span><input type="checkbox" class="readStatus" />; // 将留言内容和删除按钮、复选框添加到li元素中(这里使用了简化的DOM操作方式)
Array.from(document.querySelectorAll('messageList li')).forEach((item) => item.classList.remove('selected')); // 确保只有最新的一条留言处于选中状态(这里使用了简化的DOM操作方式)
commentItem.classList.add('selected'); // 将最新一条留言设为选中状态(这里使用了简化的DOM操作方式)
Array.from(commentItem.getElementsByTagName('span'))[0].addEventListener('click', function (event) { // 为删除按钮添加点击事件监听器(这里使用了简化的DOM操作方式)
event.stopPropagation(); // 防止冒泡触发其他元素的点击事件监听器(这里使用了简化的DOM操作方式)
deleteMessage($(this).closest('li').data('id')); // 根据data-id属性值删除该条留言(这里使用了jQuery库简化DOM操作)
$(this).closest('li').remove(); // 从DOM中移除该条留言(这里使用了jQuery库简化DOM操作)
saveMessages(); // 将更新后的留言列表保存到服务器(这里假设已经实现了这个功能)
});
Array.from(commentItem.getElementsByTagName('input'))[0].addEventListener('change', function (event) { // 为复选框添加点击事件监听器(这里使用了简化的DOM操作方式)
const isChecked = event.target.checked; // 判断复选框是否被选中(这里使用了简化的DOM操作方式)
$(commentItem).toggleClass('read', isChecked); // 根据复选框的状态为该条留言添加或移除“已读”类名(这里使用了jQuery库简化DOM操作)
saveMessages(); // 将更新后的留言列表保存到服务器(这里假设已经实现了这个功能)
});
Array.from(commentItem.getElementsByTagName('strong'))[0].addEventListener('click', function (event) { // 为加粗的文字添加点击事件监听器(这里使用了简化的DOM操作方式)
event.stopPropagation(); // 防止冒泡触发其他元素的点击事件监听器(这里使用了简化的DOM操作方式)
messageInput.value = ''; // 将输入框清空(这里使用了简化的DOM操作方式)
$(commentItem).remove(); // 从DOM中移除该条留言(这里使用了jQuery库简化DOM操作)
saveMessages(); // 将更新后的留言列表保存到服务器(这里假设已经实现了这个功能)
messageInput.focus(); // 将焦点重新设置到输入框上(这里使用了简化的DOM操作方式)
messageInput[0].select(); // 将光标移动到输入框的开头位置(这里使用了简化的DOM操作方式)
}, true); // 注意这里的第三个参数为true,表示事件处理程序在冒泡阶段执行(这里使用了简化的DOM操作方式)
Array.from(document.getElementById('messageList'))[0].appendChild(commentItem); // 将新的留言项添加到列表中(这里使用了简化的DOM操作方式)
}
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/216509.html
微信扫一扫 