<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Windows Terminal 网页版</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #1e1e1e;
font-family: 'Consolas', 'Courier New', monospace;
color: #ffffff;
height: 100vh;
display: flex;
flex-direction: column;
}
.terminal-header {
background-color: #2d2d2d;
padding: 8px 12px;
display: flex;
justify-content: space-between;
align-items: center;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
.tab-container {
display: flex;
gap: 8px;
}
.tab {
background-color: #1e1e1e;
padding: 6px 12px;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
}
.tab.active {
background-color: #0078d4;
}
.window-controls {
display: flex;
gap: 12px;
}
.window-control {
width: 12px;
height: 12px;
border-radius: 50%;
cursor: pointer;
}
.minimize {
background-color: #ffb900;
}
.maximize {
background-color: #00bcf2;
}
.close {
background-color: #e81123;
}
.terminal-body {
flex: 1;
padding: 12px;
overflow-y: auto;
background-color: #0c0c0c;
}
.command-line {
display: flex;
align-items: center;
margin-bottom: 8px;
}
.prompt {
color: #4ec9b0;
margin-right: 8px;
}
.input-line {
flex: 1;
background-color: transparent;
border: none;
color: #ffffff;
font-family: 'Consolas', 'Courier New', monospace;
font-size: 14px;
outline: none;
}
.output {
margin-bottom: 8px;
white-space: pre-wrap;
}
.command {
color: #9cdcfe;
}
.error {
color: #f48771;
}
.success {
color: #4ec9b0;
}
.info {
color: #dcdcaa;
}
.footer {
text-align: center;
padding: 8px;
font-size: 12px;
color: #666666;
}
/* 响应式设计 */
@media (max-width: 600px) {
.terminal-header {
padding: 6px 8px;
}
.tab {
padding: 4px 8px;
font-size: 10px;
}
.terminal-body {
padding: 8px;
}
}
</style>
</head>
<body>
<div class="terminal-header">
<div class="tab-container">
<div class="tab active">PowerShell</div>
<div class="tab">CMD</div>
<div class="tab">Ubuntu</div>
<div class="tab">+</div>
</div>
<div class="window-controls">
<div class="window-control minimize"></div>
<div class="window-control maximize"></div>
<div class="window-control close"></div>
</div>
</div>
<div class="terminal-body" id="terminalOutput">
<div class="output">
<span class="success">Windows PowerShell</span><br>
<span class="info">版权所有 (C) Microsoft Corporation。保留所有权利。</span><br><br>
<span class="info">尝试新的跨平台 PowerShell https://aka.ms/pscore6</span><br><br>
</div>
<div class="command-line">
<span class="prompt">PS C:\Users\User></span>
<input type="text" class="input-line" id="commandInput" autofocus>
</div>
</div>
<div class="footer">
</div>
<script>
const commandInput = document.getElementById('commandInput');
const terminalOutput = document.getElementById('terminalOutput');
// 命令历史记录
let commandHistory = [];
let historyIndex = -1;
// 可用命令
const commands = {
'help': '显示可用命令列表',
'clear': '清除终端输出',
'echo': '显示消息，例如: echo Hello World',
'date': '显示当前日期和时间',
'ls': '列出当前目录内容 (模拟)',
'cd': '更改目录 (模拟)',
'whoami': '显示当前用户',
'exit': '关闭终端 (在网页中刷新页面)',
'about': '关于这个终端模拟器'
};
// 初始化终端
function initTerminal() {
commandInput.addEventListener('keydown', handleKeyDown);
printWelcomeMessage();
}
// 处理按键事件
function handleKeyDown(e) {
if (e.key === 'Enter') {
executeCommand(commandInput.value);
commandInput.value = '';
} else if (e.key === 'ArrowUp') {
// 上箭头 - 历史记录上一个命令
if (commandHistory.length > 0 && historyIndex < commandHistory.length - 1) {
historyIndex++;
commandInput.value = commandHistory[commandHistory.length - 1 - historyIndex];
}
e.preventDefault();
} else if (e.key === 'ArrowDown') {
// 下箭头 - 历史记录下一个命令
if (historyIndex > 0) {
historyIndex--;
commandInput.value = commandHistory[commandHistory.length - 1 - historyIndex];
} else {
historyIndex = -1;
commandInput.value = '';
}
e.preventDefault();
}
}
// 执行命令
function executeCommand(cmd) {
if (cmd.trim() === '') return;
// 添加到历史记录
commandHistory.push(cmd);
historyIndex = -1;
// 显示命令
const commandLine = document.createElement('div');
commandLine.className = 'command-line';
commandLine.innerHTML = `<span class="prompt">PS C:\\Users\\User></span> <span class="command">${cmd}</span>`;
terminalOutput.insertBefore(commandLine, terminalOutput.lastElementChild);
// 处理命令
const output = document.createElement('div');
output.className = 'output';
const cmdParts = cmd.split(' ');
const baseCmd = cmdParts[0].toLowerCase();
switch (baseCmd) {
case 'help':
output.innerHTML = '<span class="info">可用命令:</span><br>';
for (const [cmd, desc] of Object.entries(commands)) {
output.innerHTML += `<span class="command">${cmd}</span>: ${desc}<br>`;
}
break;
case 'clear':
while (terminalOutput.children.length > 1) {
terminalOutput.removeChild(terminalOutput.firstChild);
}
return; // 不需要添加输出元素
case 'echo':
output.innerHTML = cmdParts.slice(1).join(' ');
break;
case 'date':
output.innerHTML = new Date().toString();
break;
case 'ls':
output.innerHTML = `
<span class="info"> 目录: C:\\Users\\User</span><br><br>
<span class="success">Mode LastWriteTime Length Name</span><br>
<span class="info">---- ------------- ------ ----</span><br>
d----- 2023-05-15 10:30 AM Documents<br>
d----- 2023-05-10 2:15 PM Downloads<br>
d----- 2023-05-01 9:45 AM Pictures<br>
-a---- 2023-05-12 4:20 PM 1024 notes.txt<br>
`;
break;
case 'cd':
if (cmdParts.length < 2) {
output.innerHTML = '<span class="error">错误: 缺少目录参数</span>';
} else {
output.innerHTML = `<span class="info">已更改目录到 ${cmdParts[1]} (模拟)</span>`;
}
break;
case 'whoami':
output.innerHTML = 'user\\administrator';
break;
case 'exit':
output.innerHTML = '<span class="info">在网页中无法真正退出，请刷新页面重置终端</span>';
break;
case 'about':
output.innerHTML = `
<span class="info">Windows Terminal 网页版</span><br>
<span class="info">这是一个使用HTML, CSS和JavaScript模拟的Windows Terminal</span><br>
`;
break;
default:
output.innerHTML = `<span class="error">'${baseCmd}' 不是内部或外部命令，也不是可运行的程序或批处理文件。</span>`;
}
terminalOutput.insertBefore(output, terminalOutput.lastElementChild);
terminalOutput.scrollTop = terminalOutput.scrollHeight;
}
// 打印欢迎消息
function printWelcomeMessage() {
const welcome = document.createElement('div');
welcome.className = 'output';
welcome.innerHTML = `
<span class="info">输入 'help' 查看可用命令列表</span><br>
<span class="info">这是一个模拟终端，功能有限</span><br><br>
`;
terminalOutput.insertBefore(welcome, terminalOutput.lastElementChild);
}
// 标签切换功能
const tabs = document.querySelectorAll('.tab');
tabs.forEach(tab => {
tab.addEventListener('click', () => {
tabs.forEach(t => t.classList.remove('active'));
tab.classList.add('active');
// 模拟切换标签时的效果
if (tab.textContent === 'PowerShell') {
terminalOutput.innerHTML = `
<div class="output">
<span class="success">Windows PowerShell</span><br>
<span class="info">版权所有 (C) Microsoft Corporation。保留所有权利。</span><br><br>
<span class="info">尝试新的跨平台 PowerShell https://aka.ms/pscore6</span><br><br>
</div>
<div class="command-line">
<span class="prompt">PS C:\\Users\\User></span>
<input type="text" class="input-line" id="commandInput" autofocus>
</div>
`;
commandInput = document.getElementById('commandInput');
commandInput.addEventListener('keydown', handleKeyDown);
printWelcomeMessage();
} else if (tab.textContent === 'CMD') {
terminalOutput.innerHTML = `
<div class="output">
<span class="info">Microsoft Windows [版本 10.0.19045.3086]</span><br>
<span class="info">(c) Microsoft Corporation。保留所有权利。</span><br><br>
</div>
<div class="command-line">
<span class="prompt">C:\\Users\\User></span>
<input type="text" class="input-line" id="commandInput" autofocus>
</div>
`;
commandInput = document.getElementById('commandInput');
commandInput.addEventListener('keydown', handleKeyDown);
printWelcomeMessage();
} else if (tab.textContent === 'Ubuntu') {
terminalOutput.innerHTML = `
<div class="output">
<span class="info">Welcome to Ubuntu 20.04.4 LTS (GNU/Linux 5.10.102.1-microsoft-standard-WSL2 x86_64)</span><br><br>
<span class="info"> * Documentation: https://help.ubuntu.com</span><br>
<span class="info"> * Management: https://landscape.canonical.com</span><br>
<span class="info"> * Support: https://ubuntu.com/advantage</span><br><br>
</div>
<div class="command-line">
<span class="prompt">user@DESKTOP:~$</span>
<input type="text" class="input-line" id="commandInput" autofocus>
</div>
`;
commandInput = document.getElementById('commandInput');
commandInput.addEventListener('keydown', handleKeyDown);
printWelcomeMessage();
}
});
});
// 窗口控制按钮功能
document.querySelector('.minimize').addEventListener('click', () => {
alert('最小化功能 (模拟)');
});
document.querySelector('.maximize').addEventListener('click', () => {
if (document.body.style.width === '100%') {
document.body.style.width = '80%';
document.body.style.height = '80%';
document.body.style.margin = 'auto';
} else {
document.body.style.width = '100%';
document.body.style.height = '100%';
document.body.style.margin = '0';
}
});
document.querySelector('.close').addEventListener('click', () => {
if (confirm('确定要关闭终端吗？')) {
alert('在网页中无法真正关闭，请关闭浏览器标签页');
}
});
// 初始化终端
window.onload = initTerminal;
</script>
</body>
</html>
扫一扫
5847
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
