<div class="box" id="div">
  </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;
    }
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);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://rawgit.com/mrdoob/stats.js/master/build/stats.js