Einfaches Terminal mit HTML und jQuery

jQuery Terminalemulation

07. August 2011

Wer erinnert sich nicht an die Vorfahren unserer heutigen Computer, die Terminals der 70er und frühen 80er Jahre, wo sich Text zeitverzögert am Bildschirm langsam aufbaut und man zur Eingabe eines Kommandos aufgefordert wird.

Das lässt sich leicht mit Hilfe von HTML und etwas jQuery nachbauen. Man nehme eine eindeutig anzusprechende Textarea (id="myArea") und baue sich ein jQuery-Plugin.

Erstmal Demo ansehen?

(function($)
{
  $.fn.terminal = function(input, options, callback) 
  { 
    var settings = {
      'speed': 50
    };
    return this.each(function()
    {  
      if (options) 
      { 
        $.extend( settings, options );
      }
      var chars = input.split("");
      var iterator = 0;
      var txtarea = $(this);
      $(txtarea).val('');
      var settxt = function()
      {
        if(iterator < chars.length)
        {
          var x = $(txtarea).val();
          var y = x + chars[iterator]; 
          var delay = 30 + Math.floor(Math.random() * settings.speed);
          $(txtarea).val(y); 
          iterator++;
          setTimeout(function(){settxt()}, delay);
        }
        else
        {
          if(jQuery.isFunction(callback))
          {
            callback.call(this);
          }
          return true;
        }
      } 
      setTimeout(function(){settxt()}, 10);
    });
  };
})(jQuery);


Das lässt sich nun einfach starten, indem man der Textbox die soeben verfasste Funktion zuweist, mit oder ohne Callback bzw. Options:

$(document).ready(function () 
{
  $("#myArea").terminal("Hello World!", {'speed': 55}, function()
  {
    alert("Finished!");
  });
});