如何回调输入并通过 return 与其他文本一起显示
How do I callback an input and display it through a return with other text
我有一个使用 javascript、CSS 和 HTML 的假终端。我可以识别用户给出的命令有错误并打印有错误，但我无法回调命令行的输入并将其放入错误中。例如，我的终端显示
"unknown command: try --help for a list of commands or debug.exe if
you are still having trouble."
我想说
"[input] some text".
有人可以帮助我吗？这是我的代码。
// setup vars
var currentLine = "";
var typeSpeed = 70;
var pauseLength = 1000;
// get ref to DOM Elements
var cursor = $("#cursor");
var animate = $(".animate");
var input = $("#inputcmd");
var output = $("#output");
// set up Event Listeners
input.keypress(keypressInput);
$("#terminal-window").click(openKeyboard);
// hide text so we can animate it
animate.each(function(index) {
$(this).addClass("hide");
});
// make first call to printCharaters() for animation
var temp = setTimeout(printCharaters, typeSpeed);
// this function animates printing of text inside DOMS with the .animate class.
function printCharaters() {
// check if current line array is empty
if (currentLine.length == 0) {
// stop cursor from blinking
cursor.removeClass("blink");
// get first line of text and add it to an array
currentLine = animate.first().text().split("");
currentLine = currentLine.reverse();
// remove text from dom and unhide element
animate.first().html("");
animate.first().removeClass("hide");
cursor.appendTo(animate.first());
}
// animate typing
animate.first().append(currentLine.pop()).append(cursor);
// check if we just popped the last element of the array off
if (currentLine.length == 0) {
// remove animated DOM Element from animation
animate.first().removeClass("animate");
// get new list of DOM Elements to animate
animate = $(".animate");
// make cursor blink at the end-of-line.
cursor.addClass("blink");
// Animate next DOM Element if any remain
if (animate.length > 0) {
setTimeout(printCharaters, pauseLength);
} else {
// all text in the DOM Elements have been animated
input.after(cursor);
input.focus();
}
} else {
// Animate next character in DOM Element
setTimeout(printCharaters, typeSpeed);
}
}
function keypressInput(e) {
// received enter key, send cmd and clear input
if (e.keyCode == 13) {
var command = input.text();
output.html(proccessCMD(command));
input.html("");
e.preventDefault();
}
}
function proccessCMD(cmd) {
cmd = cmd.trim().toLowerCase();
//there is only one command here. But you get the idea. Plug in your API call here.
if (cmd == "--help") {
return "try these command types: ls, cd ip, vpn, ping, date, time, cal, data, su, termlink_shutdown, termlink_boot, server, wi-fi, file, chat, reload, clear";
}
if (cmd == "ls /") {
return "bin | src | lib | lib64 | dev | sbin"
}
if (cmd == "ls /bin") {
return "license.txt | runtime | trash | archived"
}
if (cmd == "ls /bin /license") {
return "This terminal may be shutdown at an unexpected time. We are not liable for amy damages. If you violate this terminal we can take you to a court of our choice. If you have any questions email us at ******.********@gmail.com. Thank you for using this terminal Terminal owned and operated by Nathan Schmitt"
}
if (cmd =="ls /bin /runtime") {
return "runtime exception error! To debug type debug.exe"
}
if (cmd == "debug.exe") {
return 'debuger loading....................................Complete --> Posabilities for an unexpected error: Failed to compile bootstrap files, your terminal sesion ended, your wi-fi has been disconnected, you have entered an incorrect or old command. "The computer is usualy not the problem, but is more likely you or your internet of things" --Bob Peeters. Some commands start or end with slashes. WHITE SPACE DOES COUNT AS AN IMPUT'
}
if (cmd == "ls /bin /trash") {
return 'you must enter your admin password to view trash type "su" to enter admin terminal'
}
//su verification
if (cmd == "su") {
return "Enter SSID Enter 'SSID/PSWD:' to see SSID and Password."
}
if (cmd == "ssid/pswd:") {
return "you must be logged in as an admin to use this command!"
}
if (cmd == "shutdown") {
return "you must be logged in as an admin to use this command!"
}
if (cmd == "ls /lib") {
return "Librarry: you must be logged in as an admin to use this command! Use The 'file' or 'lib64' to acsess the non-admin librarry"
}
if (cmd == "ls /lib64") {
return "your lib64: Readme.txt Lisence.txt Runtime.exe ls / cd home cd /create. your shared lib64:[you have not shared any of your personal files to the public, use Termlink Pro to acsess the share option] Public lib64: [Kittens.txt] [fun.txt] [why.txt] [termlink.txt] [termlinkPro.txt] Privatelib: you must be logged in as an admin to use this command! **use the file command to acsess lib64 files**"
}
if (cmd == "ls /sbin") {
return "you must be logged in as an admin to use the sbin command"
}
if (cmd == "ls /dev") {
return "terminal development by Nathan Schmitt the src is codepen.io. The terminal is not completed and is still in indev stages, shutdowns are to be expeted in the next month. Thank you for choosing FBI termlink"
}
if (cmd == "ls /bin /archived") {
return "you must be logged in as an admin to use the sbin command"
}
if (cmd =="cd /") {
return "cd /home cd /su cd /server"
}
if (cmd == "cd /home") {
return "destanation reached [directory:'home']"
}
if (cmd == "cd /su") {
return "you must be logged in as an admin to use this command"
}
if (cmd == "cd /server") {
return "you are on server 1. Use termlink pro to get onto any server port! our terminal has 84 ports to choose from. Use 'cd /port' to chose your port. To see full server information you must be logged in as and admin"
}
if (cmd == "cd /port") {
return "make a termlink pro acount today!"
}
if (cmd == "clear") {
return " "
}
if (cmd == "reload") {
return "reload succsessfull"
}
if (cmd == "ip") {
return "ip adress fetching is blocked by your system adminastrator"
}
if (cmd == "vpn") {
return "it seems you do not have a valid vpn"
}
if (cmd == "ping") {
return "[100 packets sent] [87 packets pinged [13 packet loss]"
}
if (cmd == "Data") {
return "server data could not be found on this server [server 1]"
}
if (cmd == "termlink_boot") {
return "boot-up completed in 0.0243785 seconds"
}
if (cmd == "termlink_shutdown") {
return "you are not allowed to do what you just did"
}
if (cmd == "wi-fi") {
return "your router does not allow fetching of this data"
}
if (cmd == "file") {
return "file /readme.txt file/ runtime.exe file/ lisence.txt file /kittens.txt file /myfiles"
}
//unkown commands
return'unknown command. type "--help" for list of commands or "debug.exe" if you are still having trouble.';
}
//open iOS keyboard
function openKeyboard(){
input.focus();
}
body, #inputcmd{
background-color: #333;
color: #00ff00;
font-family: "andale mono", /* MS WebFont */ "monotype.com", /* MS WebFont, former name */ monaco, /* MacOS */ /* Fallback options */ "courier new", /* Windows, MacOS */ courier, /* Unix+X, MacOS */ monospace;
}
#terminal-window {
padding: 10px;
display: block;
position : absolute;
width: 100%;
height:100%;
top : 0px;
left : 0px;
background-color: #111;
overflow : hidden;
}
#terminal-window:before {
content: '';
z-index: 4010;
width : 100%;
height : 100%;
position : absolute;
top : 0px;
left : 0px;
background: linear-gradient(#444 50%, #111 50%);
background-size: 100% 4px;
background-repeat: repeat-y;
opacity: .14;
box-shadow : inset 0px 0px 1px 1px rgba(0, 0, 0, .8);
animation: pulse 5s linear infinite;
}
#cursor {
color: #00ffff;
box-sizing: border-box;
border-left: .5em solid;
}
.blink {
animation: typing 6s steps(13, end) infinite, blinking 1s step-end infinite;
}
.scanlines {
z-index: 4100;
}
.hide {
display: none;
}
.scanlines:before {
content : '';
position : absolute;
top : 0px;
left: 0px;
width : 100%;
height : 12px;
background : #fff;
background: linear-gradient(to bottom, rgba(255,0,0,0) 0%,rgba(255,250,250,1) 50%,rgba(255,255,255,0.98) 51%,rgba(255,0,0,0) 100%); /* W3C */
opacity : .1;
animation: vline 6.25s linear infinite;
}
#inputcmd{
background-color: #111;
border: 1px;
font-size: 1em;
/*hide default cursor*/
color: transparent;
text-shadow: 0 0 0 #00ffff;
}
#inputcmd:focus{
outline: none;
}
@keyframes pulse {
0% {transform: scale(1.001); opacity: .14; }
8% {transform: scale(1.000); opacity: .13; }
15% {transform: scale(1.004); opacity: .14; }
30% {transform: scale(1.002); opacity: .11; }
100% {transform: scale(1.000); opacity: .14; }
}
@keyframes vline {
0% { top: 0px;}
100% { top: 100%;}
}
@keyframes blinking {
from, to { border-color: transparent; }
50% { border-color: cyan; }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="terminal-window">
<span id="cursor"></span>
<p>
<span class="animate">FBI (TM) TERMLINK PROTOCOL INSTANTIATING</span>
</p>
<p>
<span class="animate">ENTER FBI PASSWORD</span>
</p>
<span class="animate">[Enter Password]>>></span>
<span class="animate">******************************--Geust Password saved</span>
<p>
</p>
<span class="animate">...</span><span class="animate">Acsess Granted!</span>
<p>
</p>
<span class="animate"> To login as admin type "su"</span>
<p>
</p>
<span class="animate"> (Termlink Terminal owned and operated by Nathan Schmittt) copyright(c) 2019 Termlink LLC</span>
<p>
</p>
<span class="animate">[Enter Command]>>></span><span autofocus contenteditable="true" id="inputcmd"></span>
<p><span id="output"></span></p>
<p><span id="error"></span></p>
</div>
<div class="scanlines"></div>
如果我没理解错 - 你想在之后放置用户的输入和一些文本。
在按键输入中你可以输入：
`${cmd} your text here`
反引号启用字符串插值。
${} 表示一个变量。
您的函数的 cmd 变量中已有输入文本。所以而不是
return'unknown command. type "--help" for list of commands or "debug.exe" if you are still having trouble.';
你可以使用
return cmd + ' some text here';
我有一个使用 javascript、CSS 和 HTML 的假终端。我可以识别用户给出的命令有错误并打印有错误，但我无法回调命令行的输入并将其放入错误中。例如，我的终端显示
"unknown command: try --help for a list of commands or debug.exe if you are still having trouble."
我想说
"[input] some text".
有人可以帮助我吗？这是我的代码。
// setup vars
var currentLine = "";
var typeSpeed = 70;
var pauseLength = 1000;
// get ref to DOM Elements
var cursor = $("#cursor");
var animate = $(".animate");
var input = $("#inputcmd");
var output = $("#output");
// set up Event Listeners
input.keypress(keypressInput);
$("#terminal-window").click(openKeyboard);
// hide text so we can animate it
animate.each(function(index) {
$(this).addClass("hide");
});
// make first call to printCharaters() for animation
var temp = setTimeout(printCharaters, typeSpeed);
// this function animates printing of text inside DOMS with the .animate class.
function printCharaters() {
// check if current line array is empty
if (currentLine.length == 0) {
// stop cursor from blinking
cursor.removeClass("blink");
// get first line of text and add it to an array
currentLine = animate.first().text().split("");
currentLine = currentLine.reverse();
// remove text from dom and unhide element
animate.first().html("");
animate.first().removeClass("hide");
cursor.appendTo(animate.first());
}
// animate typing
animate.first().append(currentLine.pop()).append(cursor);
// check if we just popped the last element of the array off
if (currentLine.length == 0) {
// remove animated DOM Element from animation
animate.first().removeClass("animate");
// get new list of DOM Elements to animate
animate = $(".animate");
// make cursor blink at the end-of-line.
cursor.addClass("blink");
// Animate next DOM Element if any remain
if (animate.length > 0) {
setTimeout(printCharaters, pauseLength);
} else {
// all text in the DOM Elements have been animated
input.after(cursor);
input.focus();
}
} else {
// Animate next character in DOM Element
setTimeout(printCharaters, typeSpeed);
}
}
function keypressInput(e) {
// received enter key, send cmd and clear input
if (e.keyCode == 13) {
var command = input.text();
output.html(proccessCMD(command));
input.html("");
e.preventDefault();
}
}
function proccessCMD(cmd) {
cmd = cmd.trim().toLowerCase();
//there is only one command here. But you get the idea. Plug in your API call here.
if (cmd == "--help") {
return "try these command types: ls, cd ip, vpn, ping, date, time, cal, data, su, termlink_shutdown, termlink_boot, server, wi-fi, file, chat, reload, clear";
}
if (cmd == "ls /") {
return "bin | src | lib | lib64 | dev | sbin"
}
if (cmd == "ls /bin") {
return "license.txt | runtime | trash | archived"
}
if (cmd == "ls /bin /license") {
return "This terminal may be shutdown at an unexpected time. We are not liable for amy damages. If you violate this terminal we can take you to a court of our choice. If you have any questions email us at ******.********@gmail.com. Thank you for using this terminal Terminal owned and operated by Nathan Schmitt"
}
if (cmd =="ls /bin /runtime") {
return "runtime exception error! To debug type debug.exe"
}
if (cmd == "debug.exe") {
return 'debuger loading....................................Complete --> Posabilities for an unexpected error: Failed to compile bootstrap files, your terminal sesion ended, your wi-fi has been disconnected, you have entered an incorrect or old command. "The computer is usualy not the problem, but is more likely you or your internet of things" --Bob Peeters. Some commands start or end with slashes. WHITE SPACE DOES COUNT AS AN IMPUT'
}
if (cmd == "ls /bin /trash") {
return 'you must enter your admin password to view trash type "su" to enter admin terminal'
}
//su verification
if (cmd == "su") {
return "Enter SSID Enter 'SSID/PSWD:' to see SSID and Password."
}
if (cmd == "ssid/pswd:") {
return "you must be logged in as an admin to use this command!"
}
if (cmd == "shutdown") {
return "you must be logged in as an admin to use this command!"
}
if (cmd == "ls /lib") {
return "Librarry: you must be logged in as an admin to use this command! Use The 'file' or 'lib64' to acsess the non-admin librarry"
}
if (cmd == "ls /lib64") {
return "your lib64: Readme.txt Lisence.txt Runtime.exe ls / cd home cd /create. your shared lib64:[you have not shared any of your personal files to the public, use Termlink Pro to acsess the share option] Public lib64: [Kittens.txt] [fun.txt] [why.txt] [termlink.txt] [termlinkPro.txt] Privatelib: you must be logged in as an admin to use this command! **use the file command to acsess lib64 files**"
}
if (cmd == "ls /sbin") {
return "you must be logged in as an admin to use the sbin command"
}
if (cmd == "ls /dev") {
return "terminal development by Nathan Schmitt the src is codepen.io. The terminal is not completed and is still in indev stages, shutdowns are to be expeted in the next month. Thank you for choosing FBI termlink"
}
if (cmd == "ls /bin /archived") {
return "you must be logged in as an admin to use the sbin command"
}
if (cmd =="cd /") {
return "cd /home cd /su cd /server"
}
if (cmd == "cd /home") {
return "destanation reached [directory:'home']"
}
if (cmd == "cd /su") {
return "you must be logged in as an admin to use this command"
}
if (cmd == "cd /server") {
return "you are on server 1. Use termlink pro to get onto any server port! our terminal has 84 ports to choose from. Use 'cd /port' to chose your port. To see full server information you must be logged in as and admin"
}
if (cmd == "cd /port") {
return "make a termlink pro acount today!"
}
if (cmd == "clear") {
return " "
}
if (cmd == "reload") {
return "reload succsessfull"
}
if (cmd == "ip") {
return "ip adress fetching is blocked by your system adminastrator"
}
if (cmd == "vpn") {
return "it seems you do not have a valid vpn"
}
if (cmd == "ping") {
return "[100 packets sent] [87 packets pinged [13 packet loss]"
}
if (cmd == "Data") {
return "server data could not be found on this server [server 1]"
}
if (cmd == "termlink_boot") {
return "boot-up completed in 0.0243785 seconds"
}
if (cmd == "termlink_shutdown") {
return "you are not allowed to do what you just did"
}
if (cmd == "wi-fi") {
return "your router does not allow fetching of this data"
}
if (cmd == "file") {
return "file /readme.txt file/ runtime.exe file/ lisence.txt file /kittens.txt file /myfiles"
}
//unkown commands
return'unknown command. type "--help" for list of commands or "debug.exe" if you are still having trouble.';
}
//open iOS keyboard
function openKeyboard(){
input.focus();
}
body, #inputcmd{
background-color: #333;
color: #00ff00;
font-family: "andale mono", /* MS WebFont */ "monotype.com", /* MS WebFont, former name */ monaco, /* MacOS */ /* Fallback options */ "courier new", /* Windows, MacOS */ courier, /* Unix+X, MacOS */ monospace;
}
#terminal-window {
padding: 10px;
display: block;
position : absolute;
width: 100%;
height:100%;
top : 0px;
left : 0px;
background-color: #111;
overflow : hidden;
}
#terminal-window:before {
content: '';
z-index: 4010;
width : 100%;
height : 100%;
position : absolute;
top : 0px;
left : 0px;
background: linear-gradient(#444 50%, #111 50%);
background-size: 100% 4px;
background-repeat: repeat-y;
opacity: .14;
box-shadow : inset 0px 0px 1px 1px rgba(0, 0, 0, .8);
animation: pulse 5s linear infinite;
}
#cursor {
color: #00ffff;
box-sizing: border-box;
border-left: .5em solid;
}
.blink {
animation: typing 6s steps(13, end) infinite, blinking 1s step-end infinite;
}
.scanlines {
z-index: 4100;
}
.hide {
display: none;
}
.scanlines:before {
content : '';
position : absolute;
top : 0px;
left: 0px;
width : 100%;
height : 12px;
background : #fff;
background: linear-gradient(to bottom, rgba(255,0,0,0) 0%,rgba(255,250,250,1) 50%,rgba(255,255,255,0.98) 51%,rgba(255,0,0,0) 100%); /* W3C */
opacity : .1;
animation: vline 6.25s linear infinite;
}
#inputcmd{
background-color: #111;
border: 1px;
font-size: 1em;
/*hide default cursor*/
color: transparent;
text-shadow: 0 0 0 #00ffff;
}
#inputcmd:focus{
outline: none;
}
@keyframes pulse {
0% {transform: scale(1.001); opacity: .14; }
8% {transform: scale(1.000); opacity: .13; }
15% {transform: scale(1.004); opacity: .14; }
30% {transform: scale(1.002); opacity: .11; }
100% {transform: scale(1.000); opacity: .14; }
}
@keyframes vline {
0% { top: 0px;}
100% { top: 100%;}
}
@keyframes blinking {
from, to { border-color: transparent; }
50% { border-color: cyan; }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="terminal-window">
<span id="cursor"></span>
<p>
<span class="animate">FBI (TM) TERMLINK PROTOCOL INSTANTIATING</span>
</p>
<p>
<span class="animate">ENTER FBI PASSWORD</span>
</p>
<span class="animate">[Enter Password]>>></span>
<span class="animate">******************************--Geust Password saved</span>
<p>
</p>
<span class="animate">...</span><span class="animate">Acsess Granted!</span>
<p>
</p>
<span class="animate"> To login as admin type "su"</span>
<p>
</p>
<span class="animate"> (Termlink Terminal owned and operated by Nathan Schmittt) copyright(c) 2019 Termlink LLC</span>
<p>
</p>
<span class="animate">[Enter Command]>>></span><span autofocus contenteditable="true" id="inputcmd"></span>
<p><span id="output"></span></p>
<p><span id="error"></span></p>
</div>
<div class="scanlines"></div>
如果我没理解错 - 你想在之后放置用户的输入和一些文本。
在按键输入中你可以输入：
`${cmd} your text here`
反引号启用字符串插值。 ${} 表示一个变量。
您的函数的 cmd 变量中已有输入文本。所以而不是
return'unknown command. type "--help" for list of commands or "debug.exe" if you are still having trouble.';
你可以使用
return cmd + ' some text here';