使用html 和javascript 实现微信界面功能1

编织幻境的妖2024-12-12 13:35

1.功能说明：

  1. 搜索模块:

    • 提供一个搜索框，但目前没有实现具体的搜索功能。

  2. 好友模块:

    • 在左侧的"好友"部分有一个"查看好友"按钮。
    • 点击左侧的"查看好友"按钮时，会在右侧显示所有好友的列表。
    • 列表中每个好友可以点击查看详情，包括状态（正常/已拉黑）、聊天按钮、删除好友按钮和拉黑好友按钮。
    • 如果好友已被拉黑，则聊天按钮会被禁用。
    • 删除好友和拉黑好友操作通过确认弹窗进行。
    • 右侧还会显示一个"添加好友"的按钮，方便随时添加新的好友。

  3. 收藏模块:

    • 在左侧的"收藏"部分有一个"查看收藏"按钮。
    • 点击左侧的"查看收藏"按钮时，会在右侧显示所有收藏内容的列表。
    • 列表中每个收藏内容可以点击查看详情，包括点赞和删除操作。
    • 右侧还会显示一个"新增收藏内容"的按钮，方便随时添加新的收藏内容。
    • 删除收藏操作通过确认弹窗进行。

  4. 文件模块:

    • 在左侧的"文件"部分有一个"查看文件"按钮。
    • 点击左侧的"查看文件"按钮时，会在右侧显示所有文件的列表。
    • 列表中每个文件可以点击查看详情，包括下载和删除操作。
    • 右侧还会显示一个"上传文件"的按钮，方便随时上传新的文件。
    • 删除文件操作通过确认弹窗进行。

  5. 朋友圈模块:

    • 在左侧的"朋友圈"部分有一个"查看朋友圈"按钮。
    • 点击左侧的"查看朋友圈"按钮时，会在右侧显示所有朋友圈的列表。
    • 列表中每个朋友圈可以点击查看详情，包括点赞和删除操作。
    • 右侧还会显示一个"发布朋友圈"的按钮，方便随时发布新的朋友圈。
    • 删除朋友圈操作通过确认弹窗进行。

  6. 视频号模块:

    • 在左侧的"视频号"部分有一个"查看视频"按钮。
    • 点击左侧的"查看视频"按钮时，会在右侧显示所有视频的列表。
    • 列表中每个视频可以点击查看详情，包括点赞和删除操作。
    • 右侧还会显示一个"展示视频"的按钮，方便随时添加新的视频。
    • 删除视频操作通过确认弹窗进行。

2.完整代码

html 复制代码 
<!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.效果演示

相关推荐
quitv16 分钟前
react脚手架配置别名
前端·javascript·react.js
Gazer_S2 小时前
【现代前端框架中本地图片资源的处理方案】
前端·javascript·chrome·缓存·前端框架
贺今宵4 小时前
通过$attrs传递的未指定名称的modelValue值在子组件中修改
前端·javascript
lifire_H8 小时前
Canvas在视频应用中的技术解析
前端·javascript·音视频
十八朵郁金香10 小时前
深入理解 JavaScript 中的 this 指向
开发语言·前端·javascript
贵州晓智信息科技10 小时前
使用 Three.js 转换 GLSL 粒子效果着色器
开发语言·javascript·着色器
linkcoco11 小时前
记录h5使用navigator.mediaDevices.getUserMedia录制音视频
前端·javascript·vue·音视频·js
Mh11 小时前
代码提交校验及提交规范的实践方案
前端·javascript·架构
昨日余光11 小时前
仅需三分钟，使用Vue3.x版本组件式风格实现一个消息提示组件！
前端·javascript·css·vue.js·typescript·html
软件开发技术深度爱好者11 小时前
验证码介绍及生成与验证（HTML + JavaScript实现）
javascript
热门推荐
01DeepSeek各版本说明与优缺点分析02本地部署DeepSeek教程（Mac版本）03如何在WPS和Word/Excel中直接使用DeepSeek功能04DeepSeek R1本地化部署 Ollama + Chatbox 打造最强 AI 工具05太炸裂了！清华大学deepseek从入门到精通使用手册又出第三版了，《普通人如何抓住DeepSeek红利》（无套路，直接下载）06DeepSeek本地部署详细指南07从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑08本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程09DeepSeek r1本地安装全指南10保姆级教程：利用Ollama与Open-WebUI本地部署 DeedSeek-R1大模型