用HTML+CSS+JS写一个在线客服对话框代码
时间: 2023-12-31 21:49:13 浏览: 39
好的,这是一个简单的在线客服对话框的 HTML、CSS、JS 代码示例:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>在线客服对话框</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.chatbox {
position: fixed;
bottom: 20px;
right: 20px;
width: 300px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #fff;
box-shadow: 0px 0px 5px #ccc;
z-index: 9999;
}
.chatbox-header {
padding: 10px;
border-bottom: 1px solid #ccc;
background-color: #f0f0f0;
border-radius: 5px 5px 0 0;
}
.chatbox-header h2 {
margin: 0;
font-size: 16px;
font-weight: bold;
color: #333;
}
.chatbox-body {
padding: 10px;
min-height: 200px;
max-height: 400px;
overflow-y: scroll;
scroll-behavior: smooth;
word-wrap: break-word;
color: #555;
font-size: 14px;
}
.chatbox-body p {
margin: 0 0 10px 0;
padding: 5px 10px;
border-radius: 10px;
background-color: #f0f0f0;
max-width: 70%;
}
.chatbox-footer {
padding: 10px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
border-top: 1px solid #ccc;
border-radius: 0 0 5px 5px;
}
.chatbox-footer input[type=text] {
flex: 1;
padding: 10px;
border: none;
border-radius: 5px;
box-shadow: 0px 0px 5px #ccc;
margin-right: 10px;
font-size: 14px;
}
.chatbox-footer input[type=submit] {
padding: 10px 20px;
border: none;
border-radius: 5px;
background-color: #005ea5;
color: #fff;
font-size: 14px;
cursor: pointer;
transition: background-color 0.3s ease-in-out;
}
.chatbox-footer input[type=submit]:hover {
background-color: #003e70;
}
</style>
</head>
<body>
<div class="chatbox">
<div class="chatbox-header">
<h2>在线客服</h2>
</div>
<div class="chatbox-body">
<p>欢迎来到在线客服对话框!</p>
</div>
<div class="chatbox-footer">
<input type="text" placeholder="请输入您的问题...">
<input type="submit" value="发送">
</div>
</div>
<script>
// 获取 DOM 元素
const chatbox = document.querySelector('.chatbox');
const input = chatbox.querySelector('input[type=text]');
const submitBtn = chatbox.querySelector('input[type=submit]');
const chatboxBody = chatbox.querySelector('.chatbox-body');
// 提交问题
function submitQuestion() {
const question = input.value.trim();
if (question !== '') {
// 发送问题
const questionP = document.createElement('p');
questionP.textContent = question;
questionP.style.textAlign = 'right';
chatboxBody.appendChild(questionP);
// 清空输入框
input.value = '';
// 模拟机器人回答
setTimeout(function() {
// 机器人回答
const answer = '非常抱歉,目前无法回答您的问题。';
const answerP = document.createElement('p');
answerP.textContent = answer;
chatboxBody.appendChild(answerP);
}, 1000);
}
};
// 绑定按钮事件
submitBtn.addEventListener('click', submitQuestion);
// 回车也可以提交问题
input.addEventListener('keydown', function(e) {
if (e.key === 'Enter') {
submitQuestion();
}
});
</script>
</body>
</html>
```
以上代码实现了一个简单的在线客服对话框,用户可以通过文本框输入问题,机器人会自动回复一些文本。你可以根据自己的需要修改样式和代码逻辑。