js实现win桌面

使用JavaScript实现Windows桌面效果

通过HTML、CSS和JavaScript可以模拟Windows桌面的基本功能，包括图标、窗口管理和任务栏。以下是一个简单的实现方案：

桌面图标系统

创建可拖动的桌面图标，使用HTML和CSS定义图标样式：

<div class="desktop-icon" draggable="true" data-app="notepad">
  <img src="icon.png" alt="Notepad">
  <span>Notepad</span>
</div>

.desktop-icon {
  position: absolute;
  width: 80px;
  text-align: center;
  cursor: pointer;
  user-select: none;
}

.desktop-icon img {
  width: 48px;
  height: 48px;
  display: block;
  margin: 0 auto;
}

窗口管理系统

实现可拖动、可调整大小的窗口：

class Window {
  constructor(title, content) {
    this.element = document.createElement('div');
    this.element.className = 'window';
    this.element.innerHTML = `
      <div class="title-bar">
        <span class="title">${title}</span>
        <button class="close-btn">×</button>
      </div>
      <div class="content">${content}</div>
    `;
    document.body.appendChild(this.element);
    this.setupDrag();
  }

  setupDrag() {
    const titleBar = this.element.querySelector('.title-bar');
    let offsetX, offsetY;

    titleBar.addEventListener('mousedown', (e) => {
      if (e.target.classList.contains('close-btn')) return;

      offsetX = e.clientX - this.element.getBoundingClientRect().left;
      offsetY = e.clientY - this.element.getBoundingClientRect().top;

      function move(e) {
        this.element.style.left = `${e.clientX - offsetX}px`;
        this.element.style.top = `${e.clientY - offsetY}px`;
      }

      function stop() {
        document.removeEventListener('mousemove', move);
        document.removeEventListener('mouseup', stop);
      }

      document.addEventListener('mousemove', move.bind(this));
      document.addEventListener('mouseup', stop);
    });
  }
}

任务栏实现

创建底部任务栏并管理打开的窗口：

<div class="taskbar">
  <div class="start-button">Start</div>
  <div class="taskbar-items"></div>
  <div class="clock">12:00 PM</div>
</div>

class Taskbar {
  constructor() {
    this.openWindows = [];

    document.querySelectorAll('.desktop-icon').forEach(icon => {
      icon.addEventListener('dblclick', () => {
        const appName = icon.dataset.app;
        this.openWindow(appName);
      });
    });
  }

  openWindow(appName) {
    const window = new Window(appName, `This is ${appName} content`);
    this.openWindows.push(window);
    this.updateTaskbar();
  }

  updateTaskbar() {
    const taskbarItems = document.querySelector('.taskbar-items');
    taskbarItems.innerHTML = '';

    this.openWindows.forEach(window => {
      const item = document.createElement('div');
      item.className = 'taskbar-item';
      item.textContent = window.title;
      taskbarItems.appendChild(item);
    });
  }
}

完整桌面样式

添加基础CSS样式完成桌面外观：

body {
  margin: 0;
  height: 100vh;
  background: #008080 url('wallpaper.jpg') no-repeat center center;
  background-size: cover;
  overflow: hidden;
  font-family: 'Segoe UI', sans-serif;
}

.window {
  position: absolute;
  width: 400px;
  height: 300px;
  background: white;
  border: 1px solid #000;
  box-shadow: 3px 3px 10px rgba(0,0,0,0.2);
}

.title-bar {
  background: linear-gradient(to right, #000080, #1084d0);
  color: white;
  padding: 5px;
  cursor: move;
  display: flex;
  justify-content: space-between;
}

.taskbar {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 40px;
  background: linear-gradient(to bottom, #245edb, #1e56c7);
  display: flex;
  align-items: center;
  color: white;
}

初始化桌面

在页面加载时初始化桌面环境：

document.addEventListener('DOMContentLoaded', () => {
  new Taskbar();

  // 更新时钟
  function updateClock() {
    const now = new Date();
    document.querySelector('.clock').textContent = 
      now.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
  }
  setInterval(updateClock, 1000);
  updateClock();
});

这个实现包含了Windows桌面的基本元素：可双击打开的桌面图标、可拖动和关闭的窗口、底部任务栏以及系统时钟。可以根据需要扩展更多功能如窗口最小化/最大化、右键菜单等。