Question

16

How to create a stopwatch using JavaScript?

rated 0 times [ 23] [ 7] / answers: 1 / hits: 157542 / 11 Years ago, mon, december 2, 2013, 12:00:00

if(stopwatch >= track[song].duration)

track[song].duration finds the duration of a soundcloud track.

I am looking to create a stopwatch function that starts counting milliseconds when you click on the swap ID stopwatch so that when the function has been clicked for a certain amount of time the if function will do something. In my case replace an image. And also that the function will reset it itself when clicked again.

so like stopwatch = current time - clicked time How can I set up the clicked time

current time = new Date().getTime(); ? And is this in milliseconds?

$('#swap').click(function()...

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

trinity

Add To Favorites

Follow

Total Points: 591

Total Questions: 102

Total Answers: 106

Location: Singapore

Member since Sun, Jul 25, 2021

3 Years ago

answered 11 Years ago isham · Accepted Answer

You'll see the demo code is just a start/stop/reset millisecond counter. If you want to do fanciful formatting on the time, that's completely up to you. This should be more than enough to get you started.

This was a fun little project to work on. Here's how I'd approach it

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;



  // append elements     

  elem.appendChild(timer);

  elem.appendChild(startButton);

  elem.appendChild(stopButton);

  elem.appendChild(resetButton);



  // initialize

  reset();



  // private functions

  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 = 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;

};





// basic examples

var elems = document.getElementsByClassName(basic);



for (var i = 0, len = elems.length; i < len; i++) {

  new Stopwatch(elems[i]);

}





// programmatic examples

var a = document.getElementById(a-timer);

aTimer = new Stopwatch(a);

aTimer.start();



var b = document.getElementById(b-timer);

bTimer = new Stopwatch(b, {

  delay: 100

});

bTimer.start();



var c = document.getElementById(c-timer);

cTimer = new Stopwatch(c, {

  delay: 456

});

cTimer.start();



var d = document.getElementById(d-timer);

dTimer = new Stopwatch(d, {

  delay: 1000

});

dTimer.start();

.stopwatch {

  display: inline-block;

  background-color: white;

  border: 1px solid #eee;

  padding: 5px;

  margin: 5px;

}



.stopwatch span {

  font-weight: bold;

  display: block;

}



.stopwatch a {

  padding-right: 5px;

  text-decoration: none;

}

<h2>Basic example; update every 1 ms</h2>



<p>click <code>start</code> to start a stopwatch</p>



<pre>

var elems = document.getElementsByClassName(basic);

  

for (var i=0, len=elems.length; i&lt;len; i++) {

  new Stopwatch(elems[i]);

}

</pre>

<div class=basic stopwatch></div>

<div class=basic stopwatch></div>



<hr>

<h2>Programmatic example</h2>



<p><strong>Note:</strong> despite the varying <code>delay</code> settings, each stopwatch displays the correct time (in seconds)</p>



<pre>

var a = document.getElementById(a-timer);

aTimer = new Stopwatch(a);

aTimer.start();

</pre>

<div class=stopwatch id=a-timer></div>1 ms<br>



<pre>

var b = document.getElementById(b-timer);

bTimer = new Stopwatch(b, {delay: 100});

bTimer.start();

</pre>

<div class=stopwatch id=b-timer></div>100 ms<br>



<pre>

var c = document.getElementById(c-timer);

cTimer = new Stopwatch(c, {delay: 456});

cTimer.start();

</pre>

<div class=stopwatch id=c-timer></div>456 ms<br>



<pre>

var d = document.getElementById(d-timer);

dTimer = new Stopwatch(d, {delay: 1000});

dTimer.start();

</pre>

<div class=stopwatch id=d-timer></div>1000 ms<br>

Get some basic HTML wrappers for it

<!-- create 3 stopwatches -->

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

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

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

Usage is dead simple from there

var elems = document.getElementsByClassName("stopwatch");



for (var i=0, len=elems.length; i<len; i++) {

    new Stopwatch(elems[i]);

}

As a bonus, you get a programmable API for the timers as well. Here's a usage example

var elem = document.getElementById("my-stopwatch");

var timer = new Stopwatch(elem, {delay: 10});



// start the timer

timer.start();



// stop the timer

timer.stop();



// reset the timer

timer.reset();

jQuery plugin

As for the jQuery portion, once you have nice code composition as above, writing a jQuery plugin is easy mode

(function($) {

    var Stopwatch = function(elem, options) {

    // code from above...

    };



    $.fn.stopwatch = function(options) {

    return this.each(function(idx, elem) {

        new Stopwatch(elem, options);

    });

    };

})(jQuery);

jQuery plugin usage:

// all elements with class .stopwatch; default delay (1 ms)

$(".stopwatch").stopwatch();



// a specific element with id #my-stopwatch; custom delay (10 ms)

$("#my-stopwatch").stopwatch({delay: 10});

jsbin.com demo