stopwatch using javascript

Using Javascript, HTML, CSS (canvas not used)

HTML

<body>
  <div class="wrapper">
    <div id="watch-dial" class="tile">00:00:00</div>
    <button id="start-stop" class="tile action-button start-button">Start</button>
    <button id="reset-lap" class="tile action-button reset-button">Reset</button>
    <ul id="laps">
    </ul>
  </div>
</body>

CSS

body{
  background-color: #1d1d1d;
}

.wrapper{
  position: fixed;
  top: 50px;
  left: 0;
  right: 0;
  display: inline-block;
  margin: auto;
  width: 300px;
  height: 50px;
}

#start-stop{
  float: left;
}

#reset-lap{
  float: right;
}

.tile{
  border: none;
  display: block;
  border-radius: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -o-border-radius: 0;
  -webkit-box-shadow: inset 0px 0px 1px #FFFFCC;
  -moz-box-shadow: inset 0px 0px 1px #FFFFCC;
  -o-box-shadow: inset 0px 0px 1px #FFFFCC;
  box-shadow: inset 0px 0px 1px #FFFFCC;
}

.action-button{
  cursor: pointer;
  color: white;
  font-size: 1em;
  padding: 5px;
  margin: 0;
  margin-top: 10px;
  width: 70px;
}

.action-button:hover{
  outline: #999999 solid 1px;
}

.start-button{
  background-color: #60a917;
}

.lap-button{
  background-color: #4390df;
}

.reset-button, .stop-button{
  background-color: #9a1616; 
}

#watch-dial{
  background-color: #333333;
  font-size: 2.5em;
  font-family: monospace;
  text-align: center;
  color: white;
  padding: 15px;
}

#laps{
  margin-top: 70px;
  height: 400px;
  overflow-y: auto;
  color: white;
  list-style: none;
  padding: 0px;
}

#laps > li{
  border-color: white;
  width: 100%;
  display: inline-block;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
  font-family: monospace;
  font-size: 1.5em;
}

JavaScript

/* stopwatch.js Start */
(function(){
  /*
    polyfills for IE8
  */
  if(!Array.prototype.forEach){
    Array.prototype.forEach = function(callback){
      for(var i=0; i<this.length; i++){
        callback(this[i]);
      }      
    }
  }

  if(!Array.prototype.map){
    Array.prototype.map = function(callback){
      var items = [];
      for(var i=0; i<this.length; i++){
        items.push(callback(this[i]));
      }
      return items;
    }
  }

  var secondInMilliseconds = 1000;
  var minuteInMilliseconds = 60*secondInMilliseconds;
  var hourInMilliseconds = 60*minuteInMilliseconds;
  var floor = Math.floor;

  var extractMilliseconds = function(timeInMilliseconds){
    return timeInMilliseconds % 1000;
  }
  var extractSeconds = function(timeInMilliseconds){
    return floor(timeInMilliseconds/secondInMilliseconds);
  }
  var extractMinutes = function(timeInMilliseconds){
    return floor(timeInMilliseconds/minuteInMilliseconds);
  }
  var extractHours = function(timeInMilliseconds){
    return floor(timeInMilliseconds/hourInMilliseconds);
  }
  var pad = function(number){
    if(number < 10){
      return "0"+number;
    }else{
      return number;
    }
  }
  var extractTime = function(timeInMilliseconds){
    var hours = extractHours(timeInMilliseconds);
    timeInMilliseconds -= hours*hourInMilliseconds;
    var minutes = extractMinutes(timeInMilliseconds);
    timeInMilliseconds -= minutes*minuteInMilliseconds;
    var seconds = extractSeconds(timeInMilliseconds);
    timeInMilliseconds -= seconds*secondInMilliseconds;
    var milliseconds = timeInMilliseconds;
    return {hours: hours, minutes: minutes, seconds: seconds, milliseconds: milliseconds};
  }

  // Lap object which gives the time elapsed between two given laps
  var Lap = function(netTime, previousLap){
    this.previousLap = previousLap;
    this.netTime = netTime; //netTime is in milliseconds
  };

  Lap.prototype = {
    militaryTime: function(timeInMilliseconds){     
      var...