有没有一种方法可以仅使用Javascript / JQuery在浏览器中模拟Bash shell?我想在我们的网站上有一个演示,它在Bash shell中使用我们的新数据库系统模拟某人。最好是看起来像有人在输入shell命令,并且输出将像典型的Bash shell一样逐行列出。我一直没有找到任何东西,所以我应该如何实现它-使用什么JQuery插件使我的工作更轻松。
我根据Kos的示例提出了一个解决方案,您可以在此处看到完整的演示示例。
的HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/q.js/1.0.0/q.js"></script>
<div id="wnd"></div>
<div id="log"></div>
<textarea rows="11" cols="50">
% cat example.c
#include <stdio.h>
int main()
{
printf("Goodbye Cruel World!\n");
return 0;
}
% make example.c -o example
% ./example
Goodbye Cruel World!
</textarea>
的CSS
body {
background: black;
}
#wnd {
background: #232;
border-radius: .2em;
white-space: pre-wrap;
padding: .5em;
font-family: "Consolas", "Ubuntu Mono", "Monaco", monospace;
color: white;
}
.prompt {
color: #99aaee;
}
.cmd {
color: #9e9e9C;
}
jQuery查询
var prompt;
function setPrompt(usr, domain)
{
prompt = usr + '@' + domain + ' %';
}
function addOutput(s) {
$('<div>').text(s).appendTo(wnd);
return Q.delay(100);
// return addPrompt();
}
function addInput(s) {
var l = $('.prompt:last');
var e = $('<span>').addClass('cmd').appendTo(l);
return addLettersRecursive(e, s);
}
function addPrompt() {
var l = $('<div>').text(prompt).addClass('prompt').appendTo(wnd);
return Q.delay(900);
}
function addLettersRecursive(container, s) {
container.append(s.charAt(0)); // dangerous :(
var row_complete = Q.defer();
Q.delay(100).then(function() {
if (s.length <= 1) {
row_complete.resolve();
}
addLettersRecursive(container, s.substr(1)).then(function() {
row_complete.resolve();
})
});
return row_complete.promise;
}
$( document ).ready(function() {
$('textarea').hide();
setPrompt('inge', 'sparkledb.net');
var lines = $('textarea').val().split('\n');
var promise = new Q();
promise = promise.then(function()
{
lines.forEach( function(item) {
if (item[0] == '%')
{
promise = promise.then(function()
{ return addPrompt(); })
promise = promise.then(function()
{ return addInput(item.substr(1)); })
}
else
{
promise = promise.then(function()
{ return addOutput(item); })
}
})
})
promise.done();
});
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句