Windows 11 桌面模拟

在这里插入图片描述

Windows 11 桌面模拟

文章目录

- Windows 11 桌面模拟
- - - 代码结构
    - - HTML结构
        CSS样式
        JavaScript功能
    - 源码
    - 效果图

代码结构

HTML结构

<html>: HTML文档的根元素。
<head>: 包含文档的元数据，如标题和样式。
<base>: 指定相对URL的基准。
<title>: 指定页面的标题。
<style>: 包含嵌入的CSS样式，用于美化页面。

CSS样式

body, html: 设置页面的基本样式，如边距、填充、字体和背景图片。
#taskbar: 定义任务栏的样式，包括位置、大小、背景颜色和模糊效果。
.start-button, .taskbar-icon, .desktop-icon: 定义开始按钮、任务栏图标和桌面图标的样式和交互效果。
#desktop: 设置桌面的样式，包括布局和图标的排列方式。
#clock: 设置时钟的位置和样式。
#action-center: 设置操作中心的样式，默认隐藏。
.window: 定义窗口的样式，包括位置、大小、边框和阴影。
.window-header: 定义窗口标题栏的样式，包括背景颜色和拖动效果。
.window-controls, .window-control: 定义窗口控制按钮（最小化、最大化、关闭）的样式。
.window-content: 定义窗口内容的样式，包括内边距和滚动效果。

JavaScript功能

时钟更新:
updateClock: 更新时钟的时间和日期。
setInterval(updateClock, 1000): 每秒更新一次时钟。
updateClock(): 初次加载时立即更新时钟。
点击事件:
监听桌面图标、任务栏图标和开始按钮的点击事件。
根据点击的元素显示相应的窗口。
显示或隐藏操作中心。
窗口拖动:
makeWindowDraggable: 使窗口可拖动。
通过鼠标事件监听和更新窗口位置实现拖动功能。
窗口控制按钮:
监听最小化、最大化和关闭按钮的点击事件。
实现相应的窗口操作（隐藏、全屏/还原、关闭）。
浏览器功能:
监听地址栏输入事件，模拟网页加载。
搜索功能:
监听搜索栏输入事件，模拟搜索结果显示。
文件管理器功能:
监听地址栏输入事件，模拟文件夹导航。
微软商店功能:
监听应用点击事件，模拟应用安装。

源码

<html><head><base href="os://windows-11"><title>Windows 11 Desktop Simulation</title>
<style>
body, html {margin: 0;padding: 0;height: 100%;font-family: 'Segoe UI', sans-serif;overflow: hidden;background: url('https://4kwallpapers.com/images/wallpapers/windows-11-dark-mode-stock-official-3840x2400-5630.jpg') no-repeat center center fixed;background-size: cover;
}#taskbar {position: fixed;bottom: 0;left: 0;right: 0;height: 48px;background-color: rgba(36, 36, 36, 0.75);display: flex;align-items: center;justify-content: center;backdrop-filter: blur(15px);
}.start-button {width: 48px;height: 48px;background-color: transparent;border: none;cursor: pointer;display: flex;align-items: center;justify-content: center;margin-right: 4px;transition: background-color 0.3s;
}.start-button:hover {background-color: rgba(255, 255, 255, 0.1);
}.start-icon {width: 24px;height: 24px;
}.taskbar-icon {width: 24px;height: 24px;margin: 0 4px;padding: 12px 8px;cursor: pointer;transition: background-color 0.3s;
}.taskbar-icon:hover {background-color: rgba(255, 255, 255, 0.1);
}#desktop {height: calc(100% - 48px);padding: 20px;display: grid;grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));grid-gap: 20px;align-content: start;
}.desktop-icon {display: flex;flex-direction: column;align-items: center;text-align: center;color: white;text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);cursor: pointer;padding: 10px;border-radius: 5px;transition: background-color 0.3s;
}.desktop-icon:hover {background-color: rgba(255, 255, 255, 0.1);
}.desktop-icon img {width: 48px;height: 48px;margin-bottom: 8px;
}#clock {position: fixed;bottom: 8px;right: 16px;color: #ffffff;font-size: 12px;text-align: center;
}#action-center {position: fixed;bottom: 48px;right: 10px;background-color: rgba(36, 36, 36, 0.75);backdrop-filter: blur(15px);border-radius: 8px;padding: 16px;display: none;color: white;
}.action-center-icon {width: 20px;height: 20px;margin-right: 8px;
}.window {position: absolute;background-color: rgba(36, 36, 36, 0.9);border: 1px solid #444;border-radius: 8px;box-shadow: 0 0 10px rgba(0,0,0,0.5);display: none;overflow: hidden;
}.window-header {background-color: #1a1a1a;color: white;padding: 8px;display: flex;justify-content: space-between;align-items: center;cursor: move;
}.window-title {margin: 0;font-size: 14px;
}.window-controls {display: flex;
}.window-control {width: 12px;height: 12px;border-radius: 50%;margin-left: 8px;cursor: pointer;
}.window-minimize { background-color: #FFB900; }
.window-maximize { background-color: #00CA4E; }
.window-close { background-color: #FF605C; }.window-content {padding: 16px;color: white;overflow: auto;height: calc(100% - 40px);
}.folder {display: flex;align-items: center;margin-bottom: 10px;cursor: pointer;
}.folder img {width: 24px;height: 24px;margin-right: 10px;
}.address-bar {background-color: #2a2a2a;padding: 5px;margin-bottom: 10px;
}.address-bar input {width: 100%;background-color: #3a3a3a;border: none;color: white;padding: 5px;
}.search-bar {background-color: #2a2a2a;padding: 10px;margin-bottom: 10px;
}.search-bar input {width: 100%;background-color: #3a3a3a;border: none;color: white;padding: 5px;
}.browser-controls {display: flex;margin-bottom: 10px;
}.browser-control {background-color: #3a3a3a;border: none;color: white;padding: 5px 10px;margin-right: 5px;cursor: pointer;
}.store-app {display: flex;align-items: center;margin-bottom: 10px;cursor: pointer;
}.store-app img {width: 48px;height: 48px;margin-right: 10px;
}</style>
</head>
<body>
<div id="desktop"><div class="desktop-icon" data-app="this-pc"><img src="https://win11.blueedge.me/img/icon/thispc.png" alt="This PC icon"><span>This PC</span></div><div class="desktop-icon" data-app="recycle-bin"><img src="https://win11.blueedge.me/img/icon/bin0.png" alt="Recycle Bin icon"><span>Recycle Bin</span></div><div class="desktop-icon" data-app="edge"><img src="https://win11.blueedge.me/img/icon/edge.png" alt="Microsoft Edge icon"><span>Microsoft Edge</span></div>
</div><div id="taskbar"><button class="start-button"><svg class="start-icon" viewBox="0 0 24 24"><path fill="#0078D4" d="M0 0h11.377v11.372H0zM12.623 0H24v11.372H12.623zM0 12.623h11.377V24H0zM12.623 12.623H24V24H12.623z"/></svg></button><img src="https://win11.blueedge.me/img/icon/search.png" alt="Search icon" class="taskbar-icon" data-app="search"><img src="https://win11.blueedge.me/img/icon/widget.png" alt="Widgets icon" class="taskbar-icon" data-app="widgets"><img src="https://win11.blueedge.me/img/icon/explorer.png" alt="File Explorer icon" class="taskbar-icon" data-app="explorer"><img src="https://win11.blueedge.me/img/icon/edge.png" alt="Microsoft Edge icon" class="taskbar-icon" data-app="edge"><img src="https://win11.blueedge.me/img/icon/store.png" alt="Microsoft Store icon" class="taskbar-icon" data-app="store">
</div><div id="clock"></div><div id="action-center"><div><img src="https://win11.blueedge.me/img/icon/wifi.png" alt="WiFi icon" class="action-center-icon">WiFi</div><div><img src="https://win11.blueedge.me/img/icon/bluetooth.png" alt="Bluetooth icon" class="action-center-icon">Bluetooth</div><div><img src="https://win11.blueedge.me/img/icon/airplane.png" alt="Airplane mode icon" class="action-center-icon">Airplane mode</div><div><img src="https://win11.blueedge.me/img/icon/sun.png" alt="Brightness icon" class="action-center-icon">Brightness</div>
</div><div id="this-pc-window" class="window" style="width: 600px; height: 400px;"><div class="window-header"><h3 class="window-title">This PC</h3><div class="window-controls"><div class="window-control window-minimize"></div><div class="window-control window-maximize"></div><div class="window-control window-close"></div></div></div><div class="window-content"><div class="folder"><img src="https://win11.blueedge.me/img/icon/folder.png" alt="Folder icon">Desktop</div><div class="folder"><img src="https://win11.blueedge.me/img/icon/folder.png" alt="Folder icon">Documents</div><div class="folder"><img src="https://win11.blueedge.me/img/icon/folder.png" alt="Folder icon">Downloads</div><div class="folder"><img src="https://win11.blueedge.me/img/icon/folder.png" alt="Folder icon">Music</div><div class="folder"><img src="https://win11.blueedge.me/img/icon/folder.png" alt="Folder icon">Pictures</div><div class="folder"><img src="https://win11.blueedge.me/img/icon/folder.png" alt="Folder icon">Videos</div></div>
</div><div id="recycle-bin-window" class="window" style="width: 500px; height: 350px;"><div class="window-header"><h3 class="window-title">Recycle Bin</h3><div class="window-controls"><div class="window-control window-minimize"></div><div class="window-control window-maximize"></div><div class="window-control window-close"></div></div></div><div class="window-content"><p>Recycle Bin is empty</p></div>
</div><div id="edge-window" class="window" style="width: 800px; height: 600px;"><div class="window-header"><h3 class="window-title">Microsoft Edge</h3><div class="window-controls"><div class="window-control window-minimize"></div><div class="window-control window-maximize"></div><div class="window-control window-close"></div></div></div><div class="window-content"><div class="browser-controls"><button class="browser-control">⬅️</button><button class="browser-control">➡️</button><button class="browser-control">🔄</button></div><div class="address-bar"><input type="text" placeholder="Enter a URL"></div><div id="browser-content"><h2>Welcome to Microsoft Edge</h2><p>Start browsing or enter a URL above.</p></div></div>
</div><div id="search-window" class="window" style="width: 600px; height: 400px;"><div class="window-header"><h3 class="window-title">Search</h3><div class="window-controls"><div class="window-control window-minimize"></div><div class="window-control window-maximize"></div><div class="window-control window-close"></div></div></div><div class="window-content"><div class="search-bar"><input type="text" placeholder="Type here to search"></div><div id="search-results"><p>Start typing to search your device, apps, and the web</p></div></div>
</div><div id="widgets-window" class="window" style="width: 700px; height: 500px;"><div class="window-header"><h3 class="window-title">Widgets</h3><div class="window-controls"><div class="window-control window-minimize"></div><div class="window-control window-maximize"></div><div class="window-control window-close"></div></div></div><div class="window-content"><h2>Widgets</h2><div class="widget"><h3>Weather</h3><p>Sunny, 72°F</p></div><div class="widget"><h3>News</h3><p>Latest headlines...</p></div><div class="widget"><h3>Calendar</h3><p>No upcoming events</p></div></div>
</div><div id="explorer-window" class="window" style="width: 700px; height: 500px;"><div class="window-header"><h3 class="window-title">File Explorer</h3><div class="window-controls"><div class="window-control window-minimize"></div><div class="window-control window-maximize"></div><div class="window-control window-close"></div></div></div><div class="window-content"><div class="address-bar"><input type="text" value="This PC"></div><div class="folder"><img src="https://win11.blueedge.me/img/icon/folder.png" alt="Folder icon">Desktop</div><div class="folder"><img src="https://win11.blueedge.me/img/icon/folder.png" alt="Folder icon">Documents</div><div class="folder"><img src="https://win11.blueedge.me/img/icon/folder.png" alt="Folder icon">Downloads</div><div class="folder"><img src="https://win11.blueedge.me/img/icon/folder.png" alt="Folder icon">Music</div><div class="folder"><img src="https://win11.blueedge.me/img/icon/folder.png" alt="Folder icon">Pictures</div><div class="folder"><img src="https://win11.blueedge.me/img/icon/folder.png" alt="Folder icon">Videos</div></div>
</div><div id="store-window" class="window" style="width: 800px; height: 600px;"><div class="window-header"><h3 class="window-title">Microsoft Store</h3><div class="window-controls"><div class="window-control window-minimize"></div><div class="window-control window-maximize"></div><div class="window-control window-close"></div></div></div><div class="window-content"><h2>Featured Apps</h2><div class="store-app"><img src="https://win11.blueedge.me/img/icon/store.png" alt="App icon"><div><h3>Sample App 1</h3><p>Description of Sample App 1</p></div></div><div class="store-app"><img src="https://win11.blueedge.me/img/icon/store.png" alt="App icon"><div><h3>Sample App 2</h3><p>Description of Sample App 2</p></div></div><div class="store-app"><img src="https://win11.blueedge.me/img/icon/store.png" alt="App icon"><div><h3>Sample App 3</h3><p>Description of Sample App 3</p></div></div></div>
</div><script>
function updateClock() {const now = new Date();const time = now.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});const date = now.toLocaleDateString([], {month: 'short', day: 'numeric', year: 'numeric'});document.getElementById('clock').innerHTML = `${time}<br>${date}`;
}setInterval(updateClock, 1000);
updateClock();document.querySelectorAll('.desktop-icon, .taskbar-icon, .start-button').forEach(el => {el.addEventListener('click', function() {const appName = this.dataset.app;if (appName) {const window = document.getElementById(`${appName}-window`);if (window) {window.style.display = 'block';window.style.left = '50px';window.style.top = '50px';} else {alert(`Opening ${this.querySelector('span')?.textContent || this.alt}`);}} else {alert('Opening Start Menu');}});
});document.getElementById('clock').addEventListener('click', function() {const actionCenter = document.getElementById('action-center');actionCenter.style.display = actionCenter.style.display === 'none' ? 'block' : 'none';
});// Make windows draggable
document.querySelectorAll('.window').forEach(makeWindowDraggable);function makeWindowDraggable(element) {let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;element.querySelector('.window-header').onmousedown = dragMouseDown;function dragMouseDown(e) {e = e || window.event;e.preventDefault();pos3 = e.clientX;pos4 = e.clientY;document.onmouseup = closeDragElement;document.onmousemove = elementDrag;}function elementDrag(e) {e = e || window.event;e.preventDefault();pos1 = pos3 - e.clientX;pos2 = pos4 - e.clientY;pos3 = e.clientX;pos4 = e.clientY;element.style.top = (element.offsetTop - pos2) + "px";element.style.left = (element.offsetLeft - pos1) + "px";}function closeDragElement() {document.onmouseup = null;document.onmousemove = null;}
}// Close windows
document.querySelectorAll('.window-close').forEach(closeBtn => {closeBtn.addEventListener('click', function() {this.closest('.window').style.display = 'none';});
});// Minimize windows
document.querySelectorAll('.window-minimize').forEach(minBtn => {minBtn.addEventListener('click', function() {this.closest('.window').style.display = 'none';});
});// Maximize windows
document.querySelectorAll('.window-maximize').forEach(maxBtn => {maxBtn.addEventListener('click', function() {const window = this.closest('.window');if (window.style.width === '100%') {window.style.width = '800px';window.style.height = '600px';window.style.top = '50px';window.style.left = '50px';} else {window.style.width = '100%';window.style.height = 'calc(100% - 48px)';window.style.top = '0';window.style.left = '0';}});
});// Edge browser functionality
const edgeAddressBar = document.querySelector('#edge-window .address-bar input');
const browserContent = document.getElementById('browser-content');edgeAddressBar.addEventListener('keypress', function(e) {if (e.key === 'Enter') {const url = this.value;browserContent.innerHTML = `<p>Loading ${url}...</p>`;// Simulate loading a webpagesetTimeout(() => {browserContent.innerHTML = `<h2>Welcome to ${url}</h2><p>This is a simulated webpage.</p>`;}, 1000);}
});// Search functionality
const searchBar = document.querySelector('#search-window .search-bar input');
const searchResults = document.getElementById('search-results');searchBar.addEventListener('input', function() {const query = this.value;if (query) {searchResults.innerHTML = `<p>Searching for "${query}"...</p>`;// Simulate search resultssetTimeout(() => {searchResults.innerHTML = `<h3>Results for "${query}":</h3><p>Sample result 1</p><p>Sample result 2</p><p>Sample result 3</p>`;}, 500);} else {searchResults.innerHTML = '<p>Start typing to search your device, apps, and the web</p>';}
});// File Explorer functionality
const explorerAddressBar = document.querySelector('#explorer-window .address-bar input');
const explorerContent = document.querySelector('#explorer-window .window-content');explorerAddressBar.addEventListener('keypress', function(e) {if (e.key === 'Enter') {const path = this.value;// Simulate navigating to a folderexplorerContent.innerHTML = `<div class="address-bar"><input type="text" value="${path}"></div><div class="folder"><img src="https://win11.blueedge.me/img/icon/folder.png" alt="Folder icon">New Folder 1</div><div class="folder"><img src="https://win11.blueedge.me/img/icon/folder.png" alt="Folder icon">New Folder 2</div><div class="folder"><img src="https://win11.blueedge.me/img/icon/folder.png" alt="Folder icon">New Folder 3</div>`;}
});// Microsoft Store functionality
const storeApps = document.querySelectorAll('.store-app');storeApps.forEach(app => {app.addEventListener('click', function() {const appName = this.querySelector('h3').textContent;alert(`Installing ${appName}...`);});
});</script>
</body></html>