当前位置：首页 > JavaScript

js 实现web终端

2026-04-04 15:32:32JavaScript

实现Web终端的基本思路

在JavaScript中实现一个Web终端需要模拟命令行交互界面，包括输入、输出、命令解析和执行等功能。以下是关键实现步骤：

核心HTML结构

<div id="terminal">
  <div id="output"></div>
  <div class="input-line">
    <span class="prompt">$</span>
    <input type="text" class="command-input" autofocus>
  </div>
</div>

CSS样式设计

#terminal {
  background-color: #1e1e1e;
  color: #f0f0f0;
  font-family: monospace;
  padding: 10px;
  height: 400px;
  overflow-y: auto;
}

.command-input {
  background: transparent;
  border: none;
  color: inherit;
  font-family: inherit;
  width: 80%;
  outline: none;
}

.prompt {
  margin-right: 5px;
}

JavaScript实现逻辑

class WebTerminal {
  constructor(outputElement, inputElement) {
    this.output = outputElement;
    this.input = inputElement;
    this.history = [];
    this.historyIndex = 0;

    this.setupEventListeners();
    this.printWelcomeMessage();
  }

  setupEventListeners() {
    this.input.addEventListener('keydown', (e) => {
      if (e.key === 'Enter') {
        this.processCommand();
      } else if (e.key === 'ArrowUp') {
        this.navigateHistory(-1);
      } else if (e.key === 'ArrowDown') {
        this.navigateHistory(1);
      }
    });
  }

  processCommand() {
    const command = this.input.value.trim();
    if (command) {
      this.history.push(command);
      this.historyIndex = this.history.length;
      this.printLine(`$ ${command}`);
      this.executeCommand(command);
      this.input.value = '';
    }
  }

  executeCommand(command) {
    // 基础命令实现
    switch(command.toLowerCase()) {
      case 'help':
        this.printLine('Available commands: help, clear, echo, date');
        break;
      case 'clear':
        this.clearTerminal();
        break;
      case 'date':
        this.printLine(new Date().toString());
        break;
      default:
        if (command.startsWith('echo ')) {
          this.printLine(command.substring(5));
        } else {
          this.printLine(`Command not found: ${command}`);
        }
    }
  }

  printLine(text) {
    const line = document.createElement('div');
    line.textContent = text;
    this.output.appendChild(line);
    this.output.scrollTop = this.output.scrollHeight;
  }

  clearTerminal() {
    this.output.innerHTML = '';
  }

  navigateHistory(direction) {
    if (this.history.length === 0) return;

    this.historyIndex = Math.min(
      Math.max(this.historyIndex + direction, 0),
      this.history.length
    );

    if (this.historyIndex < this.history.length) {
      this.input.value = this.history[this.historyIndex];
    } else {
      this.input.value = '';
    }
  }

  printWelcomeMessage() {
    this.printLine('Welcome to Web Terminal');
    this.printLine('Type "help" for available commands');
  }
}

// 初始化终端
const terminal = new WebTerminal(
  document.getElementById('output'),
  document.querySelector('.command-input')
);