player_timer

by TimPietrusky

HTML

<div id="timer">click</div>
<div id="shit"></div>

CSS

#timer, #shit {
  position:absolute;
  left:5px;
  width:50px;
  height:50px;
  background: rgba(200,0,0,.5);
  font-size: larger;
  color: white;
  border-radius: 10px;
  padding: 1em;
}

#shit {
    left:150px;
    background: rgba(0,200,0,.5);
}

JavaScript

var startTime = undefined;
var timer = $('#timer');
var returnID;
var stop = false;

window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame || 
          window.webkitRequestAnimationFrame || 
          window.mozRequestAnimationFrame || 
          window.oRequestAnimationFrame || 
          window.msRequestAnimationFrame || 
          function(/* function FrameRequestCallback */ callback, /* DOMElement Element */ element){
            window.setTimeout(callback, 1000 / 60);
          };
})();

timer.click(function(event) {
    (function animloop(){
        
        if (!stop) {
            timer.css('left', '+=5');
            returnID = requestAnimFrame(animloop, timer);
        } 
        
        timer.html(returnID);
        
        if (parseFloat(timer.css('left')) > 400) {
            timer.css('left', 5);
        }
        
        if (returnID >= 40) {
            stop = true;
        }
    })();
});