|
Animowanie wyświetlania tekstu
03-08-2006
Poniższy skrypt drukuje kolejne litery tekstu zdefiniowanego w funkcji ArrayInit()
<script language="JavaScript">
<!--
function tekstArrayInit(){
tekst=new Array(4);
tekst[0]="Pierwszy opis drukowany przez javascript";
tekst[1]="Kolejna część opisu";
tekst[2]="tekst numer trzy";
tekst[3]="Ostatnia linijka tekstu.";
}
function PiszText(){
tekstArrayInit();
textToWrite+=tekst[t].substring(position,position+1);
document.getElementById('tekstSpan').innerHTML=textToWrite;
if (position==tekst[t].length-1){
t++
t=t % 4
position=0;
textToWrite="";
speed1=1500;
}
else{
position++;
speed1=40;
}
setTimeout("PiszText()",speed1)
}
function AppInit(){
t=0;
textLen=0;
textToWrite="";
position=0;
PiszText();
}
window.onload=AppInit;
//-->
</script>
<p id="tekstSpan" ></p>
W momencie załadowania strony wykonana zostaje funkcja AppInit inicjująca zmienne oraz wywołana po raz pierwszy zostaje funckja PiszTekst. Zadaniem tej funkcji jest wpisanie do elementu o zadanym id części tekstu zwiększonej o 1 znak względem poprzedniego wywołania, co daje efekt pisania na maszynie, jeżeli tekst został już cały wypisany funkcja wybiera kolejny tekst z tablicy. Na koniec wykonywana jest funkcja setTimeout, która po upływie czasu podanego w milisekundach jako drugi argument wykonuje funkcję podaną jako pierwszy argument. W efekcie co podany okres czasu wywoływana jest funkcja PiszTekst, która za każdym razem wyświetla o 1 znak więcej.
| 
