用JavaScript和HTML实现聊天页面和功能（超详细）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chat Application</title>
<style>
#messageArea {
height: 300px;
overflow-y: scroll;
border: 1px solid #ccc;
padding: 8px;
margin-bottom: 10px;
}
#message {
width: 100%;
padding: 8px;
margin-top: 10px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="messageArea"></div>
<input type="text" id="message" placeholder="Type your message here...">
<button onclick="sendMessage()">Send</button>
<script>
// 发送消息的函数
function sendMessage() {
var message = document.getElementById('message').value;
if (message === '') {
alert('Message cannot be empty.');
return;
}
document.getElementById('messageArea').innerHTML += '<p><strong>You:</strong> ' + message + '</p>';
document.getElementById('message').value = '';
// 这里可以添加发送消息到服务器的代码
// 例如使用 XMLHttpRequest 或者 fetch API
}
</script>
</body>
</html>这个简单的示例展示了如何使用JavaScript和HTML创建一个基本的聊天页面。用户输入的消息会被添加到页面的messageArea元素中，并且在发送按钮被点击时，消息区域会显示用户输入的文本。这个例子没有包含实际发送消息到服务器的代码，因为这涉及到后端逻辑和API设计。
评论已关闭