Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
  <style>
    #target {
      position: absolute;
      border: 1px solid black;
      width: 1px;
      height: 1px;
    }
  </style>
</head>
<body>
  <input type="button" id="theButton" value="Start/Stop">
  <div id="target"></div>
  
  <script>
    (function() {
      var radians, maxRadians, target, radius, originX, originY, inc, timer;
      
      radius = 50;
      originX = 100;
      originY = 100;
      
      radians = 0;
      maxRadians = 2 * Math.PI;
      inc = 10 / 360;
      target = document.getElementById("target");
      positionTarget();
      
      function positionTarget() {
        var x, y;
        
        x = originX + (Math.cos(radians) * radius);
        y = originY + (Math.sin(radians) * radius);
        console.log(x + "," + y);
        target.style.left = x + "px";
        target.style.top =  y + "px";
        radians += inc;
        if (radians > maxRadians) {
          radians -= maxRadians;
        }
        timer = setTimeout(positionTarget, 30);
      }
      
      document.getElementById("theButton").onclick = function() {
        if (timer) {
          clearTimeout(timer);
          timer = 0;
        }
        else {
          timer = setTimeout(positionTarget, 30);
        }
      };
    })();
  </script>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers