// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <script>

    function calculatePeriod(t1, t2) {
        var dt = t2 - t1;

        var units = [
            {name: 'milliseconds', scale: 1000},
            {name: 'seconds', scale: 60},
            {name: 'minutes', scale: 60},
            {name: 'hours', scale: 24}
        ];

        var result = { };

        for(var i = 0; i < units.length; ++i) {
            var unit = units[i];

            var total = Math.floor(dt / unit.scale);
            var rest = dt - total * unit.scale;

            result[unit.name] = rest;

            dt = total;
        }

        result.days = dt;

        return result;
    }

    function padLeft(number, length, character) {
        if(character == null)
            character = '0';

        var result = number.toString();

        for(var i = result.length; i < length; ++i) {
            result = character + result;
        }

        return result;
    }

  </script>
</head>
<body>
  <div id="display">00:00:00.000</div>
  <button onclick="startStopwatch();">Start</button>
  <button onclick="stopStopwatch();">Stop</button>
  <script>

	var interval = null;
	var display = document.getElementById('display');
    
    function startStopwatch() {
    	if(interval)
          	return;

      	var start = new Date();
      
      	function tick() {
        	var now = new Date();
          	var period = calculatePeriod(start, now);

          	var text = '';
          
          	if (period.days) {
            	text += padLeft(period.days, 2) + ' days ';
            }
          
          	text += padLeft(period.hours, 2) + ':';
          	text += padLeft(period.minutes, 2) + ':';
          	text += padLeft(period.seconds, 2) + '.';
          	text += padLeft(period.milliseconds, 3);
          
          	display.innerText = text;
        }
      
      	interval = setInterval(tick, 10); // once per 10 ms
    }
    
    function stopStopwatch() {
    	if(interval) {
        	clearInterval(interval);

          	interval = null;
        }
    }

  </script>
</body>
</html>

1. Custom stopwatch example

See also