JavaScriptillä tekstikirjoitusta

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

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

<script language=”JavaScript” type=”text/javascript”>
<!–
var tl=new Array(“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:

<form action=”none”>
<div align=”center”>
<textarea rows=5 cols=41></textarea>
</div>
</form>

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.

<STYLE TYPE=”text/css”>
<!–
textarea {
border : none;
font-family : Arial, Helvetica, sans-serif;
SCROLLBAR-FACE-COLOR:#FFFFFF;
SCROLLBAR-HIGHLIGHT-COLOR:#FFFFFF;
SCROLLBAR-SHADOW-COLOR:#FFFFFF;
SCROLLBAR-3DLIGHT-COLOR:#FFFFFF;
SCROLLBAR-ARROW-COLOR:#FFFFFF;
SCROLLBAR-TRACK-COLOR:#FFFFFF;
SCROLLBAR-DARKSHADOW-COLOR:#FFFFFF
}
–>
</STYLE>

Lopuksi tallenna tiedosto. Siirrä palvelimelle ja avaa sivu.

Leave a Reply

Your email address will not be published. Required fields are marked *

*