Javascripts date-objekt tilLocaleTimeString legger til en time

Jeg prøver å lage en timer fra når brukeren klikker på en knapp. For å gjøre dette prøvde jeg å beregne forskjellen mellom to date-objekter. Når jeg skriver ut forskjellen, fungerer det. Imidlertid returnerer toLocaleTimeString-kallet en streng med en ekstra time lagt til:

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>

Hva gjør jeg galt?

Svar #1

Spesifiser tidssonen som UTC i options-argumentet. Ellers vil difference-datoen bli justert til brukeragentens tidssone.

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

Les mer om options-argumentet og toLocaleTimeString i MDN-dokumentasjonen.

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>

Svar #2

På grunn av problemene med JS og tidssoner, er det bedre å bruke noe som moment.js's timezone (http://momentjs.com/timezone/) for å gjøre riktige konverteringer (som tar hensyn til skiftet av BST, GMT, forskjeller mellom land, osv.). For formålet med din timer, vil følgende også fungere, og er både mer nøyaktig samt enklere å forstå:

// Use Date.now() to get the time in milliseconds for this local computer
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 computers 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>