帮我写个网页版聊天功能
时间: 2023-05-20 13:02:28 浏览: 51
好的,我可以为您提供一个简单的网页版聊天功能的代码示例:
HTML 代码:
```
<!DOCTYPE html>
<html>
<head>
<title>网页版聊天功能</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
.chat-container {
width: 400px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
.chat-message {
margin-bottom: 10px;
}
.chat-message span {
font-weight: bold;
margin-right: 10px;
}
.chat-input {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
margin-top: 10px;
}
.chat-submit {
display: block;
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 5px;
margin-top: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="chat-container">
<div class="chat-message">
<span>小明:</span> 你好啊!
</div>
<div class="chat-message">
<span>小红:</span> 你好,有什么需要帮助的吗?
</div>
<div class="chat-message">
<span>小明:</span> 我想要添加一个聊天功能到我的网站上,你能帮我吗?
</div>
<div class="chat-message">
<span>小红:</span> 当然可以,你需要什么样的聊天功能?
</div>
<textarea class="chat-input" placeholder="请输入消息"></textarea>
<button class="chat-submit">发送</button>
</div>
</body>
</html>
```
JavaScript 代码:
```
var chatInput = document.querySelector('.chat-input');
var chatSubmit = document.querySelector('.chat-submit');
chatSubmit.addEventListener('click', function() {
var message = chatInput.value;
if (message) {
var chatContainer = document.querySelector('.chat-container');
var chatMessage = document.createElement('div');
chatMessage.classList.add('chat-message');
chatMessage.innerHTML = '<span>我:</span> ' + message;
chatContainer.insertBefore(chatMessage, chatInput);
chatInput.value = '';
}
});
```
这段代码会在页面上创建一个聊天框,并且可以输入和发送消息。当用户点击发送按钮时,会将输入的消息添加到聊天框中。您可以根据自己的需求进行修改和扩展。