<div class="box" id="div">
    click me!!!
  </div>

html{
      background: #f2f2f2;
    }
.box{
  width:100px;
  height:100px;
  line-height: 100px;
  text-align: center;
  background: #fff;
  box-shadow: 0 10px 20px rgba(0,0,0,0.5);
  position: absolute;
}
.box:hover{
  cursor:pointer;
}

var stats = new Stats();
stats.showPanel( 0 );
document.body.appendChild( stats.dom );
function moveDiv(div, fps) {
  var left = 0;
  var param = 1;
  function loop() {
    update();
    draw();
  }
  function update() {
    stats.begin();
    left += param * 2;
    if (left > 300) {
      left = 300;
      param = -1;
    } else if (left < 0) {
      left = 0;
      param = 1;
    }
    stats.end();
  }

  function draw() {
    div.style.left =  left + 'px';
  }
  setInterval(loop, 1000 / fps);
}
moveDiv(document.getElementById('div'), 60);

function runForSeconds(s) {
    var start = +new Date();
    while (start + s * 100 > (+new Date())) {}
}

document.getElementById('div').addEventListener("click", function () {
  runForSeconds(10);
}, false);