JavaScriptillä tekstikirjoitusta

JavaScriptillä tekstikirjoitusta

Javascriptillä saa kivannäköistä tekstikirjoitusta aikaiseksi pienellä vaivalla.

Esimerkki:

Itse JavaScriptin osuus on alla, joka laitetaan <HEAD> </HEAD> tagien väliin.

"Tämän pitäisi näyttää siltä, kuin joku kirjoittaisi sivulle kokoajan tekstiä.",
" ",
"Ja kun jonkun aikaa on mennyt, niin jatketaan.",
"Myös toisellekin riville",
" ",
" ",
" ",
" ",
"Ja jatkuu :).",
" ",
" ",
" ",
" ",
" ",
" ",
"Ja tätä voi jatkaa niin pitkään kuin haluaa.",
" ",
" ",
" ",
" ",
"ja lopetetaan!"
);
var speed=60;
var index=0; text_pos=0;
var str_length=tl[0].length;
var contents, row;

function type_text()
{
contents='';
row=Math.max(0,index-4);
while(row<index)
contents += tl[row++] + '\r\n';
document.forms[0].elements[0].value = contents + tl[index].substring(0,text_pos) + "_";
if(text_pos++==str_length)
{
text_pos=0;
index++;
if(index!=tl.length)
{
str_length=tl[index].length;
setTimeout("type_text()",1000);
}
} else
setTimeout("type_text()",speed);

}
-->
</script>

Jotta JavaScriptillä tehty Functio ajetaan kun sivu avataan, laitetaan <BODY> aloitustagiin seuraavanlainen lisä:

onLoad="type_text()"

mm. tällä sivulla <Body> aloitustagi näyttää seuraavanlaiselta.

<body bgcolor="#FFFFFF" text="#000000" onLoad="type_text()">

Jotta teksti lataantuu tekstikenttään, niin tekstikenttä täytyy tietenkin luoda ja se luodaan FORMiin:

Tekstikenttä on normaalin näköinen ja jos haluaa että sitä ei näy, kuten esimerkissä, niin tyyleillä saa piilotettua scrollbarin sekä tekstikentän rajaukset. Se onnistuu seuraavanlaisella koodilla, olettaen että sivun taustana käytetään valkoista. ja tämäkin osa laitetaan <HEAD> </HEAD> tagien väliin ennen Javascript osuutta.

Lopuksi tallenna tiedosto. Siirrä palvelimelle ja avaa sivu, jolloin sinullakin on esimerkin vastainen näkymä edessäsi.

Takaisin etusivulle | Palaa ylös