显示特定位置的时间

Question

我已经能够使用WorldTimeAPI:提取特定城市的温度

jQuery.getJSON("https://api.openweathermap.org/data/2.5/weather?q=Rome&units=metric&appid=ab85ba57bbbb423fb62bfb8201126ede", function(data) {
console.log(data);
var temp = Math.floor(data.main.temp);
jQuery(".temp").append(temp  + '°C');
});

现在我正在尝试以特定格式检索日期/时间(4月14日| 14:37(

jQuery.getJSON("http://worldtimeapi.org/api/timezone/Europe/Italy/Rome", function showDateTime() {
var myDiv = document.getElementById("date-time");
var date = new Date();
// var dayList = ["DOM", "LUN", "MAR", "MER", "GIO", "VEN", "SAB"];
var monthNames = [
"GEN",
"FEB",
"MAR",
"APR",
"MAG",
"GIU",
"LUG",
"AGO",
"SET",
"OTT",
"NOV",
"DEC"
];
var dayName = dayList[date.getDay()];
//  var monthName = monthNames[date.getMonth()];
var today = `${date.getDate()} ${monthName}`;
var hour = date.getHours();
var min = date.getMinutes();
var time = hour + ":" + min;
myDiv.innerText = `${today} | ${time}`;
}
setInterval(showDateTime, 0);

它拉时间，它是实时的，但我的当地时间，而不是罗马(我需要指向的位置，我成功地通过API获得了温度。

从其他地方连接时，如何获取罗马的时间/日期？我需要始终显示罗马的当前时间/日期，而不是用户访问的时间/日期。

非常感谢！

Answer 1

根据文档，

OpenWeather对所有API使用Unix时间和UTC/GMT时区通话，包括当前天气、预报和历史天气数据

从"；UNIX时间"；ECMAScript日期对象已在此处得到答复。

OP中的查询返回位置数据：

"lon": -85.1647,
"lat":  34.257

而意大利的罗马则处于

"lat": 41.9
"lon": 12.483 

所以你错了"罗马"；。您可以更改查询以包含国家/地区代码q=Rome,IT，您将获得预期罗马的数据。

使用oncall API和上述坐标或4月14日更新的查询返回日出和日落为：

"sunrise":1649910690,
"sunset":1649958530

可以使用将其转换为罗马(意大利(的当地时间

let opts = {timeZone:'Europe/Rome', timeZoneName:'short', hour12:false};
let sunrise = new Date(1649910690 * 1000).toLocaleString('en-CA', opts)
let sunset = new Date(1649958530 * 1000).toLocaleString('en-CA', opts)
console.log(`Sunrise: ${sunrise}n` +
`Sunset : ${sunset}`);

如果您想用其他格式设置日期和时间的格式，那么关于设置日期的格式有很多问题。在这种情况下，您可能会使用以下内容：

// Format date as 14 APR | 14:37
function myFormat(loc, date = new Date()) {
let {month, day, hour, minute} = new Intl.DateTimeFormat('en', {
day: 'numeric',
month: 'short',
hour: 'numeric',
minute: '2-digit',
timeZone: loc,
hour12: false
}).formatToParts(date).reduce((acc, part) => {
acc[part.type] = part.value;
return acc;
}, Object.create(null));
return `${day} ${month.toUpperCase()} | ${hour}:${minute}`;
}
// Current local date
console.log(`Current local time: n${myFormat()}`);
// Date in Rome, Italy for supplied UNIX time value
console.log(`Sunrise for Rome, Italy local time:n` +
`${myFormat('Europe/Rome', new Date(1649910690 * 1000))}`
);

Answer 2

使其工作的关键是JS的toLocaleString((和相关函数。在这里可以找到许多格式选项。

OP似乎为世界时间API(Europe/Italy/Rome(使用了错误的url，但片段(Europe/Rome(中使用的url产生了合理的响应：

let timer;
let baseTime;
getRomeTime().then(result => baseTime = result);
document.getElementById('start').onclick = () => {
updateTime(0); // edit: start right away
timer = setInterval(updateTime(1000), 1000);
};
document.getElementById('stop').onclick = () => {
clearInterval(timer);
};
function getRomeTime() {
const url = "http://worldtimeapi.org/api/timezone/Europe/Rome"
fetch(url)
.then(r => r.json())
.then(r => {
return new Date(r.datetime);
});
}
// add offset ms to the baseTime and update the DOM
function updateTime(offset) {
baseTime = new Date(baseTime.getTime() + offset);
const localeOptions = {
timeZone: 'Europe/Rome',
dateStyle: 'full',
timeStyle: 'full'
};
const timetag = document.getElementById('timetag');
timetag.innerText = d.toLocaleString('it-IT', localeOptions)
}

<p>L'ora è: <span id="timetag"></span></p>
<button id="start">Start</button>
<button id="stop">Stop</button>

另一个编辑：时间提供程序可能不适合频繁调用。在这种情况下，我们可以通过调用一次来近似相同的结果，然后用客户端上计算的时间更新时间。

下面的片段只获取一次罗马时间，然后每秒将时间增加一秒。

let timer;
let romeTime;
window.onload = () => {
getRomeTime().then(result => {
romeTime = result;
updateTime(0)
timer = setInterval(() => updateTime(1000), 1000);
});
};
function getRomeTime() {
const url = "http://worldtimeapi.org/api/timezone/Europe/Rome"
return fetch(url)
.then(r => r.json())
.then(r => {
return new Date(r.datetime);
});
}
// add offset ms to the baseTime and update the DOM
function updateTime(offset) {
romeTime = new Date(romeTime.getTime() + offset);
const localeOptions = {
timeZone: 'Europe/Rome',
dateStyle: 'full',
timeStyle: 'full'
};
const timetag = document.getElementById('timetag');
timetag.innerText = romeTime.toLocaleString('it-IT', localeOptions)
}

<p>L'ora è: <span id="timetag"></span></p>