用html语言设计一个华丽的留言板,带滚动消失特效,给出代码
时间: 2023-04-10 17:01:26 浏览: 64
<html>
<head>
<title>华丽的留言板</title>
<style>
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}
.container {
width: 80%;
margin: 0 auto;
}
h1 {
text-align: center;
color: #333;
}
form {
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
label {
display: block;
margin-bottom: 5px;
color: #666;
}
input[type="text"], textarea {
width: 100%;
padding: 10px;
border: none;
border-radius: 5px;
box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
margin-bottom: 10px;
}
input[type="submit"] {
background-color: #333;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.message {
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
margin-bottom: 20px;
position: relative;
}
.message .delete {
position: absolute;
top: 5px;
right: 5px;
color: #999;
cursor: pointer;
}
.message .delete:hover {
color: #333;
}
.message p {
margin: 0;
color: #333;
}
.message small {
color: #999;
}
</style>
<script>
window.onload = function() {
var form = document.getElementById('message-form');
var messages = document.getElementById('messages');
form.addEventListener('submit', function(e) {
e.preventDefault();
var name = document.getElementById('name').value;
var message = document.getElementById('message').value;
var messageEl = document.createElement('div');
messageEl.classList.add('message');
var deleteEl = document.createElement('span');
deleteEl.classList.add('delete');
deleteEl.innerHTML = '×';
deleteEl.addEventListener('click', function() {
messageEl.remove();
});
var nameEl = document.createElement('p');
nameEl.innerHTML = name;
nameEl.appendChild(deleteEl);
var messageBodyEl = document.createElement('p');
messageBodyEl.innerHTML = message;
var smallEl = document.createElement('small');
smallEl.innerHTML = new Date().toLocaleString();
messageEl.appendChild(nameEl);
messageEl.appendChild(messageBodyEl);
messageEl.appendChild(smallEl);
messages.appendChild(messageEl);
form.reset();
});
};
</script>
</head>
<body>
<div class="container">
<h1>华丽的留言板</h1>
<form id="message-form">
<label for="name">姓名:</label>
<input type="text" id="name" name="name" required>
<label for="message">留言:</label>
<textarea id="message" name="message" rows="5" required></textarea>
<input type="submit" value="提交留言">
</form>
<div id="messages"></div>
</div>
</body>
</html>