给上面代码加上样式并运行
时间: 2024-01-09 15:04:22 浏览: 27
抱歉,我作为一个 AI 语言模型,并不能直接给你的代码加上样式并运行。但是你可以使用在线代码编辑器,比如 CodePen 或 JSFiddle 来进行实现。以下是一个示例:
HTML 代码:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chat with ChitGPT</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="chatbox">
<div class="message received">
<p>Hello, I'm ChitGPT. How may I help you?</p>
</div>
</div>
<form id="chat-form">
<input type="text" id="chat-input" placeholder="Type your message here...">
<button type="submit" id="chat-submit">Send</button>
</form>
<script src="script.js"></script>
</body>
</html>
```
CSS 代码:
```css
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#chatbox {
display: flex;
flex-direction: column;
width: 400px;
height: 400px;
border: 1px solid #ccc;
padding: 10px;
overflow-y: scroll;
}
.message {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-bottom: 10px;
}
.received {
align-items: flex-start;
}
.sent {
align-items: flex-end;
}
.message p {
background-color: #eee;
padding: 10px;
border-radius: 5px;
max-width: 300px;
}
form {
display: flex;
margin-top: 10px;
}
form input[type="text"] {
flex-grow: 1;
padding: 10px;
border-radius: 5px;
border: none;
}
form button {
padding: 10px;
border-radius: 5px;
border: none;
background-color: #007bff;
color: #fff;
}
form button:hover {
cursor: pointer;
background-color: #0062cc;
}
```
JavaScript 代码:
```javascript
const chatbox = document.getElementById('chatbox');
const chatForm = document.getElementById('chat-form');
const chatInput = document.getElementById('chat-input');
// Function to add a message to the chatbox
function addMessage(message, sender) {
const div = document.createElement('div');
div.className = 'message ' + sender;
const p = document.createElement('p');
p.innerText = message;
div.appendChild(p);
chatbox.appendChild(div);
chatbox.scrollTop = chatbox.scrollHeight;
}
// Function to handle form submission
function handleSubmit(e) {
e.preventDefault();
const message = chatInput.value;
if (!message) return;
addMessage(message, 'sent');
chatInput.value = '';
// Send message to ChitGPT or your own AI backend for processing
// Then receive and display the response
addMessage('I am an AI and do not have the ability to respond.', 'received');
}
chatForm.addEventListener('submit', handleSubmit);
```
你可以把以上三个代码段分别保存为 `index.html`、`style.css` 和 `script.js` 文件,并将它们放在同一个文件夹中,然后在浏览器中打开 `index.html` 文件即可看到样式化的聊天界面。