用html,css,js写一个聊天对话框的代码
时间: 2023-03-30 09:01:22 浏览: 279
好的,以下是一个简单的聊天对话框的代码:
HTML:
```
<div class="chat-container">
<div class="chat-header">
<h3>聊天室</h3>
</div>
<div class="chat-messages">
<div class="message">
<p>你好!</p>
</div>
<div class="message">
<p>最近怎么样?</p>
</div>
</div>
<div class="chat-input">
<input type="text" placeholder="输入消息...">
<button>发送</button>
</div>
</div>
```
CSS:
```
.chat-container {
width: 400px;
height: 500px;
border: 1px solid #ccc;
border-radius: 5px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.chat-header {
background-color: #f5f5f5;
padding: 10px;
text-align: center;
}
.chat-messages {
flex: 1;
padding: 10px;
overflow-y: scroll;
}
.message {
margin-bottom: 10px;
}
.message p {
background-color: #f5f5f5;
padding: 5px 10px;
border-radius: 5px;
display: inline-block;
max-width: 70%;
}
.chat-input {
display: flex;
align-items: center;
padding: 10px;
}
.chat-input input {
flex: 1;
padding: 5px;
border-radius: 5px;
border: none;
margin-right: 10px;
}
.chat-input button {
background-color: #007bff;
color: #fff;
border: none;
padding: 5px 10px;
border-radius: 5px;
cursor: pointer;
}
```
JS:
```
const input = document.querySelector('.chat-input input');
const button = document.querySelector('.chat-input button');
const messages = document.querySelector('.chat-messages');
button.addEventListener('click', () => {
const message = input.value;
if (message.trim() !== '') {
const messageElement = document.createElement('div');
messageElement.classList.add('message');
messageElement.innerHTML = `<p>${message}</p>`;
messages.appendChild(messageElement);
input.value = '';
messages.scrollTop = messages.scrollHeight;
}
});
input.addEventListener('keydown', (event) => {
if (event.key === 'Enter') {
button.click();
}
});
```