Beispiel:JS-window-setinterval-2.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Random Walk</title>
<style>
body { overflow-x:hidden; }
main { -webkit-column-count:2; column-count:2; padding: 1em;}
main > p:first-child { margin-top:0 }
#Wanderer { position: fixed; top:40vh; left:40vw; transition: all linear 0.1s }
</style>
<script>
"use strict"
document.addEventListener("DOMContentLoaded", function(event) {
var x=40, y=40, dx, dy, phi = 0,
wanderer = document.querySelector("#Wanderer");
window.setInterval(function() {
phi += Math.random()-0.5;
dx = Math.cos(phi);
dy = Math.sin(phi);
x += dx;
y += dy;
wanderer.style.transition = "all linear 0.1s";
if(x>100) {
x -= 100;
wanderer.style.transition = "none";
}
else if(x<0) {
x += 100;
wanderer.style.transition = "none";
}
if(y>100) {
y -= 100;
wanderer.style.transition = "none";
}
else if(y<0) {
y += 100;
wanderer.style.transition = "none";
}
wanderer.style.left = x +"vw";
wanderer.style.top = y +"vh";
wanderer.style.transform = "translate(-50%,-50%) rotate("+phi+"rad)";
},100);
});
</script>
</head>
<body>
<img id="Wanderer" src="//wiki.selfhtml.org/images/c/c6/Fliege.png" alt="Foto einer Fliege">
<h1>Die Fliege</h1>
<main>
<p>Dem Herrn Inspektor tut's so gut<br>
Wenn er nach Tisch ein wenig ruht.</p>
<p>Da kommt die Fliege mit Gebrumm<br>
und surrt ihm vor dem Ohr herum.</p>
<p>Und aufgeschreckt aus halbem Schlummer,<br>
Schaut er verdrießlich auf den Brummer.</p>
<p>Die böse Fliege! Seht, nun hat se<br>
Sich festgesetzt auf seiner Glatze.</p>
<p>"Wart nur, du unverschämtes Tier!<br>
Anitzo aber komm' ich dir!!"</p>
<p>Behutsam schleicht er nach der Tasse,<br>
Daß er die Fliege da erfasse.</p>
<p>Perdauz! - Darin ist er gewandt -<br>
Er hat sie wirklich in der Hand.</p>
<p>Hier schaut er nun mit großer List,<br>
Wo sie denn eigentlich wohl ist.</p>
<p>Surr! - Da! Sie ist schon wieder frei.<br>
Ein Bein, das ist ihr einerlei.</p>
<p>Jetzt aber kommt er mit der Klappe,<br>
Daß er sie so vielleicht ertappe.</p>
<p>Und um sie sicher zu bekommen,<br>
Hat er den Sorgenstuhl erklommen.</p>
<p>Rumbums! Da liegt der Stuhl und er.<br>
Die Fliege flattert froh umher.</p>
<p>Da holt er aus mit voller Kraft,<br>
Die Fliege wird dahingerafft.</p>
<p>Und fröhlich sieht er das Insekt<br>
Am Boden leblos ausgestreckt.</p>
<p>Erquicklich ist die Mittagsruh,<br>
Nur kommt man oftmals nicht dazu.</p>
<p><q>Wilhelm Busch</q><br><a href="http://www.wilhelm-busch-seiten.de/werke/bilderbogen/fliege.html">Quelle</a></p>
</main>
</body></html>
