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

ops/2024/12/15 17:20:24/

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="javascript language-javascript">showFriends()">查看好友</div></div><h3>收藏</h3><div class="favorites-list" id="favoritesList"><div class="item" onclick="javascript language-javascript">showFavorites()">查看收藏</div></div><h3>文件</h3><div class="files-list" id="filesList"><div class="item" onclick="javascript language-javascript">showFiles()">查看文件</div></div><h3>朋友圈</h3><div class="moments-list" id="momentsList"><div class="item" onclick="javascript language-javascript">showMoments()">查看朋友圈</div></div><h3>视频号</h3><div class="videos-list" id="videosList"><div class="item" onclick="javascript language-javascript">showVideos()">查看视频</div></div></div><div class="main-content"><h2 id="contentTitle">主界面</h2><div id="contentArea"></div></div></div><script>javascript">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.效果演示

在这里插入图片描述


http://www.ppmy.cn/ops/142163.html

相关文章

网络安全教学博客（二）：常见网络安全威胁剖析

网络安全教学博客（二）：常见网络安全威胁剖析

在上一篇博客中&#xff0c;我们了解了网络安全的基础概念和重要性。今天&#xff0c;让我们深入探讨一下常见的网络安全威胁&#xff0c;以便我们能够更好地识别和防范它们。 恶意软件&#xff08;Malware&#xff09; 病毒&#xff08;Virus&#xff09;&#xff1a;病毒是一…
阅读更多...
vue +element 导入导出 文件太大，导致超时问题

vue +element 导入导出 文件太大，导致超时问题

今天遇到一个问题就是数据量过大时候一次性导入导出会出现一直加载问题&#xff0c;原本我修改了针对这两个接口不限制请求超时时间&#xff0c;发现没有用 // 导入 export function importSaleorder(data) {return request({url: xnkj/order/saleorder/importSaleorder,heade…
阅读更多...
负载均衡,高可用,监控服务搭建总结

负载均衡,高可用,监控服务搭建总结

LVS-NAT1.装ipvsadm包2.配置内核参数开启路由转发功能:/etc/sysctl.conf3.搭建lvs-nat负载均衡服务(添加虚拟服务器和真实服务器)LVS-DR1.装ipvsadm和network-scripts包2.调整内核参数设置arp_ignore和arp_annunce3.配置虚拟网卡,实现共享ip:/etc/sysconfig/network-scripts/4.…
阅读更多...
httpsok-v1.18.0-SSL证书自动续期

httpsok-v1.18.0-SSL证书自动续期

&#x1f525;httpsok-v1.18.0-SSL证书自动续期 介绍 httpsok 是一个便捷的 HTTPS 证书自动续期工具&#xff0c;基于全新的设计理念&#xff0c;专为 Nginx 、OpenResty、Apache 等服务器设计。已服务众多中小企业&#xff0c;稳定、安全、可靠。 一行命令&#xff0c;一分…
阅读更多...
嵌入式驱动开发详解16（音频驱动开发）

嵌入式驱动开发详解16（音频驱动开发）

文章目录 前言WM8960简介I2S协议接口说明 SAI音频接口简介驱动框架简介设备树配置内核使能声卡设置与测试 后续参考文献 前言 该专栏主要是讲解嵌入式相关的驱动开发&#xff0c;但是由于ALSA驱动框架过于复杂&#xff0c;实现音频编解码芯片的驱动不是一个人能完成的&#xf…
阅读更多...
Python和Java，自动化测试该选谁？

Python和Java，自动化测试该选谁？

一、引言 自动化测试的重要性简述 在当下软件开发领域&#xff0c;自动化测试已然成为了不可或缺的关键环节&#xff0c;对提升效率以及保障质量起着至关重要的作用。 随着科技的飞速发展&#xff0c;软件系统日益复杂&#xff0c;功能愈发多样&#xff0c;传统的手动测试方法…
阅读更多...
C++(举例说明类的实例化方式)

C++(举例说明类的实例化方式)

太多的信息会让你抓不住重点&#xff0c;下面通过间短的举例说明了类的几种实例化方式&#xff0c;熟悉以后再阅读代码的时候就能减少疑惑。 1.直接实例化&#xff1a;使用类名直接实例化对象 MyClass obj; 2.使用 new 关键字动态分配内存&#xff1a;使用 new 关键字来在堆上…
阅读更多...
.NET 9 已发布，您可以这样升级或更新

.NET 9 已发布，您可以这样升级或更新

.NET 9 已经发布&#xff0c;您可能正在考虑更新您的 ASP.NET Core 应用程序。 我们将介绍更新应用程序所需的内容。从更新 Visual Studio 和下载 .NET SDK 到找出可能破坏应用程序的任何重大更改。 下载 .NET 9 SDK 这些是下载 .NET 9 SDK 所需的步骤。 更新 Visual Studi…
阅读更多...
最新文章

Copyright @ 2022~2023