风格嘛，终端风格
使用固定命令，回复内容可以自己定义
命令使用，比如 ls ===> 输出一些github、其他页面的一些超链啥的
在 window.onload = function() 这里写默认加载的命令~~
效果图
代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Domains Look</title>
<style>
body {
/* 等宽字体 font-family: monospace; */
background-color: #222;
color: #fff;
padding: 20px;
margin: 0;
height: 100vh;
box-sizing: border-box;
}
.terminal {
background-color: #1e1e1e;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px #000;
max-width: 800px;
margin: 0 auto;
cursor: text;
height: 100%;
display: flex;
flex-direction: column;
overflow: auto;
::-webkit-scrollbar {
display: none;
}
-ms-overflow-style: none;
scrollbar-width: none;
}
.prompt {
color: #0f0;
margin-right: 5px;
white-space: nowrap;
}
.command, .output {
margin: 10px 0;
white-space: pre-wrap;
}
.command {
display: flex;
align-items: center;
}
.command input {
background: transparent;
border: none;
color: #fff;
flex: 1;
caret-color: #0f0; /* 光标颜色 */
outline: none;
font-family: monospace;
/* 禁用自动完成功能 */
autocomplete: off;
autocorrect: off;
spellcheck: false;
}
.icons a {
color: #0ff;
text-decoration: none;
margin-right: 15px;
display: inline-flex;
align-items: center;
}
.icons a:hover {
color: #1e90ff;
}
a {
color: #0ff;
text-decoration: none;
}
a:hover {
color: #1e90ff;
}
.output a {
display: inline-block;
margin-right: 15px;
}
.output .command-text {
color: #add8e6;
}
</style>
</head>
<body>
<div class="terminal" id="terminal">
<div class="output"></div>
<div class="command">
<span class="prompt">user@terminal:~$</span>
<input type="text" id="commandInput" autofocus autocomplete="off" autocorrect="off" spellcheck="false" />
</div>
</div>
<script>
const commandInput = document.getElementById('commandInput');
const outputDiv = document.querySelector('.output');
const terminal = document.getElementById('terminal');
window.onload = function() {
processCommand('default');
processCommand('help');
processCommand('ls');
processCommand('about');
};
commandInput.addEventListener('keypress', function (e) {
if (e.key === 'Enter') {
const command = commandInput.value.trim();
processCommand(command);
commandInput.value = '';
terminal.scrollTop = terminal.scrollHeight;
}
});
document.addEventListener('click', function (e) {
if (e.target.tagName.toLowerCase() !== 'a') {
commandInput.focus();
}
});
function processCommand(command) {
const outputLine = document.createElement('div');
outputLine.className = 'command-line';
outputLine.innerHTML = `<span class="prompt">user@terminal:~$</span> <span class="command-text">${escapeHTML(command)}</span>`;
outputDiv.appendChild(outputLine);
if (command === '') return ;
let response;
switch (command) {
case 'about':
response = '<div >Feel free to contact us!</div>' +
'<div >(> ʌ <)</div>' +
'<div >E-Mail: [email protected]</div>';
break;
case 'ls':
response = '==============================================='+
'<div class="icons">' +
'<a href="https://www.google.com" target="_blank">google.com</a>' +
'<a href="https://www.github.com" target="_blank">github.com</a>' +
'<a href="https://www.facebook.com" target="_blank">facebook.com</a>' +
'<a href="https://www.twitter.com" target="_blank">twitter.com</a>' +
'</div>' +
'==============================================='
;
break;
case 'default':
response = `
∧,,_∧
⊂ ( ･ω･ )つ-
／／/ /::/
|::|/⊂ヽノ|::|」
／￣￣旦￣￣￣／|
／＿＿＿＿＿＿／ |
|-------------| ／
`;
break;
case 'cyou':
response = `
🎶魔法使い希落凛🧙、行きます🎶"
∧＿∧
（｡･ω･｡)つ━☆・*。
⊂ ノ ・゜+.
しーＪ °。+ *´¨)
.· ´¸.·*´¨) ¸.·*¨)
(¸.·´ (¸.·'* ☆
`;
break;
case 'break':
response = `
少し休んで🍵お茶しましょう
（⌒)
∧__∧ （~)
（｡･ω･｡)( )
{￣￣￣￣}
{~￣お_＿} ぬるい
{~￣茶_＿}
{＿＿＿＿}
┗━━┛
`;
break;
case 'exit':
response = 'exit suc. thx u used~';
commandInput.disabled = true;
break;
case 'help':
response = 'commands list ==> about, ls, help, default, cyou, break, exit';
break;
default:
response = 'not found commands: ' + escapeHTML(command);
break;
}
const responseLine = document.createElement('div');
responseLine.className = 'output-line';
responseLine.innerHTML = response;
outputDiv.appendChild(responseLine);
}
function escapeHTML(str) {
const div = document.createElement('div');
div.textContent = str;
return div.innerHTML;
}
</script>
</body>
</html>
