L'oggetto date di Javascript toLocaleTimeString aggiunge un'ora

Sto cercando di creare un timer da quando l'utente clicca un pulsante. Per fare ciò ho provato a calcolare la differenza tra due oggetti date. Quando stampo la differenza, funziona. Tuttavia la chiamata toLocaleTimeString restituisce una stringa con un'ora in più:

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>

Cosa sto facendo di sbagliato?

Risposta n. 1

Specifica il fuso orario come UTC nell'argomento options. Altrimenti, la data difference verrà regolata in base al fuso orario dell'agente utente.

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

Leggi di più sull'argomento options e su toLocaleTimeString nella documentazione MDN.

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>

Risposta n. 2

A causa dei problemi con JS e i fusi orari, è meglio usare qualcosa come il timezone di moment.js (http://momentjs.com/timezone/) per fare conversioni corrette (che tengano conto dello spostamento del BST, GMT, delle differenze tra i paesi, ecc.). Ai fini del tuo timer, quanto segue funzionerebbe altrettanto bene, ed è più preciso oltre che più semplice da comprendere:

// 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>