原生js获取天气信息——以和风天气为例

首先要去到对应网站的控制台，查看请求路径和参数，然后直接上源码，这里只展示js，对应的html元素不明白怎么写的话问下AI就行了。

document.addEventListener("DOMContentLoaded", function() {
    const textP = document.getElementById("text");
    const weatherImg = document.getElementById("weatherImg");
  
  
    const humidityP = document.getElementById("humidity");
    const windDirP = document.getElementById("windDir");
    const temp= document.getElementById("temp");
    getResult();
  
    function getResult() {
      const cityID = "101281001"; 
      const url = `https://devapi.qweather.com/v7/weather/now?location=${cityID}&key=your_key`; 
      fetch(url)
        .then(response => response.json())
        .then(data => updateUI(data))
        .catch(() => textP.innerHTML = "获取天气信息失败，请检查城市天气ID");
    }
  
    function updateUI(data) {
      const { now } = data;
      textP.innerHTML = now.text;
      
     
      humidityP.innerHTML = now.humidity;
      windDirP.innerHTML = now.windDir;
      temp.innerHTML = now.temp;
  
      // 根据不同的text值给weatherImg的src属性赋不同的值
      switch (now.text) {
        case "晴":
          weatherImg.src = "/晴.png";
          break;
        case "多云":
          weatherImg.src = "/多云.png";
          break;
        case "阴":
          weatherImg.src = "/阴.png";
          break;
        case "小雨":
          weatherImg.src = "/小雨.png";
          break;
          case "中雨":
          weatherImg.src = "/中雨.png";
          break;
          case "小雨":
          weatherImg.src = "/大雨.png";
          break;
        case "阵雨":
          weatherImg.src = "/阵雨.png";
          break;
          case "雷阵雨":
          weatherImg.src = "/雷阵雨.png";
          break;
          case "暴雨":
          weatherImg.src = "/暴雨到大暴雨.png";
          break;
          case "雪":
          weatherImg.src = "snowy.jpg";
          break;
        default:
          weatherImg.src = "default.jpg";
          break;
      }
    }
  });

效果图如下