如何使用JavaScript在网站上自动更新天气数据（JSON）？

Question

嗨，我正在尝试创建一个显示当前天气的网站（目前在3个城市）。我的问题是，当交换机处于ON位置时，我不知道如何只获取要更新的JSON数据。（所以我不想在间隔后重新加载页面，我只是想在一段时间后自动更新温度等。）

这是该网站的图片：

这是我的实施。似乎无法弄清楚这一点，因为在我看来这应该有效：D现在盯着这个太久了。

JavaScript的

function setup() {
  var dropinput = document.getElementById("city-dropdown");
  var value = dropinput.options[dropinput.selectedIndex].value;
  var url = api + value + units + apiKey;
  fetch(url).then(
    function(response) {
    if (response.status !== 200) {
      console.log('Looks like there was a problem. Status Code: ' +
      response.status);
      return;
    }
    response.json().then(function(data) {
      document.getElementById("temp").innerHTML = 'Temperature: ' + data.main.temp + ' Celsius'
      document.getElementById("wind").innerHTML = 'Wind: ' + data.wind.speed + ' m/s'
      document.getElementById("humidity").innerHTML = 'Humidity: ' + data.main.humidity + '%'
    });
    }
  )

}

var interval = null;

function autoupdate() {
  var checkBox = document.getElementById("switch");
  if (checkBox.checked == true) {
    interval = setInterval(setup(), 1000);
  } else {
    clearInterval(interval);
  }
}

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="slideshow.js"></script>
</head>
<body onload="setup()">
<div class="container">

  <h1>Check the weather!</h1>
  <fieldset>
    <form action="/" method="post">
      <select name="city" id="city-dropdown">
          <option value="Helsinki">Helsinki</option>
          <option value="Turku">Turku</option>
          <option value="Kuusamo">Kuusamo</option>
      </select>
      <button class="nappi" type="button" onclick="setup()">Get weather</button>
    </form>
  </fieldset>
  <p id="temp">Temperature: </p>
  <p id="wind">Wind: </p>
  <p id="humidity">Humidity: </p>

</div>

<div class="update">
    <p id="autoupdate">Auto-update:</p>
    <label class="switch">
      <input type="checkbox" id="switch" onclick="autoupdate()">
      <span class="slider round"></span>
    </label>
  </div>
  </body>
  </html>

Answer 1

你需要这样做：

setInterval(function(){setup()}, 1000);

如何使用JavaScript在网站上自动更新天气数据（JSON）？

问题描述投票：0回答：1

JavaScript的

HTML

1个回答

最新问题

如何使用JavaScript在网站上自动更新天气数据（JSON）？

问题描述 投票：0回答：1

JavaScript的

HTML

1个回答

最新问题

问题描述投票：0回答：1