消失的留言（HTML中用JS实现）
以下是一个简单的例子，展示了如何在HTML页面中使用JavaScript来添加和删除留言。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>消失的留言</title>
<script>
function addMessage() {
var message = document.getElementById('message').value;
if (message) {
var container = document.getElementById('message-container');
var messageElement = document.createElement('p');
messageElement.innerText = message;
container.appendChild(messageElement);
document.getElementById('message').value = '';
}
}
function removeMessage(event) {
var container = document.getElementById('message-container');
container.removeChild(event.target.parentNode);
}
</script>
</head>
<body>
<h1>消失的留言</h1>
<textarea id="message" placeholder="写下你的留言..."></textarea>
<button onclick="addMessage()">添加留言</button>
<div id="message-container">
<!-- 留言将会被添加到这里 -->
</div>
</body>
</html>在这个例子中，我们有一个文本区域和一个按钮供用户输入留言。当用户点击按钮时，addMessage函数会被调用，留言会被添加到页面上的一个<div>容器中。每条留言旁边都有一个"X"按钮，点击它会调用removeMessage函数，从而从页面上移除该留言。
评论已关闭