javascript - 如何回调输入并通过返回与其他文本显示它
问题描述
我有一个使用 javascript、CSS 和 HTML 的假终端。我可以识别出用户给出的命令有错误并打印出错误,但我无法回调命令行的输入并将其放入错误中。例如,我的终端说
“未知命令:如果仍有问题,请尝试 --help 获取命令列表或 debug.exe。”
我想能够说
“[输入]一些文本”。
有人可以帮助我。这是我的代码。
// 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`
反引号启用字符串插值。${} 表示一个变量。
推荐阅读
- ssl - 使用 ClickOnce 部署的签名 VSTO 显示“未知发布者”
- html - 为什么 css 和图像未成功加载以及如何正确设置宽度?
- python - QThread 在线程仍在运行时被销毁
- r - 如何找出我的向量中有多少数字小于给定数字
- python - 如何在新的 Pandas 列公式中使用多索引列
- sql - SSMS DATEADD 使用错误的区域格式
- google-cloud-platform - Cloudbuild 启动 firebase 模拟器,然后 npm 测试
- pdf - 在 python 中创建可下载的 pytest 报告 PDF
- python - 使用 BeautifulSoup 从 HTML 文件中丢失元素
- python - 具有多维索引列表的 Numpy 掩码