<!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>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Consolas', 'Courier New', monospace;
}
body {
background-color: #0c0c0c;
color: #cccccc;
height: 100vh;
display: flex;
flex-direction: column;
}
.terminal-header {
background-color: #1e1e1e;
padding: 8px 12px;
display: flex;
align-items: center;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
.terminal-title {
flex-grow: 1;
text-align: center;
font-size: 12px;
}
.terminal-controls {
display: flex;
gap: 12px;
}
.control-btn {
width: 12px;
height: 12px;
border-radius: 50%;
cursor: pointer;
}
.close {
background-color: #ff5f56;
}
.minimize {
background-color: #ffbd2e;
}
.maximize {
background-color: #27c93f;
}
.terminal-body {
flex-grow: 1;
padding: 12px;
overflow-y: auto;
background-color: #0c0c0c;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
position: relative;
}
.prompt {
display: flex;
margin-bottom: 8px;
}
.prompt-path {
color: #4ec9b0;
margin-right: 8px;
}
.prompt-arrow {
color: #d4d4d4;
margin-right: 8px;
}
.command-input {
background: transparent;
border: none;
color: #ffffff;
flex-grow: 1;
outline: none;
font-size: 14px;
}
.output {
margin-bottom: 8px;
white-space: pre-wrap;
word-break: break-word;
}
.error {
color: #f44747;
}
.success {
color: #4ec9b0;
}
.info {
color: #569cd6;
}
.welcome {
margin-bottom: 16px;
color: #d4d4d4;
}
.cursor {
display: inline-block;
width: 8px;
height: 16px;
background-color: #ffffff;
animation: blink 1s infinite;
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
/* 响应式设计 */
@media (max-width: 768px) {
body {
padding: 0;
}
.terminal-header {
border-radius: 0;
}
.terminal-body {
border-radius: 0;
}
}
</style>
</head>
<body>
<div class="terminal-header">
<div class="terminal-controls">
<div class="control-btn close"></div>
<div class="control-btn minimize"></div>
<div class="control-btn maximize"></div>
</div>
<div class="terminal-title">Windows Terminal</div>
<div style="width: 60px;"></div> <!-- 占位保持标题居中 -->
</div>
<div class="terminal-body" id="terminal">
<div class="welcome">
Windows Terminal 网页版 v1.0<br>
输入 "help" 查看可用命令<br>
<br>
</div>
<div class="output info">
Microsoft Windows [版本 10.0.22621.1702]<br>
(c) Microsoft Corporation。保留所有权利。
</div>
<!-- 命令历史记录将在这里动态添加 -->
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const terminal = document.getElementById('terminal');
let commandHistory = [];
let historyIndex = -1;
// 初始提示符
addPrompt();
// 聚焦到输入框
function focusInput() {
const input = document.querySelector('.command-input');
if (input) input.focus();
}
// 添加新提示符
function addPrompt() {
const prompt = document.createElement('div');
prompt.className = 'prompt';
prompt.innerHTML = `
<span class="prompt-path">C:\\Users\\User></span>
<span class="prompt-arrow">></span>
<input type="text" class="command-input" autocomplete="off">
<span class="cursor"></span>
`;
terminal.appendChild(prompt);
const input = prompt.querySelector('.command-input');
input.addEventListener('keydown', handleInput);
focusInput();
// 自动滚动到底部
terminal.scrollTop = terminal.scrollHeight;
}
// 处理用户输入
function handleInput(e) {
if (e.key === 'Enter') {
e.preventDefault();
const command = e.target.value.trim();
if (command) {
// 添加到历史记录
commandHistory.push(command);
historyIndex = commandHistory.length;
// 禁用输入
e.target.disabled = true;
// 显示命令
const output = document.createElement('div');
output.className = 'output';
output.textContent = command;
terminal.appendChild(output);
// 处理命令
processCommand(command);
// 添加新提示符
addPrompt();
}
} else if (e.key === 'ArrowUp') {
// 上箭头 - 历史记录上一条
e.preventDefault();
if (commandHistory.length > 0) {
if (historyIndex > 0) historyIndex--;
e.target.value = commandHistory[historyIndex] || '';
}
} else if (e.key === 'ArrowDown') {
// 下箭头 - 历史记录下一条
e.preventDefault();
if (commandHistory.length > 0) {
if (historyIndex < commandHistory.length - 1) historyIndex++;
e.target.value = commandHistory[historyIndex] || '';
if (historyIndex === commandHistory.length - 1) {
e.target.value = '';
historyIndex = commandHistory.length;
}
}
}
}
// 处理命令
function processCommand(command) {
const output = document.createElement('div');
switch (command.toLowerCase()) {
case 'help':
output.className = 'output info';
output.innerHTML = `
可用命令:<br>
- help: 显示帮助信息<br>
- clear: 清空终端<br>
- about: 关于此终端<br>
- date: 显示当前日期和时间<br>
- echo [text]: 回显输入的文本<br>
- color: 更改终端颜色<br>
- website: 访问我的个人网站
`;
break;
case 'clear':
// 清空终端，保留欢迎信息
const children = Array.from(terminal.children);
for (let i = 2; i < children.length; i++) {
terminal.removeChild(children[i]);
}
return; // 不需要添加输出
case 'about':
output.className = 'output info';
output.innerHTML = `
Windows Terminal 网页版 v1.0<br>
这是一个模拟 Windows Terminal 的网页实现<br>
使用 HTML, CSS 和 JavaScript 构建<br>
访问我的个人网站: <a href="http://www.zhaohf.homes" target="_blank" style="color: #569cd6;">http://www.zhaohf.homes</a>
`;
break;
case 'date':
output.className = 'output info';
output.textContent = new Date().toString();
break;
case 'website':
output.className = 'output info';
output.innerHTML = `正在打开 <a href="http://www.zhaohf.homes" target="_blank" style="color: #569cd6;">http://www.zhaohf.homes</a>`;
window.open('http://www.zhaohf.homes', '_blank');
break;
case 'color':
output.className = 'output info';
output.textContent = '终端颜色已重置为默认值';
document.documentElement.style.setProperty('--bg-color', '#0c0c0c');
document.documentElement.style.setProperty('--text-color', '#cccccc');
break;
default:
if (command.startsWith('echo ')) {
output.className = 'output';
output.textContent = command.substring(5);
} else if (command.startsWith('color ')) {
const color = command.substring(6);
try {
document.documentElement.style.setProperty('--bg-color', color);
output.className = 'output success';
output.textContent = `终端背景颜色已更改为: ${color}`;
} catch (e) {
output.className = 'output error';
output.textContent = `无效的颜色: ${color}`;
}
} else {
output.className = 'output error';
output.textContent = `'${command}' 不是内部或外部命令，也不是可运行的程序或批处理文件。`;
}
}
terminal.appendChild(output);
terminal.scrollTop = terminal.scrollHeight;
}
// 点击终端时聚焦输入框
terminal.addEventListener('click', focusInput);
// 模拟控制按钮点击
document.querySelector('.close').addEventListener('click', function() {
const output = document.createElement('div');
output.className = 'output info';
output.textContent = '关闭功能在网页版中不可用，请使用浏览器关闭标签页。';
terminal.appendChild(output);
terminal.scrollTop = terminal.scrollHeight;
});
document.querySelector('.minimize').addEventListener('click', function() {
const output = document.createElement('div');
output.className = 'output info';
output.textContent = '最小化功能在网页版中不可用。';
terminal.appendChild(output);
terminal.scrollTop = terminal.scrollHeight;
});
document.querySelector('.maximize').addEventListener('click', function() {
if (document.fullscreenElement) {
document.exitFullscreen();
} else {
document.documentElement.requestFullscreen();
}
});
// 初始聚焦
focusInput();
});
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
