Tips & Tricks: Animation im Textfeld


Diesmal erlauben wir uns eine kleine Spielerei. Wir mißbrauchen ein Texteingabefeld, um eine Animation zu erzeugen, die folgendermaßen aussieht:

Um diese Animation zu erzeugen, benötigen wir folgendes Script im Header-Bereich: 


        var id,value=0,max=50;

        function start() {

        var i,k;
        var icon="~";
        var speed=100;
        var msg="";


        for(i=0;i<value;i++){

        msg=msg+icon;

  }

  document.form.start.value=msg;

  if(value++==max) {

  value=0;

 }


  id=setTimeout("start()",1000/speed);

}


Unter max geben Sie die Länge des Textfeldes an. In der Variablen icon können Sie eine beliebiges Zeichen eingeben, mit dem die Animation ausgeführt wird. Unter speed legen Sie die Geschwindigkeit der Animation fest (je niedriger die Zahl, desto geringer die Geschwindigkeit) und unter msg können Sie einen Text definieren, der dann am Anfang des Textfeldes steht. Als nächstes benötigen wir eine onLoad-Anweisung im Body, um das Script automatisch auszuführen: 


<BODY onLoad="start()">


Das einzige was nun noch fehlt, ist die Angabe zum Textfeld, inder die Animation ausgeführt wird. Hierzu binden Sie folgendes Script an der gewünschten Stelle im Dokument ein: 


document.write('<form name="form"> 
<input type="text" name="start" size="');
document.write(max);
document.write('"></form>');