API tools faq
paste
Advertisement
RandomGuy32

Bewegliches HTML

RandomGuy32
Feb 11th, 2014
288
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 2.79 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3. <title>
  4.     Test: Bewegliches HTML
  5. </title>
  6. <meta name="author" content="Eiffel" />
  7. <script type="text/javascript">
  8.         var moveAmountVertical;
  9.         var moveAmountHorizontal;
  10.        
  11.     function init() {
  12.         moving = document.getElementById("moving");
  13.         moving.style.position = "absolute";
  14.         moving.style.top = 50 + "px";
  15.         moving.style.left = 50 + "px";
  16.         moving.style.color = "#ff0000";
  17.         moving.style.backgroundColor = "#0000ff";
  18.         moving.style.fontWeight = "bold";
  19.         moveDirection = "forward";
  20.         }
  21.        
  22.     function changeColour() {
  23.         moving.style.color = "#0000ff";
  24.         moving.style.backgroundColor = "#ff0000";
  25.         window.setTimeout("changeColour2()", 100);
  26.         }
  27.  
  28.     function changeColour2() {
  29.         moving.style.color = "#ff0000";
  30.         moving.style.backgroundColor = "#0000ff";
  31.         window.setTimeout("changeColour()", 100);
  32.         }
  33.        
  34.     function move() {
  35.         // An Wendepunkten Richtung umschalten
  36.         if ((moving.style.left == "50px") && (moving.style.top == "50px")) {
  37.             moveDirection = "forward";
  38.             moveAmountVertical = 1;
  39.             moveAmountHorizontal = 1;
  40.             }
  41.         if ((moving.style.left == "500px") && (moving.style.top == "300px")) {
  42.             moveDirection = "backward";
  43.             moveAmountVertical = 1;
  44.             moveAmountHorizontal = 1;
  45.             }
  46.         // Bewegungsrichtung vorwärts
  47.         if (moveDirection == "forward") {
  48.             // horizontale Bewegung bis zum Punkt left=500px
  49.             if (moving.style.left != "500px") {
  50.                 // neue Position festlegen
  51.                 moving.style.left = 50 + parseInt(moveAmountHorizontal) + "px";
  52.                 // moveAmountHorizontal um 1 erhöhen
  53.                 moveAmountHorizontal++;
  54.                 }
  55.             // vertikale Bewegung bis zum Punkt top=300px
  56.             else if (moving.style.top != "300px") {
  57.                 // neue Position festlegen
  58.                 moving.style.top = 50 + parseInt(moveAmountVertical) + "px";
  59.                 // moveAmountVertical um 1 erhöhen
  60.                 moveAmountVertical++;
  61.                 }
  62.             }
  63.         // Bewegungsrichtung rückwärts
  64.         if (moveDirection == "backward") {
  65.             // vertikale Bewegung bis zum Punkt top=50px
  66.             if (moving.style.top != "50px") {
  67.                 // neue Position festlegen
  68.                 moving.style.top = 300 - parseInt(moveAmountVertical) + "px";
  69.                 // moveAmountVertical um 1 verringern
  70.                 moveAmountVertical++;
  71.                 }
  72.             // horizontale Bewegung bis zum Punkt left=50px
  73.             else if (moving.style.left != "50px") {
  74.                 // neue Position festlegen
  75.                 moving.style.left = 500 - parseInt(moveAmountHorizontal) + "px";
  76.                 // moveAmountHorizontal um 1 verringern
  77.                 moveAmountHorizontal++;
  78.                 }
  79.             }
  80.         // alle 10 Millisekunden wiederholen
  81.         window.setTimeout("move()", 10);
  82.         }
  83. </script>
  84. </head>
  85. <body onLoad="init()">
  86. <p id="moving">Test</p>
  87. <input id="btnColor" type="button" value="Farbe" onClick="changeColour()" />
  88. <input id="btnMove" type="button" value="Bewegen" onClick="move()" />
  89. <noscript>
  90.     Bitte JavaScript einschalten
  91. </noscript>
  92. </body>
  93. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!