Ha többször is meg akarjuk tekinteni a program működését, akkor frissíteni kell a weboldalt.

Két megjelenési formátum kerül bemutatásra:
- Az első példában normál megjelenésű szövegek láthatók.
- A második részben, mely lentebb látható, kiszínezzük a megjelenéseket.

Időzítést, a window.setTimeout () függvénnyel állítjuk be. Elvárt időintervallumot a zárójelek között határozzuk meg. ( 1másodperc = 1000 )

Figyeljünk oda:
Mikor alkalmazunk idézőjelet (" "), egyes aposztrófot ( ' ' ), vesszőt ( , ) és pontosvesszőt ( ; )

A program megírása, HTML oldalon:
<div class="div1">
<h3 id="h3cimsor5">

<script language="JavaScript" type="text/javascript" >

var idelem=document.getElementById? document.getElementById("h3cimsor5") :
document.all? document.all.h3cimsor5: ""
{
window.setTimeout ("idelem.innerHTML = ('Bemutató! Etelt idő = 2 másodperc ! ' ) " , 2000);
window.setTimeout ("idelem.innerHTML = ('Etelt idő = 3 másodperc ! ' ) " , 3000);
window.setTimeout ("idelem.innerHTML = ('Etelt idő = 4 másodperc ! ' ) " , 4000);
window.setTimeout ("idelem.innerHTML = ('Etelt idő = 5 másodperc ! ' ) " , 5000);
window.setTimeout ("idelem.innerHTML = ('Etelt idő = 6 másodperc ! ' ) " , 6000);
window.setTimeout ("idelem.innerHTML = ('Etelt idő = 7 másodperc ! ' ) " , 7000);
window.setTimeout ("idelem.innerHTML = ('Etelt idő = 8 másodperc ! ' ) " , 8000);
window.setTimeout ("idelem.innerHTML = ('Etelt idő = 9 másodperc ! ' ) " , 9000);
window.setTimeout ("idelem.innerHTML = ('Etelt idő = 10 másodperc ! ' ) " , 10000);
window.setTimeout ("idelem.innerHTML = ('Letelt az idő, bemutatónak V É G E ! ' ) " , 11000);
}

</script>

</h3>
</div>

CSS, azaz stílusmeghatározása a div szakasznak:
div1 {width: 800px; height: 80px; border: 1px solid #ccc; text-align: center;}

A leírási példákban látható, hogy a JavaScript programunk, közvetlen a h3-as jelölőelemek között helyezkedik el, így biztos megjelennek az időzítésnek megfelelő szövegek.

Ha külön JavaScript, azaz js fájlban írjuk meg programunkat, a scriptet meghívó utasítást:
- Közvetlen a jelölőcímkék között, vagy a dokumentumunk végén helyezzük el.

 

---

 

Második példa, stílusok meghatározása

A színezett program megírása, HTML oldalon:
<div class="div1">
<h3 id="h3cimsor6">

<script language="JavaScript" type="text/javascript" >

var idelem2=document.getElementById? document.getElementById("h3cimsor6") :
document.all? document.all.h3cimsor6: ""

{ idelem2.style.backgroundColor="yellow";
window.setTimeout ( "idelem2.innerHTML = ('Bemutató! Etelt idő = 2 másodperc ! ' ) " , 2000);
window.setTimeout ( "idelem2.innerHTML = ('Etelt idő = 3 másodperc ! ' ) " , 3000);
window.setTimeout ( "idelem2.innerHTML = ('Etelt idő = 4 másodperc ! ' ) " , 4000);
window.setTimeout ("idelem2.innerHTML = ('Etelt idő = 5 másodperc ! ' ); idelem2.style.backgroundColor='fuchsia'; idelem2.style.color='blue'; " ,5000);
window.setTimeout ( "idelem2.innerHTML = ('Etelt idő = 6 másodperc ! ' ) " , 6000);
window.setTimeout ( "idelem2.innerHTML = ('Etelt idő = 7 másodperc ! ' ); idelem2.style.backgroundColor='red'; " , 7000);
window.setTimeout ( "idelem2.innerHTML = ('Etelt idő = 8 másodperc ! ' ); idelem2.style.fontSize='20px'; " , 8000);
window.setTimeout ( "idelem2.innerHTML = ('Etelt idő = 9 másodperc ! ' ) " , 9000);
window.setTimeout ( "idelem2.innerHTML = ('Etelt idő = 10 másodperc ! ' ) " , 10000);
window.setTimeout ( "idelem2.innerHTML = ('Letelt az idő, bemutatónak V É G E ! ' ); idelem2.style.color='white'; idelem2.style.backgroundColor='black'; idelem2.style.fontSize='28px'; idelem2.style.border='3px solid yellow'; idelem2.style.padding='5px'; " , 11000);
}

</script>
</h3>
</div>

CSS, azaz stílusmeghatározása a div szakasznak:
div1 {width: 800px; height: 80px; border: 1px solid #ccc; text-align: center;}

A stílusok meghatározásánál figyeljünk oda:
- Ha, csak az első sorban látható stílust határozzuk meg, akkor a továbbiakban, minden megjelenésre ez lesz a jellemző.
- Ha az első stílus után, egy másik sorban is meghatározunk stílust, akkor a további sorokra, az lesz a mérvadó.
- Ha a további sorok közül, valamelyikben meghatározunk stílust, akkor az azt követő további sorokra, az lesz a mérvadó.

 

E M L É K E Z T E T Ő !
Szín meghatározások

- white Fehér
- silver Ezüst
- gray Szürke
- maroon Gesztenyebarna
- red Piros
- purple Püspöklila
- fuchsia Világoslila
- green Zöld(sötétzöld)
- lime Világoszöld
- olive Olajzöld
- yellow Sárga
- navy Mélykék(sötét)
- blue Kék
- teal Pávakék
- aqua Akvamarinkék
- orange Narancssárga

 

 

Vissza a lap elejére