كائن التاريخ في جافاسكريبت toLocaleTimeString يضيف ساعة

أنا أحاول إنشاء مؤقت من اللحظة التي ينقر فيها المستخدم على زر. للقيام بذلك، حاولت حساب الفرق بين كائنين من نوع date. عند عرض الفرق، يعمل الأمر. ومع ذلك، فإن استدعاء toLocaleTimeString يعيد سلسلة تحتوي على ساعة إضافية:

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>

ما الخطأ الذي أفعله؟

الإجابة رقم 1

حدد المنطقة الزمنية على أنها UTC في الوسيطة options. وإلا، فسيتم تعديل تاريخ difference وفقًا لمنطقة زمنية وكيل المستخدم.

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

اقرأ المزيد عن الوسيط options وtoLocaleTimeString في وثائق 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>

الإجابة رقم 2

بسبب المشاكل مع JS والمناطق الزمنية، من الأفضل لك استخدام شيء مثل مكتبة moment.js الخاصة بالمناطق الزمنية (http://momentjs.com/timezone/) لإجراء التحويلات الصحيحة (التي تأخذ في الاعتبار تغيير BST وGMT والفروقات بين الدول، إلخ..). لأغراض المؤقت الخاص بك، يمكن أن يعمل ما يلي أيضًا، وهو أكثر دقة وكذلك أبسط للفهم:

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