Timer

by Josh Pullen

HTML

<div id="bigOlWrapper">
    <div class="basic stopwatch"></div>
</div>
<div id="credit">Made by <a href="#">PullJosh</a>.</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Inconsolata:700);

body {
    text-align:center;
    background:#06737E;
}
#bigOlWrapper {
    height:100% !important;
    text-align:center;
}
.stopwatch {
    display:inline-block;
    height:276px;
    position:absolute;
    top:50%;
    left:0px;
    margin-top:-138px;
    width:100%;
    color:white;
}
.stopwatch span {
    font-weight: bold;
    display: block;
    font-size:300px;
    font-family: 'Inconsolata';
    font-weight:700;
    line-height:250px;
  }
  .stopwatch a {
    padding-right: 5px;
    text-decoration: none;
    color:white;
  }
.stopwatch a:hover {
    color:#ddd;
}
a[href="#start"]:after, a[href="#stop"]:after {
    content:" •";
    margin:0px 5px;
    color:white !important;
}
#credit {
    position:fixed;
    bottom:3px;
    left:5px;
    color:#4A99A1;
}
#credit a {
    color:inherit;
}
#credit a:hover {
    color:#77B3B9;
}

JavaScript

var Stopwatch = function(elem, options) {
  
  var timer       = createTimer(),
      startButton = createButton("start", start),
      stopButton  = createButton("stop", stop),
      resetButton = createButton("reset", reset),
      offset,
      clock,
      interval;
  options = options || {};
  options.delay = options.delay || 1;     
  elem.appendChild(timer);
  elem.appendChild(startButton);
  elem.appendChild(stopButton);
  elem.appendChild(resetButton);
  reset();
  function createTimer() {
    return document.createElement("span");
  }
  function createButton(action, handler) {
    var a = document.createElement("a");
    a.href = "#" + action;
    a.innerHTML = action;
    a.addEventListener("click", function(event) {
      handler();
      event.preventDefault();
    });
    return a;
  }
  function start() {
    if (!interval) {
      offset   = Date.now();
      interval = setInterval(update, options.delay);
    }
  }
  function stop() {
    if (interval) {
      clearInterval(interval);
      interval = null;
    }
  }
  function reset() {
    clock = 0;
    render(0);
  }
  function update() {
    clock += delta();
    render();
  }
  function render() {
    timer.innerHTML = formatTime(Math.round(clock/1000));
  }
  function delta() {
    var now = Date.now(),
        d   = now - offset;
    offset = now;
    return d;
  }
  this.start  = start;
  this.stop   = stop;
  this.reset  = reset;
};
var elems = document.getElementsByClassName("basic");
for (var i=0, len=elems.length; i<len; i++) {
  new Stopwatch(elems[i]);
}
function formatTime(sec) {
    var seconds;
    var minutes;
    var hours;
    if(sec % 60 < 10) {
        seconds = '0'.concat((sec % 60).toString());
    } else {
        seconds = (sec % 60).toString();
    }
    if(((sec - (sec % 60)) / 60) % 60 < 10) {
        minutes = '0'.concat(  ((sec - (sec % 60)) / 60) % 60);
    } else {
        minutes = ((sec - (sec % 60)) / 60) % 60;
    }
    if( (((sec - (sec % 60)) / 60) - (((sec...