生成一个完美的网页聊天实例
这是一个简单的网页聊天实例，使用HTML、CSS和JavaScript来实现：
HTML代码：
<!DOCTYPE html>
<html>
<head>
<title>网页聊天</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="chat-container">
<div id="chat-area"></div>
<input type="text" id="message-input" placeholder="输入消息...">
<button id="send-btn">发送</button>
</div>
<script src="script.js"></script>
</body>
</html>
CSS代码（style.css）：
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.chat-container {
max-width: 500px;
margin: 50px auto;
border: 1px solid #ccc;
padding: 20px;
background-color: #f9f9f9;
}
#chat-area {
height: 300px;
overflow-y: scroll;
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 10px;
}
#message-input {
width: 100%;
padding: 5px;
font-size: 16px;
}
#send-btn {
padding: 5px 10px;
font-size: 16px;
}
JavaScript代码（script.js）：
window.onload = function() {
var chatArea = document.getElementById("chat-area");
var messageInput = document.getElementById("message-input");
var sendBtn = document.getElementById("send-btn");
sendBtn.onclick = function() {
var message = messageInput.value;
if (message !== "") {
var newMessage = document.createElement("div");
newMessage.innerText = message;
chatArea.appendChild(newMessage);
messageInput.value = "";
}
};
messageInput.addEventListener("keydown", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
sendBtn.click();
}
});
};
这个网页聊天实例中，用户可以在输入框中输入消息，并点击发送按钮（或按下回车键）发送消息。发送的消息会显示在聊天区域中
原文地址: https://www.cveoy.top/t/topic/iLHL 著作权归作者所有。请勿转载和采集!