在网站上显示当地天气和时间答案

【问题标题】：Display local weather and time on a website在网站上显示当地天气和时间
【发布时间】：2020-10-29 21:59:25
【问题描述】：

我是一个编程新手，最近开始深入研究 JavaScript。我正在尝试在我帮助朋友建立的网站上创建一个小部件。我想在网站上构建一个小部件，显示当前本地时间以供用户浏览，以及他或她所在位置的位置和天气。

到目前为止，我已经设法创建了脚本来为用户显示当地时间，但我无法弄清楚天气应用程序。

我的想法是从客户端请求 IP 地址并将其链接到地理位置，最后链接到天气 API。再说一次，我是这个领域的新手，所以任何帮助都将不胜感激。感觉过去两天我一直在谷歌搜索，但没有任何成功。

到目前为止，我有以下本地时间的代码。

<!DOCTYPE html>
<html>
<head>
<style>
table {
  font-family:Arial, Helvetica, sans-serif;
  font-size:24px;
}   
  
</style>
<script>
function startTime() {
  var today = new Date();
  var h = today.getHours();
  var m = today.getMinutes();
  var s = today.getSeconds();
  m = checkTime(m);
  s = checkTime(s);
  document.getElementById('txt').innerHTML =
  h + ":" + m + ":" + s;
  var t = setTimeout(startTime, 500);
}
function checkTime(i) {
  if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
  return i;
}
</script>
</head>

<body onload="startTime()">
<table>
<tr><td>Current Local Time:</td><td><div id="txt"</div></tr><td></td>
</div>
</table>
</body>
</html>

【问题讨论】：

这能回答你的问题吗？ show local weather using openweathermap api

标签： javascript html api time weather

【解决方案1】：

首先尝试获取用户的位置

现在您需要使用 api 并按该位置进行过滤要做到这一点，有很多方法可以提供帮助，具体取决于 Api 这里有一些建议，您会发现

有些 api 使用经度和纬度，有些使用位置名称。

所以在本例中，您将获取用户位置的纬度和经度，然后在默认为 GET 方法的 fetch 方法中使用它们，如下所示。

<script>
    const getlocation = () => {
        navigator.geolocation.watchPosition(async(pos) => {
            var lat = pos.coords.latitude;
            var long = pos.coords.longitude;
            const url = "https://api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + long;
            const response = await fetch(url);
            const data = await response.json();
            
            console.log(data);
        });
    }
</script>

数据将是 json 因此您可以跳转到 json 对象中的任何必要变量并获取它，例如如果你得到

{
  "coord": { "lon": 139,"lat": 35},
  "weather": [
    {
      "id": 800,
      "main": "Clear",
      "description": "clear sky",
      "icon": "01n"
    }
  ],......

您可以通过这样做创建一个变量并获取天气

const result = data.weather[0];
var id = result.id

请注意该 URL 无效，您需要有一个有效的 API 密钥或使用另一个（如果有）。

【讨论】：

【解决方案2】：

这是一个学习 javascript 的好项目。您对 javascript 的经验越丰富，您就越能了解浏览器的不同 api 功能。其中一项功能是导航器向用户请求地理定位权限并检索数据：

navigator.geolocation.getCurrentPosition( (data) => console.log(data) )

以下链接为您提供了有关浏览器地理定位可能性的更详细的概述 -> html geolocation

您现在可以将这些值发送到从地理位置映射到天气信息的后端。

【讨论】：