生成一个象微信的网页聊天实例
以下是一个简易的微信网页聊天实例，使用HTML、CSS和JavaScript编写：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>微信聊天</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f1f1f1;
margin: 0;
padding: 20px;
}
.chat-box {
width: 400px;
height: 500px;
background-color: #fff;
border-radius: 5px;
overflow-y: scroll;
padding: 10px;
margin-bottom: 20px;
}
.message {
display: flex;
margin-bottom: 10px;
}
.message .avatar {
width: 40px;
height: 40px;
background-color: #ccc;
border-radius: 50%;
margin-right: 10px;
}
.message .text {
flex-grow: 1;
background-color: #f1f1f1;
padding: 10px;
border-radius: 5px;
}
.input-box {
display: flex;
}
.input-box input {
flex-grow: 1;
height: 40px;
border-radius: 5px;
border: none;
padding: 0 10px;
}
.input-box button {
height: 40px;
width: 80px;
border-radius: 5px;
border: none;
background-color: #007bff;
color: #fff;
cursor: pointer;
}
</style>
</head>
<body>
<div class="chat-box" id="chatBox"></div>
<div class="input-box">
<input type="text" id="messageInput" placeholder="请输入消息">
<button onclick="sendMessage()">发送</button>
</div>
<script>
function sendMessage() {
var messageInput = document.getElementById("messageInput");
var messageText = messageInput.value.trim();
if (messageText !== "") {
var chatBox = document.getElementById("chatBox");
var message = document.createElement("div");
message.className = "message";
message.innerHTML = '<div class="avatar"></div><div class="text">' + messageText + '</div>';
chatBox.appendChild(message);
messageInput.value = "";
chatBox.scrollTop = chatBox.scrollHeight;
}
}
</script>
</body>
</html>
这是一个简单的微信网页聊天界面，聊天框中显示了发送和接收的消息。用户可以在输入框中输入消息，点击发送按钮后，消息将添加到聊天框中并清空输入框
原文地址: https://www.cveoy.top/t/topic/iLGX 著作权归作者所有。请勿转载和采集!