如何根据 api 的结果更改背景图像？

Question

更改背景图像的功能：

function backgroundChange(checkDay) {
  if (checkDay === 0) {
    document.body.style.backgroundImage = "url('night.jpg')";
  } else if (checkDay === 1) {
    document.body.style.backgroundImage = "url('day.jpg')";
  }
}

从 api 获取结果的函数
使用的 api 是： https ://rapidapi.com/weatherapi/api/weatherapi-com/ 我直接从上面的链接使用了 axios(js) 的实时天气 api 功能

const options = {
  method: "GET",
  url: "https://weatherapi-com.p.rapidapi.com/current.json",
  params: { q: "Los angeles" },
  headers: {
    "X-RapidAPI-Key": "API_KEY",
    "X-RapidAPI-Host": "weatherapi-com.p.rapidapi.com"
  }
};



var checkDay;
axios
  .request(options)
  .then(function (response) {
    console.log("-->", response.data.current.is_day);
    checkDay = response.data.current.is_day;
    console.log(checkDay);
  })
  .catch(function (error) {
    console.error(error);
  });

Answer 1

您提供的相同代码对我有用。 请检查您是否有一些组件（和附加的样式）设置完全重叠主体。

这是我尝试过的，只需更改 API_key 即可：

 function getWeatherInfo() { var location = document.getElementById("location").value; var options = { method: "GET", url: "https://weatherapi-com.p.rapidapi.com/current.json", params: { q: location }, headers: { "X-RapidAPI-Key": "API_Key", "X-RapidAPI-Host": "weatherapi-com.p.rapidapi.com", }, }; console.log(options); var checkDay; axios .request(options) .then(function (response) { console.log("-->", response.data.current.is_day); checkDay = response.data.current.is_day; console.log(checkDay); document.getElementById("results").innerHTML = JSON.stringify(response); if (checkDay === 0) { document.body.style.backgroundImage = "url('night.jpg')"; } else if (checkDay === 1) { document.body.style.backgroundImage = "url('day.jpg')"; } }) .catch(function (error) { console.error(error); }); }

 body{ background-color: lightseagreen; } #results{ height:600px; width:100%; background-color: white; }

 <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> <script src="getWeather.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <h1>Weather</h1> <input id="location" type="text" value="Los Angeles" placeholder="enter location here"> <button onclick="getWeatherInfo()">Get Weather Info</button> <main> <code id="results"></code> </main> </body> </html>

如何根据 api 的结果更改背景图像？

问题描述

1 个解决方案

解决方案1
0 已采纳 2022-07-12 11:23:05

如何根据 api 的结果更改背景图像？

问题描述

1 个解决方案

解决方案1 0 已采纳 2022-07-12 11:23:05

解决方案1
0 已采纳 2022-07-12 11:23:05