html+css+js在线客服聊天对话框代码
时间: 2023-09-01 13:10:06 浏览: 86
以下是一个使用HTML、CSS和JavaScript创建的简单在线客服聊天对话框的代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>在线客服对话框</title>
<style>
/* CSS样式 */
.chat-container {
width: 300px;
height: 400px;
border: 1px solid #ccc;
overflow-y: scroll;
}
.input-container {
margin-top: 10px;
}
</style>
</head>
<body>
<div class="chat-container">
<div id="chat-log"></div>
</div>
<div class="input-container">
<input type="text" id="user-input">
<button id="send-button">发送</button>
</div>
<script>
// JavaScript代码
const chatLog = document.getElementById('chat-log');
const userInput = document.getElementById('user-input');
const sendButton = document.getElementById('send-button');
sendButton.addEventListener('click', function() {
const message = userInput.value;
displayMessage(message, 'user');
// 模拟服务器响应
setTimeout(function() {
const response = '感谢您的留言!';
displayMessage(response, 'bot');
}, 500);
userInput.value = ''; // 清空输入框
});
function displayMessage(message, sender) {
const messageElement = document.createElement('p');
messageElement.textContent = message;
if (sender === 'user') {
messageElement.style.color = 'blue';
} else {
messageElement.style.color = 'green';
}
chatLog.appendChild(messageElement);
}
</script>
</body>
</html>
```
这个示例代码创建了一个简单的客服对话框,包含一个聊天记录容器(`chat-log`)、一个用户输入框(`user-input`)和一个发送按钮(`send-button`)。当用户点击发送按钮时,JavaScript代码将读取用户输入的消息并将其显示在聊天记录中。然后,通过模拟服务器响应(使用`setTimeout`函数模拟延迟),将一个固定的回复消息显示在聊天记录中。
你可以根据需要自定义样式和功能,并通过与服务器的实际交互来处理用户输入和响应。这个示例只提供了一个基本的框架,需要根据实际需求进行扩展和修改。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)