Countdown Timer

http://stackoverflow.com/questions/26432305/adding-milliseconds-to-timer-in-html

by moob

HTML

<script src="http://www.cornify.com/js/cornify.js"></script>
<div id="timer"></div>

CSS

#timer {font-family:sans-serif; font-size:2em; text-shadow:2px 2px #fff;}
#cornifycount {display:none;}

JavaScript

function countdownTimer(el,duration){
    var exp = Date.now() + duration;//expires in now + duration milliseconds
    
    //callback using window.requestAnimationFrame if available else setTimeout at 60fps:
    var rAF = window.requestAnimationFrame || function(callback){window.setTimeout(callback,1000/60);};
    
    //left-pad with leading zeros
    function pad(n,s){
        s = s||2;
        return ("00000"+n).substr(-s);
    }
    
    //The loopy bit:
    //note the use of a bitwise right-shift to convert to int (http://jsperf.com/number-vs-parseint-vs-plus/39)
    (function update() {
      var n = Date.now(),
          e = (exp-n),
          ms= (e%1000),
          s = ((e/1000)%60) >> 0,
          m = ((e/(1000*60))%60) >> 0,
          h = ((e/(1000*60*60))%24) >> 0;
      if (e > 0) {
          el.innerHTML = pad(h)+":"+pad(m)+":"+pad(s)+":"+pad(ms,3);
          rAF(update);
      } else {
          el.innerHTML = "00:00:00:000";
          boom();//or whatever
      }
    })();//IIFE (Immediately-Invoked Function Expression)
          

};

function boom(){
    var i=30;
    document.body.style.backgroundColor="black";
    while(i--){
        cornify_add();
    }
}

countdownTimer(document.getElementById('timer'),10000);