实现像现在csdn网站的ai回答界面的前端代码示例
时间: 2023-06-17 11:05:52 浏览: 73
要实现类似 CSDN 网站的 AI 回答界面,需要使用前端技术来实现,一般涉及到 HTML、CSS 和 JavaScript 等技术。以下是一个简单的示例代码,可以作为参考:
HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>AI 回答页面</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="chatbox">
<div class="header">
<h1>AI 回答</h1>
</div>
<div class="conversation">
<div class="message received">
<p>Hello, how can I help you today?</p>
</div>
<div class="message sent">
<p>Can you tell me more about your AI technology?</p>
</div>
<div class="message received">
<p>Sure, we use machine learning algorithms to develop our AI technology.</p>
</div>
<!-- more messages here -->
</div>
<div class="input">
<input type="text" placeholder="Type your message here...">
<button>Send</button>
</div>
</div>
</body>
</html>
```
CSS 代码:
```css
body {
font-family: Arial, sans-serif;
}
.chatbox {
width: 400px;
margin: 0 auto;
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 0px 0px 5px #ccc;
}
.header {
padding: 10px;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
}
.header h1 {
margin: 0;
font-size: 18px;
color: #333;
}
.conversation {
padding: 10px;
height: 250px;
overflow-y: scroll;
}
.message {
margin: 10px 0;
display: flex;
align-items: center;
}
.message p {
padding: 10px;
background-color: #f2f2f2;
border-radius: 5px;
}
.message.received p {
margin-left: 10px;
}
.message.sent p {
margin-right: 10px;
background-color: #007bff;
color: #fff;
}
.input {
display: flex;
align-items: center;
padding: 10px;
}
.input input {
flex: 1;
padding: 10px;
border: none;
border-radius: 5px;
}
.input button {
padding: 10px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
margin-left: 10px;
cursor: pointer;
}
```
JavaScript 代码:
```javascript
// 获取元素
const input = document.querySelector('.input input');
const button = document.querySelector('.input button');
const conversation = document.querySelector('.conversation');
// 监听发送按钮点击事件
button.addEventListener('click', () => {
// 获取输入内容
const message = input.value.trim();
// 如果输入内容为空,不做任何处理
if (message === '') {
return;
}
// 创建发送消息元素
const sentMessage = document.createElement('div');
sentMessage.classList.add('message', 'sent');
sentMessage.innerHTML = `<p>${message}</p>`;
// 将消息添加到对话框中
conversation.appendChild(sentMessage);
// 清空输入框
input.value = '';
// 模拟 AI 回答
setTimeout(() => {
const receivedMessage = document.createElement('div');
receivedMessage.classList.add('message', 'received');
receivedMessage.innerHTML = '<p>Sorry, I am just a demo, I cannot answer your question.</p>';
conversation.appendChild(receivedMessage);
}, 1000);
});
// 监听输入框键盘事件
input.addEventListener('keydown', (event) => {
// 如果按下的是回车键,模拟点击发送按钮
if (event.keyCode === 13) {
event.preventDefault();
button.click();
}
});
```
以上代码实现了一个简单的 AI 回答页面,可以通过输入框向 AI 提问,并且模拟 AI 回答。你可以将以上代码保存为 html、css、js 文件,然后在浏览器中打开该 html 文件,即可查看效果。