1.功能说明：
-
搜索模块:
- 提供一个搜索框，但目前没有实现具体的搜索功能。
-
好友模块:
- 在左侧的“好友”部分有一个“查看好友”按钮。
- 点击左侧的“查看好友”按钮时，会在右侧显示所有好友的列表。
- 列表中每个好友可以点击查看详情，包括状态（正常/已拉黑）、聊天按钮、删除好友按钮和拉黑好友按钮。
- 如果好友已被拉黑，则聊天按钮会被禁用。
- 删除好友和拉黑好友操作通过确认弹窗进行。
- 右侧还会显示一个“添加好友”的按钮，方便随时添加新的好友。
-
收藏模块:
- 在左侧的“收藏”部分有一个“查看收藏”按钮。
- 点击左侧的“查看收藏”按钮时，会在右侧显示所有收藏内容的列表。
- 列表中每个收藏内容可以点击查看详情，包括点赞和删除操作。
- 右侧还会显示一个“新增收藏内容”的按钮，方便随时添加新的收藏内容。
- 删除收藏操作通过确认弹窗进行。
-
文件模块:
- 在左侧的“文件”部分有一个“查看文件”按钮。
- 点击左侧的“查看文件”按钮时，会在右侧显示所有文件的列表。
- 列表中每个文件可以点击查看详情，包括下载和删除操作。
- 右侧还会显示一个“上传文件”的按钮，方便随时上传新的文件。
- 删除文件操作通过确认弹窗进行。
-
朋友圈模块:
- 在左侧的“朋友圈”部分有一个“查看朋友圈”按钮。
- 点击左侧的“查看朋友圈”按钮时，会在右侧显示所有朋友圈的列表。
- 列表中每个朋友圈可以点击查看详情，包括点赞和删除操作。
- 右侧还会显示一个“发布朋友圈”的按钮，方便随时发布新的朋友圈。
- 删除朋友圈操作通过确认弹窗进行。
-
视频号模块:
- 在左侧的“视频号”部分有一个“查看视频”按钮。
- 点击左侧的“查看视频”按钮时，会在右侧显示所有视频的列表。
- 列表中每个视频可以点击查看详情，包括点赞和删除操作。
- 右侧还会显示一个“展示视频”的按钮，方便随时添加新的视频。
- 删除视频操作通过确认弹窗进行。
2.完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简易版微信</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f5f5f5;
}
.container {
width: 80%;
max-width: 1200px;
background: white;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
overflow: hidden;
display: flex;
}
.sidebar {
width: 25%;
background: #e9ecef;
padding: 20px;
box-sizing: border-box;
}
.main-content {
width: 75%;
padding: 20px;
box-sizing: border-box;
}
.search-area {
margin-bottom: 20px;
}
.search-area input {
width: calc(100% - 22px);
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
outline: none;
}
.friends-list, .favorites-list, .files-list, .moments-list, .videos-list {
margin-top: 20px;
}
.item {
padding: 10px;
border-bottom: 1px solid #ddd;
cursor: pointer;
}
.item:last-child {
border-bottom: none;
}
.item:hover {
background: #f1f1f1;
}
.video-item video {
width: 100%;
border-radius: 10px;
}
.disabled {
opacity: 0.5;
pointer-events: none;
}
.messages {
max-height: 300px;
overflow-y: auto;
border-bottom: 1px solid #ddd;
padding-bottom: 10px;
}
.message {
margin-bottom: 10px;
}
.message.user {
text-align: right;
}
.message.bot {
text-align: left;
}
.input-area {
display: flex;
border-top: 1px solid #ddd;
}
.input-area input {
flex-grow: 1;
padding: 10px;
border: none;
outline: none;
}
.input-area button {
padding: 10px;
border: none;
background: #07c160;
color: white;
cursor: pointer;
}
.input-area button:hover {
background: #06a352;
}
.confirmation-message {
margin-top: 20px;
padding: 10px;
background: #ffcccc;
border: 1px solid #ff4d4d;
border-radius: 5px;
}
.confirmation-message p {
margin: 0;
}
.confirmation-buttons button {
margin-right: 10px;
}
.friend-details img {
width: 50px;
height: 50px;
border-radius: 50%;
object-fit: cover;
margin-right: 10px;
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
margin-bottom: 5px;
}
.form-group input,
.form-group select {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
outline: none;
}
.form-group button {
padding: 10px 20px;
border: none;
background: #07c160;
color: white;
cursor: pointer;
border-radius: 5px;
}
.form-group button:hover {
background: #06a352;
}
</style>
</head>
<body>
<div class="container">
<div class="sidebar">
<h3>搜索</h3>
<div class="search-area">
<input type="text" id="searchInput" placeholder="搜索...">
</div>
<h3>好友</h3>
<div class="friends-list" id="friendsList">
<div class="item" onclick="showFriends()">查看好友</div>
</div>
<h3>收藏</h3>
<div class="favorites-list" id="favoritesList">
<div class="item" onclick="showFavorites()">查看收藏</div>
</div>
<h3>文件</h3>
<div class="files-list" id="filesList">
<div class="item" onclick="showFiles()">查看文件</div>
</div>
<h3>朋友圈</h3>
<div class="moments-list" id="momentsList">
<div class="item" onclick="showMoments()">查看朋友圈</div>
</div>
<h3>视频号</h3>
<div class="videos-list" id="videosList">
<div class="item" onclick="showVideos()">查看视频</div>
</div>
</div>
<div class="main-content">
<h2 id="contentTitle">主界面</h2>
<div id="contentArea"></div>
</div>
</div>
<script>
let friends = [];
let favorites = [];
let files = [];
let moments = [];
let videos = [];
let confirmationCallback = null;
function generateUniqueId() {
return Math.random().toString(36).substr(2, 9);
}
function addFriendForm() {
const contentArea = document.getElementById('contentArea');
contentArea.innerHTML = `
<h3>添加好友</h3>
<form id="addFriendForm">
<div class="form-group">
<label for="friendNickname">网名:</label>
<input type="text" id="friendNickname" required>
</div>
<div class="form-group">
<label for="friendAge">年龄:</label>
<input type="number" id="friendAge" min="1" required>
</div>
<div class="form-group">
<label for="friendAvatar">头像URL:</label>
<input type="url" id="friendAvatar" required>
</div>
<button type="submit">添加好友</button>
</form>
`;
document.getElementById('addFriendForm').onsubmit = (event) => {
event.preventDefault();
const nickname = document.getElementById('friendNickname').value;
const age = parseInt(document.getElementById('friendAge').value);
const avatar = document.getElementById('friendAvatar').value;
const friendId = generateUniqueId();
friends.push({ id: friendId, nickname, age, avatar, blocked: false });
showMessage(`已添加好友 ${nickname}`);
showFriends();
};
}
function deleteFriend(index) {
confirmationCallback = () => {
friends.splice(index, 1);
showFriends();
};
showConfirmation(`确定要删除 ${friends[index].nickname} 吗？`);
}
function blockFriend(index) {
friends[index].blocked = !friends[index].blocked;
showMessage(`已将 ${friends[index].nickname} ${friends[index].blocked ? '拉黑' : '取消拉黑'}`);
showFriends();
}
function addToFavorites() {
const favoriteContent = prompt("请输入要收藏的内容:");
if (favoriteContent) {
favorites.push({ content: favoriteContent, likes: 0 });
showFavorites();
}
}
function deleteFavorite(index) {
confirmationCallback = () => {
favorites.splice(index, 1);
showFavorites();
};
showConfirmation(`确定要删除此收藏吗？`);
}
function likeFavorite(index) {
favorites[index].likes++;
showFavorites();
}
function uploadFile() {
const fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.onchange = () => {
const file = fileInput.files[0];
if (file) {
files.push(file);
showMessage(`${file.name} 已上传`);
showFiles();
}
};
fileInput.click();
}
function downloadFile(index) {
const file = files[index];
const url = URL.createObjectURL(file);
const a = document.createElement('a');
a.href = url;
a.download = file.name;
document.body.appendChild(a);
a.click();
a.remove();
}
function deleteFile(index) {
confirmationCallback = () => {
files.splice(index, 1);
showFiles();
};
showConfirmation(`确定要删除此文件吗？`);
}
function postMoment() {
const momentContent = prompt("请输入朋友圈内容:");
if (momentContent) {
moments.push({ content: momentContent, likes: 0 });
showMoments();
}
}
function deleteMoment(index) {
confirmationCallback = () => {
moments.splice(index, 1);
showMoments();
};
showConfirmation(`确定要删除此朋友圈吗？`);
}
function likeMoment(index) {
moments[index].likes++;
showMoments();
}
function showVideo() {
const videoUrl = prompt("请输入视频URL:");
if (videoUrl) {
videos.push({ url: videoUrl, likes: 0 });
showVideos();
}
}
function deleteVideo(index) {
confirmationCallback = () => {
videos.splice(index, 1);
showVideos();
};
showConfirmation(`确定要删除此视频吗？`);
}
function likeVideo(index) {
videos[index].likes++;
showVideos();
}
function updateFriendsList() {
const friendsList = document.getElementById('friendsList');
friendsList.innerHTML = `
<div class="item" οnclick="showFriends()">查看好友</div>
`;
if (friends.length > 0) {
friends.forEach((friend, index) => {
const item = document.createElement('div');
item.className = 'item';
item.textContent = `${friend.nickname} (${friend.age}) ${friend.blocked ? '(已拉黑)' : ''}`;
item.onclick = () => showFriendDetails(index);
friendsList.appendChild(item);
});
}
}
function updateFavoritesList() {
const favoritesList = document.getElementById('favoritesList');
favoritesList.innerHTML = `
<div class="item" οnclick="showFavorites()">查看收藏</div>
`;
if (favorites.length > 0) {
favorites.forEach((favorite, index) => {
const item = document.createElement('div');
item.className = 'item';
item.textContent = `${favorite.content} (${favorite.likes} 点赞)`;
item.onclick = () => showFavoriteDetails(index);
favoritesList.appendChild(item);
});
}
}
function updateFilesList() {
const filesList = document.getElementById('filesList');
filesList.innerHTML = `
<div class="item" οnclick="showFiles()">查看文件</div>
`;
if (files.length > 0) {
files.forEach((file, index) => {
const item = document.createElement('div');
item.className = 'item';
item.textContent = `${file.name}`;
item.onclick = () => showFileDetails(index);
filesList.appendChild(item);
});
}
}
function updateMomentsList() {
const momentsList = document.getElementById('momentsList');
momentsList.innerHTML = `
<div class="item" οnclick="showMoments()">查看朋友圈</div>
`;
if (moments.length > 0) {
moments.forEach((moment, index) => {
const item = document.createElement('div');
item.className = 'item';
item.textContent = `${moment.content} (${moment.likes} 点赞)`;
item.onclick = () => showMomentDetails(index);
momentsList.appendChild(item);
});
}
}
function updateVideosList() {
const videosList = document.getElementById('videosList');
videosList.innerHTML = `
<div class="item" οnclick="showVideos()">查看视频</div>
`;
if (videos.length > 0) {
videos.forEach((video, index) => {
const item = document.createElement('div');
item.className = 'item';
item.innerHTML = `<video src="${video.url}" controls></video> (${video.likes} 点赞)`;
item.onclick = () => showVideoDetails(index);
videosList.appendChild(item);
});
}
}
function showFriends() {
const contentArea = document.getElementById('contentArea');
contentArea.innerHTML = `
<h3>好友列表</h3>
<button οnclick="addFriendForm()">添加好友</button>
<div id="friendsContent"></div>
`;
const friendsContent = document.getElementById('friendsContent');
friends.forEach((friend, index) => {
const item = document.createElement('div');
item.className = 'item';
item.textContent = `${friend.nickname} (${friend.age}) ${friend.blocked ? '(已拉黑)' : ''}`;
item.onclick = () => showFriendDetails(index);
friendsContent.appendChild(item);
});
}
function showFriendDetails(index) {
const friend = friends[index];
const contentArea = document.getElementById('contentArea');
contentArea.innerHTML = `
<h3>${friend.nickname}</h3>
<div class="friend-details">
<img src="${friend.avatar}" alt="${friend.nickname}'s Avatar">
<p>年龄: ${friend.age}</p>
<p>状态: ${friend.blocked ? '已拉黑' : '正常'}</p>
<button οnclick="chatWithFriend(${index})" ${friend.blocked ? 'class="disabled"' : ''}>聊天</button>
<button οnclick="deleteFriend(${index})">删除好友</button>
<button οnclick="blockFriend(${index})">${friend.blocked ? '取消拉黑' : '拉黑好友'}</button>
</div>
`;
}
function chatWithFriend(index) {
const friend = friends[index];
if (friend.blocked) {
showMessage('无法与已拉黑的好友聊天');
return;
}
const contentArea = document.getElementById('contentArea');
contentArea.innerHTML = `
<h3>与 ${friend.nickname} 聊天</h3>
<div class="messages" id="friendMessages"></div>
<div class="input-area">
<input type="text" id="friendMessageInput" placeholder="输入消息...">
<button οnclick="sendFriendMessage(${index})">发送</button>
</div>
`;
}
function sendFriendMessage(index) {
const friendMessageInput = document.getElementById('friendMessageInput');
const friendMessagesContainer = document.getElementById('friendMessages');
const userMessage = friendMessageInput.value.trim();
if (userMessage === '') return;
// 创建用户消息元素
const userMessageElement = document.createElement('div');
userMessageElement.className = 'message user';
userMessageElement.textContent = userMessage;
friendMessagesContainer.appendChild(userMessageElement);
// 添加撤回按钮
const revokeButton = document.createElement('button');
revokeButton.textContent = '撤回';
revokeButton.onclick = () => {
friendMessagesContainer.removeChild(userMessageElement);
};
userMessageElement.appendChild(revokeButton);
// 清空输入框
friendMessageInput.value = '';
// 模拟好友回复
setTimeout(() => {
const friendReply = `收到：${userMessage}`;
const friendMessageElement = document.createElement('div');
friendMessageElement.className = 'message bot';
friendMessageElement.textContent = friendReply;
friendMessagesContainer.appendChild(friendMessageElement);
// 自动滚动到底部
friendMessagesContainer.scrollTop = friendMessagesContainer.scrollHeight;
}, 1000);
}
function showFavoriteDetails(index) {
const contentArea = document.getElementById('contentArea');
contentArea.innerHTML = `
<h3>收藏内容</h3>
<p>${favorites[index].content}</p>
<p>点赞数: ${favorites[index].likes}</p>
<button οnclick="likeFavorite(${index})">点赞</button>
<button οnclick="deleteFavorite(${index})">删除收藏</button>
`;
}
function showFileDetails(index) {
const contentArea = document.getElementById('contentArea');
contentArea.innerHTML = `
<h3>文件详情</h3>
<p>文件名: ${files[index].name}</p>
<button οnclick="downloadFile(${index})">下载文件</button>
<button οnclick="deleteFile(${index})">删除文件</button>
`;
}
function showMomentDetails(index) {
const contentArea = document.getElementById('contentArea');
contentArea.innerHTML = `
<h3>朋友圈内容</h3>
<p>${moments[index].content}</p>
<p>点赞数: ${moments[index].likes}</p>
<button οnclick="likeMoment(${index})">点赞</button>
<button οnclick="deleteMoment(${index})">删除朋友圈</button>
`;
}
function showVideoDetails(index) {
const contentArea = document.getElementById('contentArea');
contentArea.innerHTML = `
<h3>视频详情</h3>
<video src="${videos[index].url}" controls></video>
<p>点赞数: ${videos[index].likes}</p>
<button οnclick="likeVideo(${index})">点赞</button>
<button οnclick="deleteVideo(${index})">删除视频</button>
`;
}
function showFavorites() {
const contentArea = document.getElementById('contentArea');
contentArea.innerHTML = `
<h3>收藏内容列表</h3>
<button οnclick="addToFavorites()">新增收藏内容</button>
<div id="favoritesContent"></div>
`;
const favoritesContent = document.getElementById('favoritesContent');
favorites.forEach((favorite, index) => {
const item = document.createElement('div');
item.className = 'item';
item.textContent = `${favorite.content} (${favorite.likes} 点赞)`;
item.onclick = () => showFavoriteDetails(index);
favoritesContent.appendChild(item);
});
}
function showFiles() {
const contentArea = document.getElementById('contentArea');
contentArea.innerHTML = `
<h3>文件列表</h3>
<button οnclick="uploadFile()">上传文件</button>
<div id="filesContent"></div>
`;
const filesContent = document.getElementById('filesContent');
files.forEach((file, index) => {
const item = document.createElement('div');
item.className = 'item';
item.textContent = `${file.name}`;
item.onclick = () => showFileDetails(index);
filesContent.appendChild(item);
});
}
function showMoments() {
const contentArea = document.getElementById('contentArea');
contentArea.innerHTML = `
<h3>朋友圈列表</h3>
<button οnclick="postMoment()">发布朋友圈</button>
<div id="momentsContent"></div>
`;
const momentsContent = document.getElementById('momentsContent');
moments.forEach((moment, index) => {
const item = document.createElement('div');
item.className = 'item';
item.textContent = `${moment.content} (${moment.likes} 点赞)`;
item.onclick = () => showMomentDetails(index);
momentsContent.appendChild(item);
});
}
function showVideos() {
const contentArea = document.getElementById('contentArea');
contentArea.innerHTML = `
<h3>视频列表</h3>
<button οnclick="showVideo()">展示视频</button>
<div id="videosContent"></div>
`;
const videosContent = document.getElementById('videosContent');
videos.forEach((video, index) => {
const item = document.createElement('div');
item.className = 'item';
item.innerHTML = `<video src="${video.url}" controls></video> (${video.likes} 点赞)`;
item.onclick = () => showVideoDetails(index);
videosContent.appendChild(item);
});
}
function showConfirmation(message) {
const contentArea = document.getElementById('contentArea');
contentArea.innerHTML += `
<div class="confirmation-message" id="confirmationMessage">
<p>${message}</p>
<div class="confirmation-buttons">
<button οnclick="confirmAction()">确认</button>
<button οnclick="cancelAction()">取消</button>
</div>
</div>
`;
}
function confirmAction() {
if (confirmationCallback) {
confirmationCallback();
confirmationCallback = null;
}
hideConfirmation();
}
function cancelAction() {
confirmationCallback = null;
hideConfirmation();
}
function hideConfirmation() {
const confirmationMessage = document.getElementById('confirmationMessage');
if (confirmationMessage) {
confirmationMessage.remove();
}
}
function showMessage(message) {
const contentArea = document.getElementById('contentArea');
contentArea.innerHTML += `
<div class="confirmation-message" id="confirmationMessage">
<p>${message}</p>
</div>
`;
setTimeout(hideConfirmation, 3000); // Hide after 3 seconds
}
// 初始化列表
updateFriendsList();
updateFavoritesList();
updateFilesList();
updateMomentsList();
updateVideosList();
</script>
</body>
</html>
3.效果演示
