HTML,JS 模拟聊天界面UI
用DeepSeek生成的，
提示词1：用HTML和JS实现一个数字人对话界面，要求对话文本背景半透明，可发送文本，代码都在一个静态页面里，界面要美观大方
提示词2：用html，JS实现一个微信聊天界面，有头像和可以发送文字,界面要美观大方，所有代码抖需要在一个静态页面里
数字人聊天：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数字人对话界面</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}
body {
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
height: 100vh;
display: flex;
flex-direction: column;
padding: 20px;
}
.header {
text-align: center;
margin-bottom: 20px;
}
.header h1 {
color: #333;
font-size: 28px;
font-weight: 500;
}
.chat-container {
flex: 1;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 15px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
padding: 20px;
display: flex;
flex-direction: column;
overflow: hidden;
}
.chat-messages {
flex: 1;
overflow-y: auto;
padding: 10px;
margin-bottom: 20px;
}
.message {
margin-bottom: 15px;
display: flex;
flex-direction: column;
}
.message-content {
max-width: 80%;
padding: 12px 16px;
border-radius: 18px;
line-height: 1.5;
position: relative;
word-wrap: break-word;
}
.user-message {
align-items: flex-end;
}
.user-message .message-content {
background-color: rgba(0, 123, 255, 0.9);
color: white;
border-bottom-right-radius: 4px;
}
.bot-message {
align-items: flex-start;
}
.bot-message .message-content {
background-color: rgba(255, 255, 255, 0.9);
color: #333;
border-bottom-left-radius: 4px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.message-sender {
font-size: 12px;
color: #666;
margin-bottom: 5px;
}
.input-area {
display: flex;
padding: 10px;
background-color: rgba(255, 255, 255, 0.9);
border-radius: 12px;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}
#message-input {
flex: 1;
padding: 12px 15px;
border: 1px solid #ddd;
border-radius: 8px;
font-size: 16px;
outline: none;
transition: border-color 0.3s;
}
#message-input:focus {
border-color: #007bff;
}
#send-button {
margin-left: 10px;
padding: 0 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 8px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s;
}
#send-button:hover {
background-color: #0056b3;
}
.typing-indicator {
display: none;
padding: 10px 15px;
background-color: rgba(255, 255, 255, 0.9);
border-radius: 18px;
margin-bottom: 15px;
align-self: flex-start;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.typing-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #666;
margin-right: 4px;
animation: typingAnimation 1.4s infinite ease-in-out;
}
.typing-dot:nth-child(1) {
animation-delay: 0s;
}
.typing-dot:nth-child(2) {
animation-delay: 0.2s;
}
.typing-dot:nth-child(3) {
animation-delay: 0.4s;
margin-right: 0;
}
@keyframes typingAnimation {
0%, 60%, 100% {
transform: translateY(0);
}
30% {
transform: translateY(-5px);
}
}
/* 滚动条样式 */
.chat-messages::-webkit-scrollbar {
width: 6px;
}
.chat-messages::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.05);
border-radius: 3px;
}
.chat-messages::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.2);
border-radius: 3px;
}
.chat-messages::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<div class="header">
<h1>数字人对话助手</h1>
</div>
<div class="chat-container">
<div class="chat-messages" id="chat-messages">
<div class="message bot-message">
<div class="message-sender">数字助手</div>
<div class="message-content">您好！我是您的数字助手，有什么可以帮您的吗？</div>
</div>
</div>
<div class="typing-indicator" id="typing-indicator">
<span class="typing-dot"></span>
<span class="typing-dot"></span>
<span class="typing-dot"></span>
</div>
<div class="input-area">
<input type="text" id="message-input" placeholder="输入消息..." autocomplete="off">
<button id="send-button">发送</button>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const chatMessages = document.getElementById('chat-messages');
const messageInput = document.getElementById('message-input');
const sendButton = document.getElementById('send-button');
const typingIndicator = document.getElementById('typing-indicator');
// 发送消息函数
function sendMessage() {
const messageText = messageInput.value.trim();
if (messageText === '') return;
// 添加用户消息
addMessage('user', messageText);
messageInput.value = '';
// 显示"正在输入"指示器
showTypingIndicator();
// 模拟AI回复延迟
setTimeout(() => {
hideTypingIndicator();
const botResponse = getBotResponse(messageText);
addMessage('bot', botResponse);
}, 1000 + Math.random() * 2000); // 随机延迟1-3秒
}
// 添加消息到聊天界面
function addMessage(sender, text) {
const messageDiv = document.createElement('div');
messageDiv.className = `message ${sender}-message`;
const senderDiv = document.createElement('div');
senderDiv.className = 'message-sender';
senderDiv.textContent = sender === 'user' ? '您' : '数字助手';
const contentDiv = document.createElement('div');
contentDiv.className = 'message-content';
contentDiv.textContent = text;
messageDiv.appendChild(senderDiv);
messageDiv.appendChild(contentDiv);
chatMessages.appendChild(messageDiv);
scrollToBottom();
}
// 显示"正在输入"指示器
function showTypingIndicator() {
typingIndicator.style.display = 'flex';
scrollToBottom();
}
// 隐藏"正在输入"指示器
function hideTypingIndicator() {
typingIndicator.style.display = 'none';
}
// 滚动到底部
function scrollToBottom() {
chatMessages.scrollTop = chatMessages.scrollHeight;
}
// 简单的AI回复逻辑
function getBotResponse(userMessage) {
const responses = [
"我明白了，您说的是：" + userMessage + "。这是一个很好的观点。",
"关于" + userMessage + "，我可以提供以下信息...",
"感谢您的提问。对于" + userMessage + "，我的理解是...",
"您提到了" + userMessage + "，这确实是一个值得探讨的话题。",
"我记录下了您的需求：" + userMessage + "，我会尽快处理。",
"关于" + userMessage + "，建议您可以考虑以下几个方面...",
"您的问题很有价值。" + userMessage + "确实需要认真对待。"
];
// 随机选择一个回复
return responses[Math.floor(Math.random() * responses.length)];
}
// 事件监听
sendButton.addEventListener('click', sendMessage);
messageInput.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
sendMessage();
}
});
// 初始滚动到底部
scrollToBottom();
});
</script>
</body>
</html>
微信聊天:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>微信聊天模拟</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
body {
background-color: #f5f5f5;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.chat-container {
width: 375px;
height: 667px;
background-color: #ededed;
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
}
.chat-header {
background-color: #2e2e2e;
color: white;
padding: 12px 16px;
display: flex;
align-items: center;
justify-content: space-between;
}
.chat-header-title {
font-size: 18px;
font-weight: 500;
}
.chat-header-actions {
display: flex;
gap: 16px;
}
.chat-messages {
flex: 1;
padding: 16px;
overflow-y: auto;
background-color: #f5f5f5;
}
.message {
display: flex;
margin-bottom: 16px;
}
.message-avatar {
width: 40px;
height: 40px;
border-radius: 4px;
margin-right: 12px;
background-color: #ddd;
overflow: hidden;
}
.message-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.message-content {
max-width: 70%;
}
.message-info {
display: flex;
align-items: center;
margin-bottom: 4px;
}
.message-sender {
font-size: 14px;
color: #888;
margin-right: 8px;
}
.message-time {
font-size: 12px;
color: #aaa;
}
.message-bubble {
padding: 10px 14px;
border-radius: 4px;
font-size: 15px;
line-height: 1.4;
position: relative;
word-wrap: break-word;
}
.received .message-bubble {
background-color: white;
color: #333;
}
.sent {
flex-direction: row-reverse;
}
.sent .message-avatar {
margin-right: 0;
margin-left: 12px;
}
.sent .message-content {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.sent .message-bubble {
background-color: #95ec69;
color: #333;
}
.chat-input {
padding: 12px 16px;
background-color: #f5f5f5;
border-top: 1px solid #ddd;
display: flex;
align-items: center;
}
.input-box {
flex: 1;
background-color: white;
border-radius: 4px;
padding: 8px 12px;
min-height: 40px;
max-height: 100px;
overflow-y: auto;
outline: none;
border: 1px solid #ddd;
}
.send-button {
margin-left: 12px;
background-color: #07c160;
color: white;
border: none;
border-radius: 4px;
padding: 8px 16px;
font-size: 14px;
cursor: pointer;
transition: background-color 0.2s;
}
.send-button:hover {
background-color: #06ad56;
}
.send-button:disabled {
background-color: #a0e0a0;
cursor: not-allowed;
}
/* 滚动条样式 */
.chat-messages::-webkit-scrollbar {
width: 6px;
}
.chat-messages::-webkit-scrollbar-track {
background: #f1f1f1;
}
.chat-messages::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 3px;
}
.chat-messages::-webkit-scrollbar-thumb:hover {
background: #aaa;
}
</style>
</head>
<body>
<div class="chat-container">
<div class="chat-header">
<div class="chat-header-title">微信聊天</div>
<div class="chat-header-actions">
<span>+</span>
</div>
</div>
<div class="chat-messages" id="chat-messages">
<!-- 消息会在这里动态添加 -->
</div>
<div class="chat-input">
<div class="input-box" id="input-box" contenteditable="true" placeholder="输入消息..."></div>
<button class="send-button" id="send-button" disabled>发送</button>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const chatMessages = document.getElementById('chat-messages');
const inputBox = document.getElementById('input-box');
const sendButton = document.getElementById('send-button');
// 模拟用户和好友数据
const user = {
id: 'user',
name: '我',
avatar: 'https://via.placeholder.com/40/95ec69/ffffff?text=ME'
};
const friend = {
id: 'friend',
name: '朋友',
avatar: 'https://via.placeholder.com/40/007aff/ffffff?text=F'
};
// 初始消息
const initialMessages = [
{
sender: friend,
text: '你好！最近怎么样？',
time: '10:30'
},
{
sender: user,
text: '我很好，谢谢！你呢？',
time: '10:32'
},
{
sender: friend,
text: '我也不错，周末有空一起吃饭吗？',
time: '10:33'
}
];
// 渲染初始消息
initialMessages.forEach(message => {
addMessage(message.sender, message.text, message.time);
});
// 自动滚动到底部
scrollToBottom();
// 输入框事件监听
inputBox.addEventListener('input', function() {
sendButton.disabled = this.textContent.trim() === '';
});
inputBox.addEventListener('keydown', function(e) {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
if (!sendButton.disabled) {
sendMessage();
}
}
});
// 发送按钮点击事件
sendButton.addEventListener('click', sendMessage);
// 发送消息函数
function sendMessage() {
const messageText = inputBox.textContent.trim();
if (messageText) {
const now = new Date();
const timeString = `${now.getHours()}:${now.getMinutes().toString().padStart(2, '0')}`;
addMessage(user, messageText, timeString);
inputBox.textContent = '';
sendButton.disabled = true;
scrollToBottom();
// 模拟回复
setTimeout(() => {
const replies = [
'好的，没问题！',
'我知道了',
'稍等一会儿',
'这个主意不错',
'我们改天再聊'
];
const randomReply = replies[Math.floor(Math.random() * replies.length)];
const replyTime = new Date();
const replyTimeString = `${replyTime.getHours()}:${replyTime.getMinutes().toString().padStart(2, '0')}`;
addMessage(friend, randomReply, replyTimeString);
scrollToBottom();
}, 1000 + Math.random() * 2000);
}
}
// 添加消息到聊天界面
function addMessage(sender, text, time) {
const messageElement = document.createElement('div');
messageElement.className = `message ${sender.id === 'user' ? 'sent' : 'received'}`;
messageElement.innerHTML = `
<div class="message-avatar">
<img src="${sender.avatar}" alt="${sender.name}">
</div>
<div class="message-content">
<div class="message-info">
<div class="message-sender">${sender.name}</div>
<div class="message-time">${time}</div>
</div>
<div class="message-bubble">${text}</div>
</div>
`;
chatMessages.appendChild(messageElement);
}
// 滚动到底部
function scrollToBottom() {
chatMessages.scrollTop = chatMessages.scrollHeight;
}
});
</script>
</body>
</html>
fffffffffffffffff
test red font.
浙公网安备 33010602011771号