I'm trying to create a timer from when the user clicks a button. To do this I tried to calculate the difference between two date objects. When I output the difference, it works. However thetoLocaleTimeString call returns a string with an extra hour added:

var start;
var timer;
function myTimer() {
  var current = new Date();
  var difference = new Date(current - start);
  console.log(difference.getTime(), difference.toLocaleTimeString(navigator.language));
  document.getElementById("timer").innerHTML = difference;
  document.getElementById("timer2").innerHTML = difference.toLocaleTimeString('en-GB');
}
start = new Date();
timer = setInterval(myTimer, 1000);
draw();

<h1 id="timer"></h1>
<h1 id="timer2"></h1>

I'm trying to create a timer from when the user clicks a button. To do this I tried to calculate the difference between two date objects. When I output the difference, it works. However thetoLocaleTimeString call returns a string with an extra hour added:

var start;
var timer;
function myTimer() {
  var current = new Date();
  var difference = new Date(current - start);
  console.log(difference.getTime(), difference.toLocaleTimeString(navigator.language));
  document.getElementById("timer").innerHTML = difference;
  document.getElementById("timer2").innerHTML = difference.toLocaleTimeString('en-GB');
}
start = new Date();
timer = setInterval(myTimer, 1000);
draw();

<h1 id="timer"></h1>
<h1 id="timer2"></h1>

What am I doing wrong?

• javascript
• date

• 2 What exactly do you want to acplish here? Is it simply a timer you are trying to make or is the date important to this? – somethinghere Commented Nov 2, 2015 at 17:11
• 2 @somethinghere Was in the process of typing the same ment! Interested to see the desired output. – Drew Gaynor Commented Nov 2, 2015 at 17:13
• @somethinghere Good question! A timer, but I like the format toLocaleTimeString creates so if there is an alternative that matches the format I'd be happy to use it :) (Providing it's fairly concise, I don't want tonnes of of code for something so simple) – jaunt Commented Nov 2, 2015 at 17:13
• The format you can easily do by bining all the functions Date has to offers like Date.getMinutes() etc... – somethinghere Commented Nov 2, 2015 at 17:14
• @somethinghere I tried this but to format hours,minutes,seconds to 2 digits adds even more code to the mess of modulo of minutes by 60 etc. If you can do this in a concise manner, please add it as an answer :) – jaunt Commented Nov 2, 2015 at 17:20

2 Answers 2

Specify the time zone as UTC in the options argument. Otherwise, the difference date will be adjusted to the user agent's time zone.

document.getElementById("timer2").innerHTML = difference.toLocaleTimeString('en-GB', { timeZone: 'UTC' });

Read more on the options argument and toLocaleTimeString in the MDN documentation.

var start;
var timer;
function myTimer() {
  var current = new Date();
  var difference = new Date(current - start);
  console.log(difference.getTime(), difference.toLocaleTimeString(navigator.language));
  document.getElementById("timer").innerHTML = difference;
  document.getElementById("timer2").innerHTML = difference.toLocaleTimeString(navigator.language, { timeZone: 'UTC', hour12: false });
}
start = new Date();
timer = setInterval(myTimer, 1000);
draw();

<h1 id="timer"></h1>
<h1 id="timer2"></h1>

Because of the problems with JS and timezones, you are better of using something like moment.js's timezone (http://momentjs./timezone/) to do correct conversions (that keep in mind the shift of BST, GMT, differences between countries, etc..). For the purpose of your timer, the following would work as well, and is more accurate as well as simpler to reason about:

// Use Date.now() to get the time in milliseconds for this local puter
var start = Date.now();
var time  = new Date();
// This function will prepend a 0 to a number lower than 10
function prependZero(v){
  if(v < 9) return '0' + v;
  else return v;
}
var timer = setInterval(function() {
    // Calculate the difference using the puters local time strings
    var difference = new Date(Date.now() - start);
    document.getElementById("timer").innerHTML = new Date();
    // Now use the Date mnethods to get the correct output:
    document.getElementById("timer2").innerHTML = prependZero(difference.getHours()) + ':' + prependZero(difference.getMinutes()) + ':' + prependZero(difference.getSeconds());
}, 1000);

<h1 id="timer"></h1>
<h1 id="timer2"></h1>