Untitled

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
<style id="jsbin-css">
#area {
  background-color: #ccc;
  width: 100px;
  height: 100px;
  position: absolute;
}

#block {
  position: relative;
  width: 20px;
  height: 20px;
  background-color: #666;
  margin-top: 0px;
  margin-left: 0px;
}
</style>
</head>
<body>
  <div id="area">
    <div id="block"></div>
  </div>
<script id="jsbin-javascript">
var block = document.getElementById('block');
var block_style = window.getComputedStyle(block);
var area = 100;

var initial_top = parseInt(block_style.marginTop);
var initial_left = parseInt(block_style.marginLeft);
var finish_top = initial_top + area - parseInt(block_style.width);
var finish_left = initial_left + area - parseInt(block_style.height);
var step = 1;

setInterval(function() {
    var top = parseInt(block_style.marginTop);
    var left = parseInt(block_style.marginLeft);
    if (top == initial_top && left < finish_left) {
        left += step;
        left = Math.min(left, finish_left);
    }
    else if (left >= finish_left && top < finish_top) {
        top += step;
        top = Math.min(top, finish_top);
    }
    else if (top >= finish_top && left > initial_left) {
        left -= step;
        left = Math.max(left, initial_left);
    }
    else if (left <= initial_left && top > initial_top) {
        top -= step;
        top = Math.max(top, initial_top);
    }
    block.style.marginTop = top + 'px';
    block.style.marginLeft = left + 'px';
}, 10);
</script>


<script id="jsbin-source-css" type="text/css">#area {
  background-color: #ccc;
  width: 100px;
  height: 100px;
  position: absolute;
}

#block {
  position: relative;
  width: 20px;
  height: 20px;
  background-color: #666;
  margin-top: 0px;
  margin-left: 0px;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">var block = document.getElementById('block');
var block_style = window.getComputedStyle(block);
var area = 100;

var initial_top = parseInt(block_style.marginTop);
var initial_left = parseInt(block_style.marginLeft);
var finish_top = initial_top + area - parseInt(block_style.width);
var finish_left = initial_left + area - parseInt(block_style.height);
var step = 1;

setInterval(function() {
    var top = parseInt(block_style.marginTop);
    var left = parseInt(block_style.marginLeft);
    if (top == initial_top && left < finish_left) {
        left += step;
        left = Math.min(left, finish_left);
    }
    else if (left >= finish_left && top < finish_top) {
        top += step;
        top = Math.min(top, finish_top);
    }
    else if (top >= finish_top && left > initial_left) {
        left -= step;
        left = Math.max(left, initial_left);
    }
    else if (left <= initial_left && top > initial_top) {
        top -= step;
        top = Math.max(top, initial_top);
    }
    block.style.marginTop = top + 'px';
    block.style.marginLeft = left + 'px';
}, 10);</script></body>
</html>