HEY HO! - let's go!

Snippet 2: setTimeout()...

...damit das Tier Aufmerksamkeit erhält. Beim body onload wird die Funktion weinen() aufgerufen, die einen sog. Oneshot-Timer setzt. setTimeout() erhält in diesem Fall zwei Parameter:

die Aktion, die nach der Zeit passieren soll, hier "document.getElementById( 'tierchen' ).src = 'images/tier_traurig.png';"; und die Zeit, nach der die Aktion läuft, hier 3000. Die Zeit wird immer in Millisekunden angegeben, und 1 Sekunde = 1000 Millisekunden. Man muss aber nicht lange rechnen, man kann auch schreiben: 5*60*1000. Damit setzt man den Timer auf 5 Minuten.

<!DOCTYPE html>
<html>
  <head>
    <title>Dein grünes Tier weint schnell</title>

<script type="text/javascript">
function begruessen() {
var benutzer = prompt("Ich brauch Aufmerksamkeit! - Wie heißt Du?",↵
"Gib deinen Namen ein.");
if (benutzer) {
alert("Freut mich, Dich kennen zu lernen, " + benutzer + ".");
document.getElementById("tierchen").src = "images/tier_gluecklich.png";
        }
      }
	  
function weinen() {
setTimeout("document.getElementById('tierchen').src='images/tier_traurig.png';",↵
3000);
	  }
	  
if (window.opener)
document.write("<a id='popup_close' href='#'↵
onclick='self.close();'>Demofenster schließen</a>");
	  
</script>
  </head>

<body onload=weinen();>
	
<div style="margin-top:100px; text-align:center">
<img id="tierchen" src="images/tier_neutral.png" alt="Klick zum Trösten"↵
title="Klick zum Trösten" style="cursor:pointer" onclick="begruessen();" />
</div>

</body>
</html>

Please note: die Pfeilchen ↵ sind bei der Wiederverwertung zu löschen: wird der Code kopiert, werden an deren Stelle Fragezeichen generiert, Achtung deshalb! Bitte keinen manuellen Zeilenumbruch an diesen Stellen. Die Abrage if(window.opener)... bitte ebenfalls löschen, wenn Seite nicht als PopUp aufgerufen wird.