Javascript 浏览器中的Bash shell仿真

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

看看：

Asciinema是一个免费的开源解决方案，用于记录终端会话并在web上共享

---

如果只是为了演示目的，那么从头开始编写代码就不那么困难了。设置页面，使其看起来像命令行界面

HTML:

然后在JavaScript/jQuery中实现伪操作，该操作将在客户端加载页面时启动。比如说

function appendOutput(message){
    var window = $('#window');
    window.append("<div>"+message+"</div>");
}    

function typeMessage(message){
    var input = $('#command-input');
    for(var i=0; i<message.length; i++){
        setTimeout(function(){
            var formerValue = input.val();
            input.val(formerValue + message[i]);
        });
    }
}

函数输出（消息）{
变量窗口=$（“#窗口”）；
追加（“+消息+”）；
}    

这看起来像是来自服务器的响应，例如

function appendOutput(message){
    var window = $('#window');
    window.append("<div>"+message+"</div>");
}    

function typeMessage(message){
    var input = $('#command-input');
    for(var i=0; i<message.length; i++){
        setTimeout(function(){
            var formerValue = input.val();
            input.val(formerValue + message[i]);
        });
    }
}

函数类型消息（消息）{
变量输入=$（“#命令输入”）；
对于（var i=0；ii，我根据提出了一个解决方案，您可以看到完整的工作演示

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>

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

});

var提示；
函数setPrompt（usr，域）
{
prompt=usr+'@'+域+'%'；
}
函数addOutput（s）{
$（''）。文本。附录（wnd）；
返回Q.delay（100）；
//返回addPrompt（）；
}
函数附加输入{
var l=$（'.prompt:last'）；
变量e=$（''）.addClass（'cmd'）.appendTo（l）；
返回地址字母（e，s）；
}
函数addPrompt（）{
var l=$（''）.text（prompt）.addClass（'prompt'）.appendTo（wnd）；
返回Q.delay（900）；
}
函数addlettersrescursive（容器）{
container.append（s.charAt（0））；//危险：(
var row_complete=Q.defer（）；
延迟（100）。然后（函数（）{
如果（s.length，因此它不应该是交互式的？那么为什么不使用动画gif？或带有一些
setTimeout
附加文本行的样式化的
div
。@Danfrom Germany我希望使DB示例更易于维护，而不必每次更改示例中的某些内容时都重新制作动画gif。我还希望该页面从手机上快速加载视频也是一种选择，但也存在维护问题。因为所有内容都是文本，所以我希望我可以制作一些JS脚本来显示DB使用示例，当JS被禁用时，示例文本将位于HTML
textarea
，这也将使它可以通过sea进行搜索rch engines.这就是你想要的吗？只是为了好玩而已：看起来很有前途，我没有想过搜索终端记录器。我会试试。看起来很棒！-）很高兴我能帮上点忙。@Kos是的，它看起来很酷。单击“显示示例”以获得我最终得到的更高级的演示
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();

});