Beispiel:JS-window-setinterval-1.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0;" />
  <link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" />
  <title>setInterval</title>
  <style>
    body { overflow:hidden }
    div { position: absolute; top:40vw; left:40vh; width:10vmin; height:10vmin; background-color: blue }  
  </style>	
  <script>
'use strict';
document.addEventListener('DOMContentLoaded', function(event) {
	var x = 40, y = 40, dx = 1, dy = 1, phi = 0,
	    div = document.querySelector('div');

	window.setInterval(function() {
		phi += Math.random()-0.5;
		dx = Math.sin(phi);
		dy = Math.cos(phi);
		x += dx;
		y += dy;
		if ( x > 100) {
			x -= 100;
		}
		else if ( x < 0) {
			x += 100;
		}
		if(y>100) {
		    y -= 100;
		}
		else if(y<0) {
			y += 100;
		}
		div.style.left = x +"vw";
		div.style.top  = y +"vh";
	},100);
});
 
  </script>
</head>
<body>
  <h1>Walking Man mit <code>setInterVal()</code></h1>
  <div></div>
</body>
</html>