使用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.效果演示

相关推荐
摸鲨鱼的脚18 分钟前
Vue导出报表功能【动态表头+动态列】
前端·javascript·vue.js
易和安31 分钟前
JS进阶DAY5|JS执行机制
开发语言·javascript·ecmascript
余生H34 分钟前
前端的 Python 入门指南（六）：调试方式和技巧对比
开发语言·前端·javascript·python
前端熊猫1 小时前
React Router 6的学习
javascript·学习·react.js
程序员大金2 小时前
基于SpringBoot+Vue的高校电动车租赁系统
前端·javascript·vue.js·spring boot·mysql·intellij-idea·旅游
莫惊春2 小时前
HTML5 第七章
前端·html·html5
程序员入门进阶2 小时前
基于微信的追星小程序+ssm
微信·小程序
莫惊春2 小时前
HTML5 第六章
前端·html·html5
m0_748256562 小时前
前端新手教程：HTML、CSS 和 JavaScript 全面详解及实用案例
前端·css·html
幽兰的天空2 小时前
HTML 基本语法
前端·html
热门推荐
01(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明02【halcon】halcon字符识别——OCR03玄机平台应急响应—webshell查杀04【一文读懂】NTN（非地面网络）技术介绍0504 - matlab m_map地学绘图工具基础函数 - 设置网格06Docker 夺命连环 15 问07『手写ahooks系列-useClickAway』一个hook解决监听点击元素外部08支付宝短视频平台创作分成激励项目09PyTorch机器学习实现液态神经网络10校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站