已解决
【前端基础案例1】HTML + CSS + JavaScript
来自网友在路上 168868提问 提问时间：2023-09-21 15:39:27阅读次数： 68
最佳答案 问答题库688位专家为你答疑解惑
微信聊天窗口
HTML：
<!DOCTYPE html>
<html>
<head><link rel="stylesheet" type="text/css" href="style.css">
</head>
<body><div class="chat-container"><div class="chat-messages" id="chat-messages"></div><div class="chat-input"><input type="text" id="message-input" placeholder="输入消息..."><button id="send-button">发送</button></div></div><script src="script.js"></script>
</body>
</html>
CSS（style.css）：
body {font-family: Arial, sans-serif;
}.chat-container {width: 300px;margin: 0 auto;border: 1px solid #ccc;box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);padding: 20px;border-radius: 10px;
}.chat-messages {height: 300px;overflow-y: scroll;border: 1px solid #ccc;padding: 10px;margin-bottom: 10px;
}.chat-input {display: flex;justify-content: space-between;
}input[type="text"] {flex: 1;padding: 5px;border: 1px solid #ccc;border-radius: 5px;
}button {padding: 5px 10px;background-color: #007bff;color: white;border: none;border-radius: 5px;cursor: pointer;
}
JavaScript（script.js）：
document.addEventListener("DOMContentLoaded", function() {const messageInput = document.getElementById("message-input");const sendButton = document.getElementById("send-button");const chatMessages = document.getElementById("chat-messages");sendButton.addEventListener("click", function() {const messageText = messageInput.value;if (messageText.trim() !== "") {const messageDiv = document.createElement("div");messageDiv.classList.add("message");messageDiv.textContent = messageText;chatMessages.appendChild(messageDiv);messageInput.value = "";// 模拟回复消息setTimeout(function() {const replyDiv = document.createElement("div");replyDiv.classList.add("message", "reply");replyDiv.textContent = "这是一个自动回复。";chatMessages.appendChild(replyDiv);chatMessages.scrollTop = chatMessages.scrollHeight;}, 1000);}});// 模拟初始消息const initialMessage = document.createElement("div");initialMessage.classList.add("message", "reply");initialMessage.textContent = "欢迎使用聊天窗口！";chatMessages.appendChild(initialMessage);
});
查看全文
99%的人还看了
相似问题
猜你感兴趣
版权申明
本文"【前端基础案例1】HTML + CSS + JavaScript"：http://eshow365.cn/6-10783-0.html 内容来自互联网，请自行判断内容的正确性。如有侵权请联系我们，立即删除！