JavaScript - Beispiel-Quelltext
<HTML>
<HEAD>
<TITLE>JavaScript - Übungen</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
// Hier beginnen die JavaScript-Anweisungen
// Feld fuer Bilder anlegen
var img = new Array();
img[0] = new Image();
img[0].src = "../img/js-img1.jpg";
img[1] = new Image();
img[1].src = "../img/js-img2.jpg";
img[2] = new Image();
img[2].src = "../img/js-img3.jpg";
img[3] = new Image();
img[3].src = "../img/js-img4.jpg";
img[4] = new Image();
img[4].src = "../img/js-img5.jpg";
// Feld fuer Namen
var nam = new Array();
nam[0] = "Dom zu Fulda";
nam[1] = "Bonifatius";
nam[2] = "Sturmius";
nam[3] = "Simplizius";
nam[4] = "Faustius";
// Indexzaehler
var ind = 0;
// Timeout fuer Veraenderung
var tim = 5000;
// Timeout-Variable
var out;
function initShow() {
// Bildname ausgeben
window.document.forms[0].elements[0].value = nam[ind];
// Bild aendern
window.document.images[0].src = img[ind].src;
// Index hochzaehlen
ind = ind + 1;
return;
}
function startShow() {
// Timeout ruecksetzen
window.clearTimeout(out);
// Zaehler anpassen
if(ind > 4)
ind = 0;
// Bildname ausgeben
window.document.forms[0].elements[0].value = nam[ind];
// Bild aendern
window.document.images[0].src = img[ind].src;
// Index hochzaehlen
ind = ind + 1;
// Timeout setzen
if(window.document.forms[0].elements[3].options[0].selected)
tim = 500;
else if(window.document.forms[0].elements[3].options[1].selected)
tim = 1000;
else if(window.document.forms[0].elements[3].options[2].selected)
tim = 2000;
else if(window.document.forms[0].elements[3].options[3].selected)
tim = 3000;
else if(window.document.forms[0].elements[3].options[4].selected)
tim = 5000;
else
tim = 10000;
out = window.setTimeout("startShow()", tim);
return;
}
function stopShow() {
// Timeout ruecksetzen
window.clearTimeout(out);
// Bild und Name ruecksetzen und ausgeben
ind = 0;
window.document.forms[0].elements[0].value = nam[ind];
window.document.images[0].src = img[ind].src;
return;
}
// Hier enden die JavaScript-Anweisungen
// -->
</SCRIPT>
</HEAD>
<BODY onLoad="initShow();">
<H2>JavaScript - Übungen</H2>
<HR>
<CENTER>
<H3>Diashow</H3>
<IMG SRC="../img/js-img1.jpg" WIDTH="250" HEIGHT="375" BORDER="1">
<FORM>
<INPUT TYPE="text" SIZE="16">
<P>
<INPUT TYPE="button" VALUE="Diashow starten" onClick="startShow();">
<INPUT TYPE="button" VALUE="Diashow anhalten" onClick="stopShow();">
Nächstes Bild in
<SELECT>
<OPTION>0,5 Sekunden
<OPTION>1 Sekunde
<OPTION>2 Sekunden
<OPTION>3 Sekunden
<OPTION SELECTED>5 Sekunden
<OPTION>10 Sekunden
</SELECT>
</FORM>
</CENTER>
<HR>
</BODY>
</HTML>