政府网站设计欣赏h5制作
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[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>添加收藏</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[index].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[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>发布朋友圈</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[index].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[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.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.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}</h3><div class="friend-details"><img src="${friend.avatar}" alt="${friend.nickname}'s Avatar"><p>年龄: ${friend.age}</p><p>性别: ${genderMap[friend.gender]}</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[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 favorite = favorites[index];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[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="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.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}</h3><div class="friend-details"><img src="${friend.avatar}" alt="${friend.nickname}'s Avatar"><p>年龄: ${friend.age}</p><p>性别: ${genderMap[friend.gender]}</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 mappingconst genderMap = {male: '男',female: '女',other: '其他'};// 初始化列表updateFriendsList();updateFavoritesList();updateFilesList();updateMomentsList();updateVideosList();</script>
</body>
</html>3.效果展示
