{"id":3822,"date":"2025-09-02T23:56:55","date_gmt":"2025-09-02T15:56:55","guid":{"rendered":"https:\/\/blog.kangyue.pro\/?p=3822"},"modified":"2025-09-02T23:56:55","modified_gmt":"2025-09-02T15:56:55","slug":"html%e4%bb%bfwindows%e6%a1%8c%e9%9d%a2%e6%95%88%e6%9e%9c","status":"publish","type":"post","link":"https:\/\/blog.kangyue.pro\/?p=3822","title":{"rendered":"html\u4effWindows\u684c\u9762\u6548\u679c"},"content":{"rendered":"\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1706\" height=\"887\" src=\"https:\/\/blog.kangyue.pro\/wp-content\/uploads\/2025\/09\/image.png\" alt=\"\" class=\"wp-image-3823\" srcset=\"https:\/\/blog.kangyue.pro\/wp-content\/uploads\/2025\/09\/image.png 1706w, https:\/\/blog.kangyue.pro\/wp-content\/uploads\/2025\/09\/image-768x399.png 768w, https:\/\/blog.kangyue.pro\/wp-content\/uploads\/2025\/09\/image-1536x799.png 1536w\" sizes=\"auto, (max-width: 1706px) 100vw, 1706px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"852\" height=\"887\" src=\"https:\/\/blog.kangyue.pro\/wp-content\/uploads\/2025\/09\/image-1.png\" alt=\"\" class=\"wp-image-3824\" srcset=\"https:\/\/blog.kangyue.pro\/wp-content\/uploads\/2025\/09\/image-1.png 852w, https:\/\/blog.kangyue.pro\/wp-content\/uploads\/2025\/09\/image-1-768x800.png 768w\" sizes=\"auto, (max-width: 852px) 100vw, 852px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"852\" height=\"887\" src=\"https:\/\/blog.kangyue.pro\/wp-content\/uploads\/2025\/09\/image-2.png\" alt=\"\" class=\"wp-image-3825\" srcset=\"https:\/\/blog.kangyue.pro\/wp-content\/uploads\/2025\/09\/image-2.png 852w, https:\/\/blog.kangyue.pro\/wp-content\/uploads\/2025\/09\/image-2-768x800.png 768w\" sizes=\"auto, (max-width: 852px) 100vw, 852px\" \/><\/figure>\n\n\n\t\t<div class='wp-block-bch-code-highlight  align' id='bhcCodeHighlight-85e47ecc-b' data-attributes='{&quot;cId&quot;:&quot;85e47ecc-b&quot;,&quot;language&quot;:&quot;html&quot;,&quot;code&quot;:&quot;&lt;!DOCTYPE html&gt;\\n&lt;html lang=\\&quot;zh-CN\\&quot;&gt;\\n&lt;head&gt;\\n  &lt;meta charset=\\&quot;UTF-8\\&quot;&gt;\\n  &lt;meta name=\\&quot;viewport\\&quot; content=\\&quot;width=device-width, initial-scale=1.0\\&quot;&gt;\\n  &lt;title&gt;Windows\\u98ce\\u683c\\u684c\\u9762&lt;\\\/title&gt;\\n  &lt;script src=\\&quot;https:\\\/\\\/cdn.tailwindcss.com\\&quot;&gt;&lt;\\\/script&gt;\\n  &lt;style&gt;\\n    body, html {\\n      margin: 0;\\n      padding: 0;\\n      height: 100vh;\\n      overflow: hidden;\\n      background: linear-gradient(135deg, #1e90ff, #00b7eb);\\n      font-family: &#039;Segoe UI&#039;, Tahoma, sans-serif;\\n      transition: background 0.5s ease;\\n    }\\n    .desktop {\\n      height: calc(100% - 48px);\\n      position: relative;\\n      display: grid;\\n      grid-template-columns: repeat(auto-fill, 100px);\\n      gap: 12px;\\n      padding: 12px;\\n    }\\n    .icon {\\n      width: 100px;\\n      height: 100px;\\n      text-align: center;\\n      color: white;\\n      text-shadow: 0 2px 4px rgba(0,0,0,0.4);\\n      cursor: pointer;\\n      padding: 8px;\\n      border-radius: 8px;\\n      transition: background 0.2s, transform 0.1s;\\n    }\\n    .icon:hover {\\n      background: rgba(255,255,255,0.2);\\n      transform: scale(1.05);\\n    }\\n    .icon img {\\n      width: 48px;\\n      height: 48px;\\n      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));\\n    }\\n    .taskbar {\\n      height: 48px;\\n      background: linear-gradient(to bottom, rgba(0,0,0,0.95), rgba(0,0,0,0.85));\\n      display: flex;\\n      align-items: center;\\n      justify-content: space-between;\\n      color: white;\\n      position: fixed;\\n      bottom: 0;\\n      width: 100%;\\n      box-shadow: 0 -2px 8px rgba(0,0,0,0.3);\\n    }\\n    .start-btn {\\n      background: linear-gradient(to right, #0078d7, #005ba1);\\n      border-radius: 4px;\\n      padding: 8px 16px;\\n      margin-left: 8px;\\n      transition: background 0.2s;\\n    }\\n    .start-btn:hover {\\n      background: linear-gradient(to right, #005ba1, #003087);\\n    }\\n    .start-menu {\\n      position: absolute;\\n      bottom: 48px;\\n      left: 8px;\\n      background: rgba(255, 255, 255, 0.98);\\n      color: black;\\n      width: 220px;\\n      display: none;\\n      box-shadow: 0 4px 12px rgba(0,0,0,0.3);\\n      border-radius: 8px;\\n      padding: 12px;\\n      animation: fadeIn 0.2s ease;\\n    }\\n    .tray {\\n      display: flex;\\n      align-items: center;\\n      padding-right: 12px;\\n    }\\n    .time {\\n      background: rgba(255,255,255,0.1);\\n      padding: 4px 8px;\\n      border-radius: 4px;\\n      transition: background 0.2s;\\n    }\\n    .time:hover {\\n      background: rgba(255,255,255,0.2);\\n    }\\n    .calendar {\\n      position: absolute;\\n      bottom: 48px;\\n      right: 12px;\\n      background: rgba(255, 255, 255, 0.98);\\n      color: black;\\n      width: 280px;\\n      display: none;\\n      box-shadow: 0 4px 12px rgba(0,0,0,0.3);\\n      border-radius: 8px;\\n      padding: 12px;\\n      animation: fadeIn 0.2s ease;\\n    }\\n    .window {\\n      position: absolute;\\n      background: rgba(255, 255, 255, 0.98);\\n      border: 1px solid #ccc;\\n      box-shadow: 0 8px 24px rgba(0,0,0,0.2);\\n      display: none;\\n      resize: both;\\n      overflow: auto;\\n      min-width: 320px;\\n      min-height: 240px;\\n      border-radius: 8px;\\n      transition: transform 0.2s;\\n    }\\n    .window-header {\\n      background: linear-gradient(to right, #0078d7, #005ba1);\\n      color: white;\\n      padding: 8px;\\n      display: flex;\\n      justify-content: space-between;\\n      align-items: center;\\n      border-top-left-radius: 8px;\\n      border-top-right-radius: 8px;\\n      user-select: none;\\n    }\\n    .window-content {\\n      padding: 12px;\\n    }\\n    .context-menu {\\n      position: absolute;\\n      background: rgba(255, 255, 255, 0.98);\\n      color: black;\\n      width: 160px;\\n      display: none;\\n      box-shadow: 0 4px 12px rgba(0,0,0,0.3);\\n      border-radius: 8px;\\n      padding: 12px;\\n      animation: fadeIn 0.2s ease;\\n    }\\n    .context-menu div:hover {\\n      background: #e5f1fb;\\n      border-radius: 4px;\\n    }\\n    @keyframes fadeIn {\\n      from { opacity: 0; transform: translateY(10px); }\\n      to { opacity: 1; transform: translateY(0); }\\n    }\\n  &lt;\\\/style&gt;\\n&lt;\\\/head&gt;\\n&lt;body&gt;\\n  &lt;div class=\\&quot;desktop\\&quot; id=\\&quot;desktop\\&quot; oncontextmenu=\\&quot;showContextMenu(event)\\&quot;&gt;\\n    &lt;div class=\\&quot;icon\\&quot; onclick=\\&quot;openWindow(&#039;notepad&#039;)\\&quot;&gt;\\n      &lt;img src=\\&quot;https:\\\/\\\/img.icons8.com\\\/color\\\/48\\\/000000\\\/notepad.png\\&quot; alt=\\&quot;\\u8bb0\\u4e8b\\u672c\\&quot;&gt;\\n      &lt;div&gt;\\u8bb0\\u4e8b\\u672c&lt;\\\/div&gt;\\n    &lt;\\\/div&gt;\\n    &lt;div class=\\&quot;icon\\&quot; onclick=\\&quot;openWindow(&#039;player&#039;)\\&quot;&gt;\\n      &lt;img src=\\&quot;https:\\\/\\\/img.icons8.com\\\/color\\\/48\\\/000000\\\/video.png\\&quot; alt=\\&quot;\\u64ad\\u653e\\u5668\\&quot;&gt;\\n      &lt;div&gt;\\u5a92\\u4f53\\u64ad\\u653e\\u5668&lt;\\\/div&gt;\\n    &lt;\\\/div&gt;\\n    &lt;div class=\\&quot;icon\\&quot; onclick=\\&quot;openWindow(&#039;calculator&#039;)\\&quot;&gt;\\n      &lt;img src=\\&quot;https:\\\/\\\/img.icons8.com\\\/color\\\/48\\\/000000\\\/calculator.png\\&quot; alt=\\&quot;\\u8ba1\\u7b97\\u5668\\&quot;&gt;\\n      &lt;div&gt;\\u8ba1\\u7b97\\u5668&lt;\\\/div&gt;\\n    &lt;\\\/div&gt;\\n    &lt;div class=\\&quot;icon\\&quot; onclick=\\&quot;openWindow(&#039;browser&#039;)\\&quot;&gt;\\n      &lt;img src=\\&quot;https:\\\/\\\/img.icons8.com\\\/color\\\/48\\\/000000\\\/chrome.png\\&quot; alt=\\&quot;\\u6d4f\\u89c8\\u5668\\&quot;&gt;\\n      &lt;div&gt;\\u6d4f\\u89c8\\u5668&lt;\\\/div&gt;\\n    &lt;\\\/div&gt;\\n    &lt;div class=\\&quot;icon\\&quot; onclick=\\&quot;openWindow(&#039;folder1&#039;)\\&quot; data-type=\\&quot;folder\\&quot;&gt;\\n      &lt;img src=\\&quot;https:\\\/\\\/img.icons8.com\\\/color\\\/48\\\/000000\\\/folder-invoices.png\\&quot; alt=\\&quot;\\u6587\\u4ef6\\u5939\\&quot;&gt;\\n      &lt;div&gt;\\u6211\\u7684\\u6587\\u4ef6\\u5939&lt;\\\/div&gt;\\n    &lt;\\\/div&gt;\\n  &lt;\\\/div&gt;\\n\\n  &lt;div class=\\&quot;taskbar\\&quot;&gt;\\n    &lt;div&gt;\\n      &lt;button class=\\&quot;start-btn px-4 py-2 text-white font-semibold\\&quot; onclick=\\&quot;toggleStartMenu()\\&quot;&gt;\\u5f00\\u59cb&lt;\\\/button&gt;\\n      &lt;div class=\\&quot;start-menu\\&quot; id=\\&quot;startMenu\\&quot;&gt;\\n        &lt;div class=\\&quot;p-2 hover:bg-gray-200 cursor-pointer rounded\\&quot; onclick=\\&quot;openWindow(&#039;notepad&#039;)\\&quot;&gt;\\u8bb0\\u4e8b\\u672c&lt;\\\/div&gt;\\n        &lt;div class=\\&quot;p-2 hover:bg-gray-200 cursor-pointer rounded\\&quot; onclick=\\&quot;openWindow(&#039;player&#039;)\\&quot;&gt;\\u5a92\\u4f53\\u64ad\\u653e\\u5668&lt;\\\/div&gt;\\n        &lt;div class=\\&quot;p-2 hover:bg-gray-200 cursor-pointer rounded\\&quot; onclick=\\&quot;openWindow(&#039;calculator&#039;)\\&quot;&gt;\\u8ba1\\u7b97\\u5668&lt;\\\/div&gt;\\n        &lt;div class=\\&quot;p-2 hover:bg-gray-200 cursor-pointer rounded\\&quot; onclick=\\&quot;openWindow(&#039;browser&#039;)\\&quot;&gt;\\u6d4f\\u89c8\\u5668&lt;\\\/div&gt;\\n        &lt;div class=\\&quot;p-2 hover:bg-gray-200 cursor-pointer rounded\\&quot; onclick=\\&quot;changeWallpaper()\\&quot;&gt;\\u66f4\\u6539\\u58c1\\u7eb8&lt;\\\/div&gt;\\n      &lt;\\\/div&gt;\\n    &lt;\\\/div&gt;\\n    &lt;div class=\\&quot;tray\\&quot;&gt;\\n      &lt;div class=\\&quot;time mx-2 cursor-pointer\\&quot; onclick=\\&quot;toggleCalendar()\\&quot; id=\\&quot;timeDisplay\\&quot;&gt;&lt;\\\/div&gt;\\n      &lt;div class=\\&quot;calendar\\&quot; id=\\&quot;calendar\\&quot;&gt;\\n        &lt;div id=\\&quot;calendarContent\\&quot;&gt;&lt;\\\/div&gt;\\n      &lt;\\\/div&gt;\\n    &lt;\\\/div&gt;\\n  &lt;\\\/div&gt;\\n\\n  &lt;div class=\\&quot;context-menu\\&quot; id=\\&quot;contextMenu\\&quot;&gt;\\n    &lt;div class=\\&quot;p-2 cursor-pointer\\&quot; onclick=\\&quot;newFile()\\&quot;&gt;\\u65b0\\u5efa\\u6587\\u672c\\u6587\\u4ef6&lt;\\\/div&gt;\\n    &lt;div class=\\&quot;p-2 cursor-pointer\\&quot; onclick=\\&quot;newFolder()\\&quot;&gt;\\u65b0\\u5efa\\u6587\\u4ef6\\u5939&lt;\\\/div&gt;\\n    &lt;div class=\\&quot;p-2 cursor-pointer\\&quot; onclick=\\&quot;changeWallpaper()\\&quot;&gt;\\u66f4\\u6539\\u58c1\\u7eb8&lt;\\\/div&gt;\\n  &lt;\\\/div&gt;\\n\\n  &lt;div class=\\&quot;window\\&quot; id=\\&quot;notepadWindow\\&quot; style=\\&quot;width: 400px; height: 300px; top: 100px; left: 100px;\\&quot;&gt;\\n    &lt;div class=\\&quot;window-header\\&quot;&gt;\\n      &lt;span&gt;\\u8bb0\\u4e8b\\u672c&lt;\\\/span&gt;\\n      &lt;button class=\\&quot;close-btn px-2 hover:bg-red-600 rounded\\&quot; onclick=\\&quot;closeWindow(&#039;notepad&#039;)\\&quot;&gt;\\u00d7&lt;\\\/button&gt;\\n    &lt;\\\/div&gt;\\n    &lt;div class=\\&quot;window-content\\&quot;&gt;\\n      &lt;textarea class=\\&quot;w-full h-full border rounded p-2\\&quot; placeholder=\\&quot;\\u8f93\\u5165\\u6587\\u672c...\\&quot;&gt;&lt;\\\/textarea&gt;\\n    &lt;\\\/div&gt;\\n  &lt;\\\/div&gt;\\n\\n  &lt;div class=\\&quot;window\\&quot; id=\\&quot;playerWindow\\&quot; style=\\&quot;width: 400px; height: 300px; top: 150px; left: 150px;\\&quot;&gt;\\n    &lt;div class=\\&quot;window-header\\&quot;&gt;\\n      &lt;span&gt;\\u5a92\\u4f53\\u64ad\\u653e\\u5668&lt;\\\/span&gt;\\n      &lt;button class=\\&quot;close-btn px-2 hover:bg-red-600 rounded\\&quot; onclick=\\&quot;closeWindow(&#039;player&#039;)\\&quot;&gt;\\u00d7&lt;\\\/button&gt;\\n    &lt;\\\/div&gt;\\n    &lt;div class=\\&quot;window-content\\&quot;&gt;\\n      &lt;video controls class=\\&quot;w-full rounded\\&quot;&gt;\\n        &lt;source src=\\&quot;https:\\\/\\\/www.w3schools.com\\\/html\\\/mov_bbb.mp4\\&quot; type=\\&quot;video\\\/mp4\\&quot;&gt;\\n        \\u60a8\\u7684\\u6d4f\\u89c8\\u5668\\u4e0d\\u652f\\u6301\\u89c6\\u9891\\u64ad\\u653e\\u3002\\n      &lt;\\\/video&gt;\\n    &lt;\\\/div&gt;\\n  &lt;\\\/div&gt;\\n\\n  &lt;div class=\\&quot;window\\&quot; id=\\&quot;calculatorWindow\\&quot; style=\\&quot;width: 320px; height: 400px; top: 200px; left: 200px;\\&quot;&gt;\\n    &lt;div class=\\&quot;window-header\\&quot;&gt;\\n      &lt;span&gt;\\u8ba1\\u7b97\\u5668&lt;\\\/span&gt;\\n      &lt;button class=\\&quot;close-btn px-2 hover:bg-red-600 rounded\\&quot; onclick=\\&quot;closeWindow(&#039;calculator&#039;)\\&quot;&gt;\\u00d7&lt;\\\/button&gt;\\n    &lt;\\\/div&gt;\\n    &lt;div class=\\&quot;window-content\\&quot;&gt;\\n      &lt;input type=\\&quot;text\\&quot; id=\\&quot;calcDisplay\\&quot; class=\\&quot;w-full border p-2 mb-4 rounded bg-gray-100\\&quot; readonly&gt;\\n      &lt;div class=\\&quot;grid grid-cols-4 gap-2\\&quot;&gt;\\n        &lt;button class=\\&quot;bg-gray-200 p-2 rounded hover:bg-gray-300\\&quot; onclick=\\&quot;calc(&#039;7&#039;)\\&quot;&gt;7&lt;\\\/button&gt;\\n        &lt;button class=\\&quot;bg-gray-200 p-2 rounded hover:bg-gray-300\\&quot; onclick=\\&quot;calc(&#039;8&#039;)\\&quot;&gt;8&lt;\\\/button&gt;\\n        &lt;button class=\\&quot;bg-gray-200 p-2 rounded hover:bg-gray-300\\&quot; onclick=\\&quot;calc(&#039;9&#039;)\\&quot;&gt;9&lt;\\\/button&gt;\\n        &lt;button class=\\&quot;bg-blue-200 p-2 rounded hover:bg-blue-300\\&quot; onclick=\\&quot;calc(&#039;\\\/&#039;)\\&quot;&gt;\\\/&lt;\\\/button&gt;\\n        &lt;button class=\\&quot;bg-gray-200 p-2 rounded hover:bg-gray-300\\&quot; onclick=\\&quot;calc(&#039;4&#039;)\\&quot;&gt;4&lt;\\\/button&gt;\\n        &lt;button class=\\&quot;bg-gray-200 p-2 rounded hover:bg-gray-300\\&quot; onclick=\\&quot;calc(&#039;5&#039;)\\&quot;&gt;5&lt;\\\/button&gt;\\n        &lt;button class=\\&quot;bg-gray-200 p-2 rounded hover:bg-gray-300\\&quot; onclick=\\&quot;calc(&#039;6&#039;)\\&quot;&gt;6&lt;\\\/button&gt;\\n        &lt;button class=\\&quot;bg-blue-200 p-2 rounded hover:bg-blue-300\\&quot; onclick=\\&quot;calc(&#039;*&#039;)\\&quot;&gt;\\u00d7&lt;\\\/button&gt;\\n        &lt;button class=\\&quot;bg-gray-200 p-2 rounded hover:bg-gray-300\\&quot; onclick=\\&quot;calc(&#039;1&#039;)\\&quot;&gt;1&lt;\\\/button&gt;\\n        &lt;button class=\\&quot;bg-gray-200 p-2 rounded hover:bg-gray-300\\&quot; onclick=\\&quot;calc(&#039;2&#039;)\\&quot;&gt;2&lt;\\\/button&gt;\\n        &lt;button class=\\&quot;bg-gray-200 p-2 rounded hover:bg-gray-300\\&quot; onclick=\\&quot;calc(&#039;3&#039;)\\&quot;&gt;3&lt;\\\/button&gt;\\n        &lt;button class=\\&quot;bg-blue-200 p-2 rounded hover:bg-blue-300\\&quot; onclick=\\&quot;calc(&#039;-&#039;)\\&quot;&gt;-&lt;\\\/button&gt;\\n        &lt;button class=\\&quot;bg-gray-200 p-2 rounded hover:bg-gray-300\\&quot; onclick=\\&quot;calc(&#039;0&#039;)\\&quot;&gt;0&lt;\\\/button&gt;\\n        &lt;button class=\\&quot;bg-gray-200 p-2 rounded hover:bg-gray-300\\&quot; onclick=\\&quot;calc(&#039;.&#039;)\\&quot;&gt;.&lt;\\\/button&gt;\\n        &lt;button class=\\&quot;bg-blue-500 text-white p-2 rounded hover:bg-blue-600\\&quot; onclick=\\&quot;calc(&#039;=&#039;)\\&quot;&gt;=&lt;\\\/button&gt;\\n        &lt;button class=\\&quot;bg-blue-200 p-2 rounded hover:bg-blue-300\\&quot; onclick=\\&quot;calc(&#039;+&#039;)\\&quot;&gt;+&lt;\\\/button&gt;\\n        &lt;button class=\\&quot;bg-red-200 p-2 rounded hover:bg-red-300\\&quot; onclick=\\&quot;calc(&#039;C&#039;)\\&quot;&gt;C&lt;\\\/button&gt;\\n      &lt;\\\/div&gt;\\n    &lt;\\\/div&gt;\\n  &lt;\\\/div&gt;\\n\\n  &lt;div class=\\&quot;window\\&quot; id=\\&quot;browserWindow\\&quot; style=\\&quot;width: 600px; height: 400px; top: 120px; left: 120px;\\&quot;&gt;\\n    &lt;div class=\\&quot;window-header\\&quot;&gt;\\n      &lt;span&gt;\\u6d4f\\u89c8\\u5668&lt;\\\/span&gt;\\n      &lt;button class=\\&quot;close-btn px-2 hover:bg-red-600 rounded\\&quot; onclick=\\&quot;closeWindow(&#039;browser&#039;)\\&quot;&gt;\\u00d7&lt;\\\/button&gt;\\n    &lt;\\\/div&gt;\\n    &lt;div class=\\&quot;window-content\\&quot;&gt;\\n      &lt;div class=\\&quot;flex mb-2\\&quot;&gt;\\n        &lt;input type=\\&quot;text\\&quot; id=\\&quot;browserUrl\\&quot; class=\\&quot;w-full border p-2 rounded-l\\&quot; placeholder=\\&quot;\\u8f93\\u5165URL\\uff08\\u4f8b\\u5982 https:\\\/\\\/www.example.com\\uff09\\&quot;&gt;\\n        &lt;button class=\\&quot;bg-blue-500 text-white p-2 rounded-r hover:bg-blue-600\\&quot; onclick=\\&quot;loadUrl()\\&quot;&gt;\\u8bbf\\u95ee&lt;\\\/button&gt;\\n      &lt;\\\/div&gt;\\n      &lt;iframe id=\\&quot;browserFrame\\&quot; class=\\&quot;w-full h-[calc(100%-40px)] border rounded\\&quot; src=\\&quot;https:\\\/\\\/www.example.com\\&quot;&gt;&lt;\\\/iframe&gt;\\n    &lt;\\\/div&gt;\\n  &lt;\\\/div&gt;\\n\\n  &lt;div class=\\&quot;window\\&quot; id=\\&quot;folder1Window\\&quot; style=\\&quot;width: 400px; height: 300px; top: 120px; left: 120px;\\&quot;&gt;\\n    &lt;div class=\\&quot;window-header\\&quot;&gt;\\n      &lt;span&gt;\\u6211\\u7684\\u6587\\u4ef6\\u5939&lt;\\\/span&gt;\\n      &lt;button class=\\&quot;close-btn px-2 hover:bg-red-600 rounded\\&quot; onclick=\\&quot;closeWindow(&#039;folder1&#039;)\\&quot;&gt;\\u00d7&lt;\\\/button&gt;\\n    &lt;\\\/div&gt;\\n    &lt;div class=\\&quot;window-content\\&quot;&gt;\\n      &lt;div&gt;\\u6587\\u4ef6\\u5939\\u5185\\u5bb9\\uff08\\u7a7a\\uff09&lt;\\\/div&gt;\\n    &lt;\\\/div&gt;\\n  &lt;\\\/div&gt;\\n\\n  &lt;script&gt;\\n    let fileCounter = 1;\\n    let folderCounter = 2;\\n\\n    function toggleStartMenu() {\\n      const menu = document.getElementById(&#039;startMenu&#039;);\\n      menu.style.display = menu.style.display === &#039;block&#039; ? &#039;none&#039; : &#039;block&#039;;\\n      document.getElementById(&#039;contextMenu&#039;).style.display = &#039;none&#039;;\\n    }\\n\\n    function toggleCalendar() {\\n      const calendar = document.getElementById(&#039;calendar&#039;);\\n      calendar.style.display = calendar.style.display === &#039;block&#039; ? &#039;none&#039; : &#039;block&#039;;\\n      if (calendar.style.display === &#039;block&#039;) {\\n        updateCalendar();\\n      }\\n      document.getElementById(&#039;contextMenu&#039;).style.display = &#039;none&#039;;\\n    }\\n\\n    function showContextMenu(event) {\\n      event.preventDefault();\\n      const menu = document.getElementById(&#039;contextMenu&#039;);\\n      menu.style.display = &#039;block&#039;;\\n      menu.style.left = `${event.clientX}px`;\\n      menu.style.top = `${event.clientY}px`;\\n      document.getElementById(&#039;startMenu&#039;).style.display = &#039;none&#039;;\\n      document.getElementById(&#039;calendar&#039;).style.display = &#039;none&#039;;\\n    }\\n\\n    function openWindow(id) {\\n      document.getElementById(`${id}Window`).style.display = &#039;block&#039;;\\n      document.getElementById(&#039;contextMenu&#039;).style.display = &#039;none&#039;;\\n      document.getElementById(&#039;startMenu&#039;).style.display = &#039;none&#039;;\\n    }\\n\\n    function closeWindow(id) {\\n      document.getElementById(`${id}Window`).style.display = &#039;none&#039;;\\n    }\\n\\n    function changeWallpaper() {\\n      const color = prompt(&#039;\\u8bf7\\u8f93\\u5165\\u58c1\\u7eb8\\u989c\\u8272\\uff08\\u4f8b\\u5982\\uff1a#ff0000 \\u6216 red\\uff0c\\u6e10\\u53d8\\u4e3a color1,color2\\uff09&#039;);\\n      if (color) {\\n        if (color.includes(&#039;,&#039;)) {\\n          const [color1, color2] = color.split(&#039;,&#039;).map(c =&gt; c.trim());\\n          document.body.style.background = `linear-gradient(135deg, ${color1}, ${color2})`;\\n        } else {\\n          document.body.style.background = color;\\n        }\\n      }\\n      document.getElementById(&#039;contextMenu&#039;).style.display = &#039;none&#039;;\\n    }\\n\\n    function newFile() {\\n      const desktop = document.getElementById(&#039;desktop&#039;);\\n      const fileId = `file${fileCounter}`;\\n      const icon = document.createElement(&#039;div&#039;);\\n      icon.className = &#039;icon&#039;;\\n      icon.setAttribute(&#039;onclick&#039;, `openWindow(&#039;${fileId}&#039;)`);\\n      icon.innerHTML = `\\n        &lt;img src=\\&quot;https:\\\/\\\/img.icons8.com\\\/color\\\/48\\\/000000\\\/txt.png\\&quot; alt=\\&quot;\\u6587\\u672c\\u6587\\u4ef6\\&quot;&gt;\\n        &lt;div&gt;\\u65b0\\u5efa\\u6587\\u672c\\u6587\\u4ef6${fileCounter}.txt&lt;\\\/div&gt;\\n      `;\\n      desktop.appendChild(icon);\\n\\n      const window = document.createElement(&#039;div&#039;);\\n      window.className = &#039;window&#039;;\\n      window.id = `${fileId}Window`;\\n      window.style.cssText = &#039;width: 400px; height: 300px; top: 100px; left: 100px; display: none;&#039;;\\n      window.innerHTML = `\\n        &lt;div class=\\&quot;window-header\\&quot;&gt;\\n          &lt;span&gt;\\u65b0\\u5efa\\u6587\\u672c\\u6587\\u4ef6${fileCounter}.txt&lt;\\\/span&gt;\\n          &lt;button class=\\&quot;close-btn px-2 hover:bg-red-600 rounded\\&quot; onclick=\\&quot;closeWindow(&#039;${fileId}&#039;)\\&quot;&gt;\\u00d7&lt;\\\/button&gt;\\n        &lt;\\\/div&gt;\\n        &lt;div class=\\&quot;window-content\\&quot;&gt;\\n          &lt;textarea class=\\&quot;w-full h-full border rounded p-2\\&quot; placeholder=\\&quot;\\u8f93\\u5165\\u6587\\u672c...\\&quot;&gt;&lt;\\\/textarea&gt;\\n        &lt;\\\/div&gt;\\n      `;\\n      document.body.appendChild(window);\\n      fileCounter++;\\n      document.getElementById(&#039;contextMenu&#039;).style.display = &#039;none&#039;;\\n    }\\n\\n    function newFolder() {\\n      const desktop = document.getElementById(&#039;desktop&#039;);\\n      const folderId = `folder${folderCounter}`;\\n      const icon = document.createElement(&#039;div&#039;);\\n      icon.className = &#039;icon&#039;;\\n      icon.setAttribute(&#039;onclick&#039;, `openWindow(&#039;${folderId}&#039;)`);\\n      icon.setAttribute(&#039;data-type&#039;, &#039;folder&#039;);\\n      icon.innerHTML = `\\n        &lt;img src=\\&quot;https:\\\/\\\/img.icons8.com\\\/color\\\/48\\\/000000\\\/folder-invoices.png\\&quot; alt=\\&quot;\\u6587\\u4ef6\\u5939\\&quot;&gt;\\n        &lt;div&gt;\\u65b0\\u5efa\\u6587\\u4ef6\\u5939${folderCounter}&lt;\\\/div&gt;\\n      `;\\n      desktop.appendChild(icon);\\n\\n      const window = document.createElement(&#039;div&#039;);\\n      window.className = &#039;window&#039;;\\n      window.id = `${folderId}Window`;\\n      window.style.cssText = &#039;width: 400px; height: 300px; top: 120px; left: 120px; display: none;&#039;;\\n      window.innerHTML = `\\n        &lt;div class=\\&quot;window-header\\&quot;&gt;\\n          &lt;span&gt;\\u65b0\\u5efa\\u6587\\u4ef6\\u5939${folderCounter}&lt;\\\/span&gt;\\n          &lt;button class=\\&quot;close-btn px-2 hover:bg-red-600 rounded\\&quot; onclick=\\&quot;closeWindow(&#039;${folderId}&#039;)\\&quot;&gt;\\u00d7&lt;\\\/button&gt;\\n        &lt;\\\/div&gt;\\n        &lt;div class=\\&quot;window-content\\&quot;&gt;\\n          &lt;div&gt;\\u6587\\u4ef6\\u5939\\u5185\\u5bb9\\uff08\\u7a7a\\uff09&lt;\\\/div&gt;\\n        &lt;\\\/div&gt;\\n      `;\\n      document.body.appendChild(window);\\n      folderCounter++;\\n      document.getElementById(&#039;contextMenu&#039;).style.display = &#039;none&#039;;\\n    }\\n\\n    function loadUrl() {\\n      const url = document.getElementById(&#039;browserUrl&#039;).value;\\n      const frame = document.getElementById(&#039;browserFrame&#039;);\\n      if (url &amp;&amp; (url.startsWith(&#039;http:\\\/\\\/&#039;) || url.startsWith(&#039;https:\\\/\\\/&#039;))) {\\n        frame.src = url;\\n      } else {\\n        alert(&#039;\\u8bf7\\u8f93\\u5165\\u6709\\u6548\\u7684URL\\uff08\\u4ee5http:\\\/\\\/\\u6216https:\\\/\\\/\\u5f00\\u5934\\uff09&#039;);\\n      }\\n    }\\n\\n    function updateTime() {\\n      const now = new Date();\\n      document.getElementById(&#039;timeDisplay&#039;).textContent = now.toLocaleString(&#039;zh-CN&#039;, {\\n        hour: &#039;2-digit&#039;,\\n        minute: &#039;2-digit&#039;,\\n        second: &#039;2-digit&#039;\\n      });\\n    }\\n\\n    function updateCalendar() {\\n      const now = new Date();\\n      const year = now.getFullYear();\\n      const month = now.getMonth();\\n      const firstDay = new Date(year, month, 1).getDay();\\n      const daysInMonth = new Date(year, month + 1, 0).getDate();\\n      let html = `&lt;div class=\\&quot;text-center font-semibold mb-2\\&quot;&gt;${year}\\u5e74${month + 1}\\u6708&lt;\\\/div&gt;`;\\n      html += &#039;&lt;div class=\\&quot;grid grid-cols-7 gap-1 text-center text-sm\\&quot;&gt;&#039;;\\n      const days = [&#039;\\u65e5&#039;, &#039;\\u4e00&#039;, &#039;\\u4e8c&#039;, &#039;\\u4e09&#039;, &#039;\\u56db&#039;, &#039;\\u4e94&#039;, &#039;\\u516d&#039;];\\n      days.forEach(day =&gt; html += `&lt;div class=\\&quot;font-semibold\\&quot;&gt;${day}&lt;\\\/div&gt;`);\\n      for (let i = 0; i &lt; firstDay; i++) {\\n        html += &#039;&lt;div&gt;&lt;\\\/div&gt;&#039;;\\n      }\\n      for (let i = 1; i &lt;= daysInMonth; i++) {\\n        html += `&lt;div class=\\&quot;p-1 rounded hover:bg-blue-100\\&quot;&gt;${i}&lt;\\\/div&gt;`;\\n      }\\n      html += &#039;&lt;\\\/div&gt;&#039;;\\n      document.getElementById(&#039;calendarContent&#039;).innerHTML = html;\\n    }\\n\\n    function calc(value) {\\n      const display = document.getElementById(&#039;calcDisplay&#039;);\\n      if (value === &#039;=&#039;) {\\n        try {\\n          display.value = eval(display.value);\\n        } catch {\\n          display.value = &#039;\\u9519\\u8bef&#039;;\\n        }\\n      } else if (value === &#039;C&#039;) {\\n        display.value = &#039;&#039;;\\n      } else {\\n        display.value += value;\\n      }\\n    }\\n\\n    setInterval(updateTime, 1000);\\n    updateTime();\\n  &lt;\\\/script&gt;\\n&lt;\\\/body&gt;\\n&lt;\\\/html&gt;&quot;,&quot;codeTypo&quot;:{&quot;desktop&quot;:10,&quot;tablet&quot;:15,&quot;mobile&quot;:14},&quot;height&quot;:{&quot;desktop&quot;:&quot;500px&quot;,&quot;tablet&quot;:&quot;0px&quot;,&quot;mobile&quot;:&quot;0px&quot;},&quot;align&quot;:&quot;&quot;,&quot;lineNumbers&quot;:true,&quot;theme&quot;:&quot;default&quot;,&quot;clipBoard&quot;:true,&quot;wordWrap&quot;:true,&quot;width&quot;:{&quot;desktop&quot;:&quot;100%&quot;,&quot;tablet&quot;:&quot;100%&quot;,&quot;mobile&quot;:&quot;100%&quot;},&quot;padding&quot;:{&quot;top&quot;:&quot;0px&quot;,&quot;right&quot;:&quot;0px&quot;,&quot;bottom&quot;:&quot;0px&quot;,&quot;left&quot;:&quot;0px&quot;},&quot;background&quot;:{&quot;color&quot;:&quot;#d3cfcf42&quot;},&quot;layout&quot;:{&quot;align&quot;:&quot;left&quot;},&quot;border&quot;:{&quot;color&quot;:&quot;#000&quot;,&quot;style&quot;:&quot;solid&quot;,&quot;width&quot;:&quot;0px&quot;},&quot;shadow&quot;:[],&quot;alignment&quot;:&quot;center&quot;,&quot;clipBoardColors&quot;:{&quot;color&quot;:&quot;#fff&quot;,&quot;bg&quot;:&quot;#00000024&quot;}}'><\/div>\r\n\r\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-3822","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/blog.kangyue.pro\/index.php?rest_route=\/wp\/v2\/posts\/3822","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.kangyue.pro\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.kangyue.pro\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.kangyue.pro\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.kangyue.pro\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3822"}],"version-history":[{"count":2,"href":"https:\/\/blog.kangyue.pro\/index.php?rest_route=\/wp\/v2\/posts\/3822\/revisions"}],"predecessor-version":[{"id":3827,"href":"https:\/\/blog.kangyue.pro\/index.php?rest_route=\/wp\/v2\/posts\/3822\/revisions\/3827"}],"wp:attachment":[{"href":"https:\/\/blog.kangyue.pro\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3822"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.kangyue.pro\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3822"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.kangyue.pro\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3822"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}