使用html 和javascript 实现微信界面功能2
1.功能分析：对上一篇的基础上进行了稍稍改造
主要修改点：
搜刮功能:
在搜刮框后面增加了搜刮按钮。
搜刮按钮调用performSearch函数来实行搜刮操作。
表单情势的功能:
上传文件: 修改为表单情势，允许用户通过文件输入控件选择文件并上传。
发布朋侪圈: 修改为表单情势，允许用户输入朋侪圈内容并发布。
展示视频: 修改为表单情势，允许用户输入视频URL并展示。
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;
display: flex;
align-items: center;
}
.search-area input {
width: calc(100% - 80px);
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
outline: none;
}
.search-area button {
padding: 10px 20px;
border: none;
background: #07c160;
color: white;
cursor: pointer;
border-radius: 5px;
margin-left: 10px;
}
.search-area button:hover {
background: #06a352;
}
.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 textarea,
.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;
}
.preview-image {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="sidebar">
<h3>搜索</h3>
<div class="search-area">
<input type="text" id="searchInput" placeholder="搜索...">
<button onclick="performSearch()">搜索</button>
</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="friendGender">性别:</label>
<select id="friendGender" required>
<option value="">请选择...</option>
<option value="male">男</option>
<option value="female">女</option>
<option value="other">其他</option>
</select>
</div>
<div class="form-group">
<label for="friendAddress">地址:</label>
<input type="text" id="friendAddress" required>
</div>
<div class="form-group">
<label for="friendAvatar">头像:</label>
<input type="file" id="friendAvatar" accept="image/*" required>
<img id="avatarPreview" class="preview-image" src="" alt="Avatar Preview" style="display:none;">
</div>
<button type="submit">添加好友</button>
</form>
`;
document.getElementById('friendAvatar').addEventListener('change', function(event) {
const file = event.target.files;
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
const previewImage = document.getElementById('avatarPreview');
previewImage.src = e.target.result;
previewImage.style.display = 'block';
};
reader.readAsDataURL(file);
}
});
document.getElementById('addFriendForm').onsubmit = (event) => {
event.preventDefault();
const nickname = document.getElementById('friendNickname').value;
const age = parseInt(document.getElementById('friendAge').value);
const gender = document.getElementById('friendGender').value;
const address = document.getElementById('friendAddress').value;
const avatarFile = document.getElementById('friendAvatar').files;
if (!avatarFile) {
showMessage('请上传头像');
return;
}
const friendId = generateUniqueId();
const reader = new FileReader();
reader.onloadend = () => {
const avatarUrl = reader.result;
friends.push({ id: friendId, nickname, age, gender, address, avatar: avatarUrl, blocked: false });
showMessage(`已添加好友 ${nickname}`);
showFriends();
};
reader.readAsDataURL(avatarFile);
};
}
function deleteFriend(index) {
confirmationCallback = () => {
friends.splice(index, 1);
showFriends();
};
showConfirmation(`确定要删除 ${friends.nickname} 吗？`);
}
function blockFriend(index) {
friends.blocked = !friends.blocked;
showMessage(`已将 ${friends.nickname} ${friends.blocked ? '拉黑' : '取消拉黑'}`);
showFriends();
}
function addToFavoritesForm() {
const contentArea = document.getElementById('contentArea');
contentArea.innerHTML = `
<h3>添加收藏</h3>
<form id="addFavoriteForm">
<div class="form-group">
<label for="favoriteContent">收藏内容:</label>
<textarea id="favoriteContent" rows="4" required></textarea>
</div>
<button type="submit">添加收藏</button>
</form>
`;
document.getElementById('addFavoriteForm').onsubmit = (event) => {
event.preventDefault();
const content = document.getElementById('favoriteContent').value;
if (content) {
favorites.push({ content, likes: 0 });
showMessage(`已添加收藏`);
showFavorites();
}
};
}
function deleteFavorite(index) {
confirmationCallback = () => {
favorites.splice(index, 1);
showFavorites();
};
showConfirmation(`确定要删除此收藏吗？`);
}
function likeFavorite(index) {
favorites.likes++;
showFavorites();
}
function uploadFileForm() {
const contentArea = document.getElementById('contentArea');
contentArea.innerHTML = `
<h3>上传文件</h3>
<form id="uploadFileForm">
<div class="form-group">
<label for="fileUpload">选择文件:</label>
<input type="file" id="fileUpload" required>
</div>
<button type="submit">上传文件</button>
</form>
`;
document.getElementById('uploadFileForm').onsubmit = (event) => {
event.preventDefault();
const fileInput = document.getElementById('fileUpload');
const file = fileInput.files;
if (file) {
files.push(file);
showMessage(`${file.name} 已上传`);
showFiles();
}
};
}
function downloadFile(index) {
const file = files;
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 postMomentForm() {
const contentArea = document.getElementById('contentArea');
contentArea.innerHTML = `
<h3>发布朋友圈</h3>
<form id="postMomentForm">
<div class="form-group">
<label for="momentContent">朋友圈内容:</label>
<textarea id="momentContent" rows="4" required></textarea>
</div>
<button type="submit">发布朋友圈</button>
</form>
`;
document.getElementById('postMomentForm').onsubmit = (event) => {
event.preventDefault();
const content = document.getElementById('momentContent').value;
if (content) {
moments.push({ content, likes: 0 });
showMessage(`已发布朋友圈`);
showMoments();
}
};
}
function deleteMoment(index) {
confirmationCallback = () => {
moments.splice(index, 1);
showMoments();
};
showConfirmation(`确定要删除此朋友圈吗？`);
}
function likeMoment(index) {
moments.likes++;
showMoments();
}
function showVideoForm() {
const contentArea = document.getElementById('contentArea');
contentArea.innerHTML = `
<h3>展示视频</h3>
<form id="showVideoForm">
<div class="form-group">
<label for="videoUrl">视频URL:</label>
<input type="url" id="videoUrl" required>
</div>
<button type="submit">展示视频</button>
</form>
`;
document.getElementById('showVideoForm').onsubmit = (event) => {
event.preventDefault();
const videoUrl = document.getElementById('videoUrl').value;
if (videoUrl) {
videos.push({ url: videoUrl, likes: 0 });
showMessage(`已添加视频`);
showVideos();
}
};
}
function deleteVideo(index) {
confirmationCallback = () => {
videos.splice(index, 1);
showVideos();
};
showConfirmation(`确定要删除此视频吗？`);
}
function likeVideo(index) {
videos.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.substring(0, 50)}... (${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.substring(0, 50)}... (${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}) ${genderMap} ${friend.blocked ? '(已拉黑)' : ''}`;
item.onclick = () => showFriendDetails(index);
friendsContent.appendChild(item);
});
}
function showFriendDetails(index) {
const friend = friends;
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>性别: ${genderMap}</p>
<p>地址: ${friend.address}</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;
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 favorite = favorites;
const contentArea = document.getElementById('contentArea');
contentArea.innerHTML = `
<h3>收藏内容</h3>
<p>${favorite.content}</p>
<p>点赞数: ${favorite.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.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.content}</p>
<p>点赞数: ${moments.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.url}" controls></video>
<p>点赞数: ${videos.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="addToFavoritesForm()">新增收藏内容</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.substring(0, 50)}... (${favorite.likes} 点赞)`;
item.onclick = () => showFavoriteDetails(index);
favoritesContent.appendChild(item);
});
}
function showFiles() {
const contentArea = document.getElementById('contentArea');
contentArea.innerHTML = `
<h3>文件列表</h3>
<button οnclick="uploadFileForm()">上传文件</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="postMomentForm()">发布朋友圈</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.substring(0, 50)}... (${moment.likes} 点赞)`;
item.onclick = () => showMomentDetails(index);
momentsContent.appendChild(item);
});
}
function showVideos() {
const contentArea = document.getElementById('contentArea');
contentArea.innerHTML = `
<h3>视频列表</h3>
<button οnclick="showVideoForm()">展示视频</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
}
function searchFriends(query) {
const filteredFriends = friends.filter(friend =>
friend.nickname.toLowerCase().includes(query.toLowerCase())
);
const contentArea = document.getElementById('contentArea');
contentArea.innerHTML = `
<h3>搜索结果</h3>
<div id="searchResults"></div>
`;
const searchResults = document.getElementById('searchResults');
if (filteredFriends.length > 0) {
filteredFriends.forEach((friend, index) => {
const item = document.createElement('div');
item.className = 'item';
item.textContent = `${friend.nickname} (${friend.age}) ${genderMap} ${friend.blocked ? '(已拉黑)' : ''}`;
item.onclick = () => showSearchFriendDetails(filteredFriends, index);
searchResults.appendChild(item);
});
} else {
searchResults.innerHTML = '<p>没有找到匹配的好友</p>';
}
}
function performSearch() {
const query = document.getElementById('searchInput').value;
if (query.trim()) {
searchFriends(query);
} else {
showFriends(); // Reset to full list if search is cleared
}
}
function showSearchFriendDetails(filteredFriends, index) {
const friend = filteredFriends;
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>性别: ${genderMap}</p>
<p>地址: ${friend.address}</p>
<p>状态: ${friend.blocked ? '已拉黑' : '正常'}</p>
<button οnclick="chatWithFriend(${friends.indexOf(friend)})" ${friend.blocked ? 'class="disabled"' : ''}>聊天</button>
<button οnclick="deleteFriend(${friends.indexOf(friend)})">删除好友</button>
<button οnclick="blockFriend(${friends.indexOf(friend)})">${friend.blocked ? '取消拉黑' : '拉黑好友'}</button>
</div>
`;
}
// Gender mapping
const genderMap = {
male: '男',
female: '女',
other: '其他'
};
// 初始化列表
updateFriendsList();
updateFavoritesList();
updateFilesList();
updateMomentsList();
updateVideosList();
</script>
</body>
</html>
3.效果展示
https://i-blog.csdnimg.cn/direct/83349334f68a4604bf47f6b55bf807d2.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]