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

请您参考如下方法:

我根据 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(); 
 
});