Stopwatch

Simple counter to show in message box for idle timeout warning.

by Ben

HTML

<div style="PADDING-BOTTOM: 15pt; PADDING-TOP: 15pt; PADDING-LEFT: 15pt; PADDING-RIGHT: 15pt" class="text-center">You have been working for a while without submitting your changes.<br>It is recommended that you submit your changes often.</div>

<div id="timer-text">timer shown here</div>

CSS

body {
  color: #DAD6D6;
  background: #171A21;
  text-align: center;
}

JavaScript

// Ideas taken from:
//    https://codepad.co/snippet/YMYUDYgr
//		https://www.w3schools.com/js/tryit.asp?filename=tryjs_timing_clock

/*
var seconds = 0,
  minutes = 0,
  hours = 0;

function add() {
  seconds++;
  if (seconds >= 60) {
    seconds = 0;
    minutes++;
    if (minutes >= 60) {
      minutes = 0;
      hours++;
    }
  }

  document.getElementById('timer-text').innerHTML = (hours ? (hours > 9 ? hours : "0" + hours) : "00") + ":" + (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":" + (seconds > 9 ? seconds : "0" + seconds);

  timer();
}

function timer() {
  t = setTimeout(add, 1000);
}
timer();

*/

// https://codereview.stackexchange.com/questions/109308/simple-javascript-timer-function
var startTime = Date.now();
var second = 1000;
var minute = second * 60;
var hour = minute * 60;
var container = document.getElementById('timer-text');
/*
function pad(n){
  return ('00' + n).slice(-2);
}

var timer = setInterval(function(){
  var currentTime = Date.now();
  var difference = currentTime - startTime;

  var hours = pad((difference / hour) | 0);
  var minutes = pad(((difference % hour) / minute) | 0);
  var seconds = pad(((difference % minute) / second) | 0);

  container.innerHTML = hours + ':' + minutes + ':' + seconds;

// This only represents time between renders. Actual time rendered is based
// on the elapsed time calculated above.
}, 500);
*/


function timer() {
	var currentTime = Date.now();
	var difference = currentTime - startTime;

	var hours = pad((difference / hour) | 0);
	var minutes = pad(((difference % hour) / minute) | 0);
	var seconds = pad(((difference % minute) / second) | 0);

	container.innerHTML = hours + ':' + minutes + ':' + seconds;

	// This only represents time between renders. Actual time rendered is based
	// on the elapsed time calculated above.
    var t = setTimeout(timer, 500);
}

timer();