Stopwatch

by Bianca Kuehweidner

HTML

Quelle: http://jsbin.com/IgaXEVI/167/edit?html,output
<br/>

<div class="stopwatch" id="timer"></div>

CSS

.stopwatch {
    display: inline-block;
    background-color: #fff;
    border: 1px solid #000;
    padding: 5px;
    margin: 5px;
  }
  
.stopwatch span {
  display: block;
}

JavaScript

var Stopwatch = function(elem, options) {
  
  var timer       = createTimer(),
      clock,
      interval;
  
  // default options
  options = options || {};
  options.delay = options.delay || 1;
 
  // append elements     
  elem.appendChild(timer);
  
  // initialize
  reset();
  
  // private functions
  function createTimer() {
    return document.createElement("span");   
    //return $("<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 reset() {
    clock = 0;
    render(0);
  }
  
  function update() {
    clock += delta();
    render();
  }
  
  function render() {
    timer.innerHTML = clock/1000; 
  }
  
  function delta() {
    var now = Date.now(),
        d   = now - offset;    
    offset = now;
    return d;
  }
  
  // public API
  this.start  = start;
};


var a = document.getElementById("timer");
aTimer = new Stopwatch(a);
aTimer.start();