深圳网站设计价格,网站运行团队建设,贵州省住房和城乡建设厅官方网站首页,通讯录管理网站建设1.功能说明#xff1a;
对上一篇的基础上进行了稍稍改造 主要修改点#xff1a; 搜索功能: 在搜索框后面增加了搜索按钮。 搜索按钮调用performSearch函数来执行搜索操作。 表单形式的功能: 上传文件: 修改为表单形式#xff0c;允许用户通过文件输入控件选择文件并上传。 …1.功能说明
对上一篇的基础上进行了稍稍改造 主要修改点 搜索功能: 在搜索框后面增加了搜索按钮。 搜索按钮调用performSearch函数来执行搜索操作。 表单形式的功能: 上传文件: 修改为表单形式允许用户通过文件输入控件选择文件并上传。 发布朋友圈: 修改为表单形式允许用户输入朋友圈内容并发布。 展示视频: 修改为表单形式允许用户输入视频URL并展示。
2.代码展示
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title简易版微信/titlestylebody {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
bodydiv classcontainerdiv classsidebarh3搜索/h3div classsearch-areainput typetext idsearchInput placeholder搜索...button onclickperformSearch()搜索/button/divh3好友/h3div classfriends-list idfriendsListdiv classitem onclickshowFriends()查看好友/div/divh3收藏/h3div classfavorites-list idfavoritesListdiv classitem onclickshowFavorites()查看收藏/div/divh3文件/h3div classfiles-list idfilesListdiv classitem onclickshowFiles()查看文件/div/divh3朋友圈/h3div classmoments-list idmomentsListdiv classitem onclickshowMoments()查看朋友圈/div/divh3视频号/h3div classvideos-list idvideosListdiv classitem onclickshowVideos()查看视频/div/div/divdiv classmain-contenth2 idcontentTitle主界面/h2div idcontentArea/div/div/divscriptlet 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添加好友/h3form idaddFriendFormdiv classform-grouplabel forfriendNickname网名:/labelinput typetext idfriendNickname required/divdiv classform-grouplabel forfriendAge年龄:/labelinput typenumber idfriendAge min1 required/divdiv classform-grouplabel forfriendGender性别:/labelselect idfriendGender requiredoption value请选择.../optionoption valuemale男/optionoption valuefemale女/optionoption valueother其他/option/select/divdiv classform-grouplabel forfriendAddress地址:/labelinput typetext idfriendAddress required/divdiv classform-grouplabel forfriendAvatar头像:/labelinput typefile idfriendAvatar acceptimage/* requiredimg idavatarPreview classpreview-image src altAvatar Preview styledisplay:none;/divbutton typesubmit添加好友/button/form;document.getElementById(friendAvatar).addEventListener(change, function(event) {const file event.target.files[0];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[0];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[index].nickname} 吗);}function blockFriend(index) {friends[index].blocked !friends[index].blocked;showMessage(已将 ${friends[index].nickname} ${friends[index].blocked ? 拉黑 : 取消拉黑});showFriends();}function addToFavoritesForm() {const contentArea document.getElementById(contentArea);contentArea.innerHTML h3添加收藏/h3form idaddFavoriteFormdiv classform-grouplabel forfavoriteContent收藏内容:/labeltextarea idfavoriteContent rows4 required/textarea/divbutton typesubmit添加收藏/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[index].likes;showFavorites();}function uploadFileForm() {const contentArea document.getElementById(contentArea);contentArea.innerHTML h3上传文件/h3form iduploadFileFormdiv classform-grouplabel forfileUpload选择文件:/labelinput typefile idfileUpload required/divbutton typesubmit上传文件/button/form;document.getElementById(uploadFileForm).onsubmit (event) {event.preventDefault();const fileInput document.getElementById(fileUpload);const file fileInput.files[0];if (file) {files.push(file);showMessage(${file.name} 已上传);showFiles();}};}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 postMomentForm() {const contentArea document.getElementById(contentArea);contentArea.innerHTML h3发布朋友圈/h3form idpostMomentFormdiv classform-grouplabel formomentContent朋友圈内容:/labeltextarea idmomentContent rows4 required/textarea/divbutton typesubmit发布朋友圈/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[index].likes;showMoments();}function showVideoForm() {const contentArea document.getElementById(contentArea);contentArea.innerHTML h3展示视频/h3form idshowVideoFormdiv classform-grouplabel forvideoUrl视频URL:/labelinput typeurl idvideoUrl required/divbutton typesubmit展示视频/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[index].likes;showVideos();}function updateFriendsList() {const friendsList document.getElementById(friendsList);friendsList.innerHTML div classitem οnclickshowFriends()查看好友/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 classitem οnclickshowFavorites()查看收藏/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 classitem οnclickshowFiles()查看文件/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 classitem οnclickshowMoments()查看朋友圈/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 classitem οnclickshowVideos()查看视频/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好友列表/h3button οnclickaddFriendForm()添加好友/buttondiv idfriendsContent/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.gender]} ${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}/h3div classfriend-detailsimg src${friend.avatar} alt${friend.nickname}s Avatarp年龄: ${friend.age}/pp性别: ${genderMap[friend.gender]}/pp地址: ${friend.address}/pp状态: ${friend.blocked ? 已拉黑 : 正常}/pbutton οnclickchatWithFriend(${index}) ${friend.blocked ? classdisabled : }聊天/buttonbutton οnclickdeleteFriend(${index})删除好友/buttonbutton οnclickblockFriend(${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} 聊天/h3div classmessages idfriendMessages/divdiv classinput-areainput typetext idfriendMessageInput placeholder输入消息...button οnclicksendFriendMessage(${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[index];const contentArea document.getElementById(contentArea);contentArea.innerHTML h3收藏内容/h3p${favorite.content}/pp点赞数: ${favorite.likes}/pbutton οnclicklikeFavorite(${index})点赞/buttonbutton οnclickdeleteFavorite(${index})删除收藏/button;}function showFileDetails(index) {const contentArea document.getElementById(contentArea);contentArea.innerHTML h3文件详情/h3p文件名: ${files[index].name}/pbutton οnclickdownloadFile(${index})下载文件/buttonbutton οnclickdeleteFile(${index})删除文件/button;}function showMomentDetails(index) {const contentArea document.getElementById(contentArea);contentArea.innerHTML h3朋友圈内容/h3p${moments[index].content}/pp点赞数: ${moments[index].likes}/pbutton οnclicklikeMoment(${index})点赞/buttonbutton οnclickdeleteMoment(${index})删除朋友圈/button;}function showVideoDetails(index) {const contentArea document.getElementById(contentArea);contentArea.innerHTML h3视频详情/h3video src${videos[index].url} controls/videop点赞数: ${videos[index].likes}/pbutton οnclicklikeVideo(${index})点赞/buttonbutton οnclickdeleteVideo(${index})删除视频/button;}function showFavorites() {const contentArea document.getElementById(contentArea);contentArea.innerHTML h3收藏内容列表/h3button οnclickaddToFavoritesForm()新增收藏内容/buttondiv idfavoritesContent/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文件列表/h3button οnclickuploadFileForm()上传文件/buttondiv idfilesContent/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朋友圈列表/h3button οnclickpostMomentForm()发布朋友圈/buttondiv idmomentsContent/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视频列表/h3button οnclickshowVideoForm()展示视频/buttondiv idvideosContent/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 classconfirmation-message idconfirmationMessagep${message}/pdiv classconfirmation-buttonsbutton οnclickconfirmAction()确认/buttonbutton οnclickcancelAction()取消/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 classconfirmation-message idconfirmationMessagep${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搜索结果/h3div idsearchResults/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.gender]} ${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[index];const contentArea document.getElementById(contentArea);contentArea.innerHTML h3${friend.nickname}/h3div classfriend-detailsimg src${friend.avatar} alt${friend.nickname}s Avatarp年龄: ${friend.age}/pp性别: ${genderMap[friend.gender]}/pp地址: ${friend.address}/pp状态: ${friend.blocked ? 已拉黑 : 正常}/pbutton οnclickchatWithFriend(${friends.indexOf(friend)}) ${friend.blocked ? classdisabled : }聊天/buttonbutton οnclickdeleteFriend(${friends.indexOf(friend)})删除好友/buttonbutton οnclickblockFriend(${friends.indexOf(friend)})${friend.blocked ? 取消拉黑 : 拉黑好友}/button/div;}// Gender mappingconst genderMap {male: 男,female: 女,other: 其他};// 初始化列表updateFriendsList();updateFavoritesList();updateFilesList();updateMomentsList();updateVideosList();/script
/body
/html
3.效果展示
