javascript - 浏览器中的 Bash shell 模拟

Question

有没有办法只用 Javascript/JQuery 在浏览器中模拟 Bash shell？我想在我们的网站上有一个演示，它模拟某人从 Bash shell 使用我们的新数据库系统。最好看起来有人在输入 shell 命令，输出会像典型的 Bash shell 那样逐行列出。我一直在谷歌搜索但没有找到任何东西，那么我应该如何实现它 - 使用什么 JQuery 插件可以使我的工作更轻松。

Answer 1

我根据 example made by Kos 做了一个解决方案, 你可以看到完整的演示 here .

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();

});