javascript - 使用 JavaScript 将时区偏移数字列表更改为当前时间

Question

我正在表格中显示名称及其时区偏移量的列表。偏移量数字是其时区与 UTC 的偏移量。我需要使用 JavaScript 或 jQuery 更改所有偏移量以显示该人所在时区的当前时间。

我希望发生的是偏移量数字将替换为 calcTime 函数中的当前日期/时间...知道我做错了什么吗？

这是我的代码:

<div class="name">John Doe</div><div class="timezone">-5</div>
<div class="name">Jane Doe</div><div class="timezone">3</div>
<div class="name">Jim Smith</div><div class="timezone">7</div>
<div class="name">Cathy Jones</div><div class="timezone">-3</div>

<script>
$(document).ready(function() {
    setTimeout(() => {
        function calcTime(offset) {
            // create Date object for current location
            d = new Date();
            // convert to msec
            // add local time zone offset
            // get UTC time in msec
            utc = d.getTime() + (d.getTimezoneOffset() * 60000);
            // create new Date object for different city
            // using supplied offset
            nd = new Date(utc + (3600000*offset));
            // return time as a string
            return "The local time is " + nd.toLocaleString();
        }

        $(".timezone").each(function(){
            h = $(this).find(".timezone").text();
            element.innerHTML = calcTime(h); 
        //alert(calcTime('-5'));
        });
    }, 1000);
});
</script>

Answer 1

我认为这就是您试图实现的目标(进行重大更改)。

请注意使用 setInterval() 而不是设置超时以及对 HTML 的结构更改。

const utc = document.querySelector('.utc');
const collection = document.querySelectorAll('.timezone');
const outputs = document.querySelectorAll('.output');
const localeTZoffSet = new Date().getTimezoneOffset()/60 * 3600000;

setInterval(() => {
  utc.textContent = calcTime(0);
  collection.forEach((element, idx) => {
    outputs[idx].textContent = calcTime(element.textContent);
  });
});

function calcTime(offset) {
  return "The local time is " + new Date(Date.now() + localeTZoffSet + (3600000 * offset)).toLocaleTimeString();
}

<div>UTC: <span class="utc"></span></div>
<div class="name">John Doe - <span class="output"></span></div>
<div class="timezone">-5</div>
<div class="name">Jane Doe - <span class="output"></span></div>
<div class="timezone">3</div>
<div class="name">Jim Smith - <span class="output"></span></div>
<div class="timezone">7</div>
<div class="name">Cathy Jones - <span class="output"></span></div>
<div class="timezone">-3</div>