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

我要在一个表中显示姓名列表及其时区偏移数。偏移数是他们的时区与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>

我认为这就是你想要达到的目标。

注意使用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>

在@RandyCasburn的帮助下，我能够让这个工作:

$(document).ready(function() {
const collection = document.querySelectorAll('.timezone');
const outputs = document.querySelectorAll('.output');
function calcTime(offset) {
d = new Date();
utc = d.getTime() + (d.getTimezoneOffset() * 60000);
nd = new Date(utc + (3600000*offset));
return nd.toLocaleString();
}
setInterval(() => {
collection.forEach((element, idx) => {
outputs[idx].textContent = calcTime(element.textContent);
$(".timezone").hide();
});
});
});
<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>

非常感谢!

如果我得到正确的问题…oo (lol)
你希望显示每个用户的实时基于他们的UTC偏移量。

我将把用户时区放在一个数据属性中，以确保方便使用。

然后:

创建一个本地时间对象(页面呈现的地方)
从本地时间获取UTC偏移量和本地小时。
计算页面查看器与"其他用户"之间的偏移
含义…作为一个页面查看器，我在GMT-5时区，第一个用户(在您的HTML中)与我的偏移量为零。正确吗?
所以从本地时间和本地GMT偏移量开始，添加&;实时时差&;。

.setHours()

将其设置为字符串，并删除"GMT-…"因为这部分现在不准确。

下面是包含所有console.logs的示例:

console.clear();
$(document).ready(function () {
function calcTime(offset) {
// That is a date object with the user's timezone
let refDate = new Date();
// So what is the user's timezone?
let userTimezone = refDate.getTimezoneOffset() / 60;
console.log("userTimezone", userTimezone);
// What is the user's Hour?
let localHour = refDate.getHours();
console.log("localHour", localHour);
// Make the calculation here
let timeZoneDiff = offset + userTimezone;
console.log("timeZoneDiff", timeZoneDiff);
// Set the hour... But we still are in a "timezoned object"
// and the .setHours returns milliseconds. ;(
let hourRearanged = refDate.setHours(localHour + timeZoneDiff);
console.log("hourRearanged", hourRearanged);
// So re-generate a date object from that "arranged hour"
let semiResult = new Date(hourRearanged).toString();
console.log("semiResult were the part after GMT is wrong:", semiResult);
console.log("---------------------------------------");

// Rturn the part before "GMT"
return semiResult.split("GMT")[0];
}
setInterval(() => {
$(".name").each(function (index, element) {
h = parseInt($(element).data("timezone"));
$(element).next(".userTime").html(calcTime(h));
});
}, 1000);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="name" data-timezone="-5">John Doe (GMT-5)</div>
<div class="userTime">-5</div>
<div class="name" data-timezone="3">Jane Doe (GMT+3)</div>
<div class="userTime">3</div>
<div class="name" data-timezone="7">Jim Smith (GMT+7)</div>
<div class="userTime">7</div>
<div class="name" data-timezone="-3">Cathy Jones (GMT-3)</div>
<div class="userTime">-3</div>

请以整页模式运行…

相关内容

最新更新

热门标签：