随机用html写一段可以互相聊天的代码
<!DOCTYPE html>
<html>
<head>
<title>Chat Room</title>
<style>
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}
<pre><code> .container {
width: 80%;
margin: 0 auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
border-radius: 10px;
display: flex;
flex-direction: column;
align-items: center;
}
.messages {
height: 300px;
width: 100%;
overflow-y: scroll;
margin-bottom: 10px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #f5f5f5;
}
.message {
margin-bottom: 10px;
padding: 10px;
border-radius: 5px;
background-color: #d9edf7;
}
.message.sender {
align-self: flex-end;
background-color: #dff0d8;
}
.form {
display: flex;
align-items: center;
margin-top: 10px;
}
.form input[type="text"] {
height: 30px;
padding: 5px;
border-radius: 5px;
border: none;
flex-grow: 1;
margin-right: 10px;
}
.form button {
height: 30px;
padding: 5px 10px;
border-radius: 5px;
border: none;
background-color: #337ab7;
color: #fff;
cursor: pointer;
}
</style>
</code></pre>
</head>
<body>
<div class="container">
<h1>Chat Room</h1>
<div class="messages" id="messages">
<div class="message sender">
<p>Hello, how are you?</p>
</div>
<div class="message">
<p>Hi, I'm good. How about you?</p>
</div>
<div class="message sender">
<p>I'm doing great, thanks for asking.</p>
</div>
</div>
<div class="form">
<input type="text" id="messageInput" placeholder="Type your message here...">
<button id="sendButton">Send</button>
</div>
</div>
<pre><code><script>
const messages = document.getElementById('messages');
const messageInput = document.getElementById('messageInput');
const sendButton = document.getElementById('sendButton');
sendButton.addEventListener('click', () => {
if (messageInput.value !== '') {
const message = document.createElement('div');
message.classList.add('message', 'sender');
message.innerHTML = `<p>${messageInput.value}</p>`;
messages.appendChild(message);
messageInput.value = '';
}
});
messageInput.addEventListener('keydown', (event) => {
if (event.key === 'Enter' && messageInput.value !== '') {
const message = document.createElement('div');
message.classList.add('message');
message.innerHTML = `<p>${messageInput.value}</p>`;
messages.appendChild(message);
messageInput.value = '';
}
});
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/CSo 著作权归作者所有。请勿转载和采集!