jQM stopwatch

by Erik Zanker

HTML

<div data-role="page" id="page1">
  <div data-role="header">
    <h1>Stopwatch</h1>
  </div>
  <div role="main" class="ui-content">

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

  </div>
</div>

CSS

.swTime {
  padding-right: 10px; 
  padding-left:  10px;
}

JavaScript

(function($) {
var Stopwatch = function (elem, options) {

  var timer = createTimer(),
    startButton = createButton("start", start),
    stopButton = createButton("stop", stop),
    resetButton = createButton("reset", reset),
    offset,
    clock,
    interval;

  // default options
  options = options || {};
  options.delay = options.delay || 1;
  
  var $elem = $(elem);

  // append elements     
  $elem.empty()
       .append(timer)
       .append(startButton)
       .append(stopButton)
       .append(resetButton);


  // initialize
  reset();

  // private functions
  function createTimer() {
    return $('<span class="swTime"></span>');
  }

  function createButton(action, handler) {
    var a = $('<a class="' + action + ' ui-btn ui-btn-inline">' + action + '</a>');
    a.on("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();
  }

  function update() {
    clock += delta();
    render();
  }

  function render() {
    timer.text(clock / 1000);
  }

  function delta() {
    var now = Date.now(),
      d = now - offset;

    offset = now;
    return d;
  }

  // public API
  this.start = start;
  this.stop = stop;
  this.reset = reset;
};
  
  $.fn.stopwatch = function(options) {
    return this.each(function(idx, elem) {
      new Stopwatch(elem, options);
    });
  };
})(jQuery);

$(document).on("pagecreate","#page1", function(){ 
	$(".stopwatch").stopwatch();
});