js在线聊天对话框网页源码

要创建一个简单的JavaScript在线聊天对话框网页，你需要了解HTML、CSS和JavaScript的基础知识。以下是一个基本的示例，展示了如何构建一个简单的聊天界面。

HTML (结构)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Chat Box</title>
<style>
  /* 在这里添加CSS样式 */
</style>
</head>
<body>
<div id="chatbox">
  <div id="chatbox-messages"></div>
  <input type="text" id="chatbox-input" placeholder="Type a message...">
  <button onclick="sendMessage()">Send</button>
</div>

<script>
  // 在这里添加JavaScript代码
</script>
</body>
</html>

CSS (样式)

#chatbox {
  width: 300px;
  border: 1px solid #ccc;
  padding: 10px;
  height: 400px;
  overflow-y: auto;
}

#chatbox-messages {
  height: 300px;
  overflow-y: auto;
  border-bottom: 1px solid #ccc;
  margin-bottom: 5px;
  padding-bottom: 5px;
}

#chatbox-input {
  width: calc(100% - 22px);
  padding: 5px;
}

JavaScript (交互)

function sendMessage() {
  var input = document.getElementById('chatbox-input');
  var message = input.value.trim();
  if (message !== '') {
    var messagesContainer = document.getElementById('chatbox-messages');
    var messageElement = document.createElement('div');
    messageElement.textContent = message;
    messagesContainer.appendChild(messageElement);
    input.value = ''; // 清空输入框
    messagesContainer.scrollTop = messagesContainer.scrollHeight; // 滚动到底部
  }
}

// 允许按下回车键发送消息
document.getElementById('chatbox-input').addEventListener('keyup', function(event) {
  if (event.key === 'Enter') {
    sendMessage();
  }
});