调用和风天气API，页脚显示天气预报

[jesustoachild]

1. 和风天气API和KEY申请，参考：
   https://github.com/c1pher-cn/heweather

2 显示效果如下：

<div class="weather-panel">
    <span id="weather-info"></span>
</div>

<style>
    .weather-panel {
        color: white;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        text-align: right;
    }

    #weather-info {
        line-height: 1.2;
    }

    .weather-main {
        display: flex;
        justify-content: space-between;
        width: 100%;
        margin-bottom: 6px;
    }

    .weather-main-left {
        font-size: 16px;
    }

    .temp-and-forecast {
        display: flex;
        justify-content: space-between;
        width: 100%;
        font-size: 12px;
        margin-bottom: 6px;
    }

    .temp-range {
        text-align: left;
    }

    .hourly-forecast {
        text-align: right;
        padding-left: 8ch; /* 添加 8 个字符宽度的空隙 */
    }

    .wind-info {
        display: flex;
        justify-content: space-between;
        width: 100%;
        font-size: 12px;
        margin-bottom: 6px;
    }

    .wind-info span {
        flex: 1;
    }

    .air-quality {
        text-align: left;
    }
</style>

<script>
    /* 和风API 申请 https://github.com/c1pher-cn/heweather */
    const apiKey = "和风API KEY";
    const locationId = "101010100"; /*北京*/

    let weatherText, currentTemp, tempMax, tempMin, windDir, windScale, airCategory, pm2p5, pm10;

    async function fetchCurrentWeather() {
        try {
            const response = await fetch(`https://devapi.qweather.com/v7/weather/now?location=${locationId}&key=${apiKey}`);
            const data = await response.json();
            
            if (data.code === "200") {
                weatherText = data.now.text;
                currentTemp = data.now.temp;
                windDir = data.now.windDir; 
                windScale = data.now.windScale; 
                updateWeatherDisplay();
                fetchWeatherForecast();
            } else {
                console.error("获取当前天气数据失败，错误代码:", data.code);
            }
        } catch (error) {
            console.error("无法获取当前天气数据:", error);
        }
    }

    async function fetchWeatherForecast() {
        try {
            const response = await fetch(`https://devapi.qweather.com/v7/weather/3d?location=${locationId}&key=${apiKey}`);
            const data = await response.json();
            
            if (data.code === "200") {
                const todayWeather = data.daily[0];
                tempMax = todayWeather.tempMax; 
                tempMin = todayWeather.tempMin;
                updateWeatherDisplay();
                fetchAirQuality();
            } else {
                console.error("获取天气预报数据失败，错误代码:", data.code);
            }
        } catch (error) {
            console.error("无法获取天气预报数据:", error);
        }
    }

    async function fetchAirQuality() {
        try {
            const response = await fetch(`https://devapi.qweather.com/v7/air/now?location=${locationId}&key=${apiKey}`);
            const data = await response.json();
            
            if (data.code === "200") {
                airCategory = data.now.category;
                pm2p5 = data.now.pm2p5;
                pm10 = data.now.pm10;
                updateWeatherDisplay();
                fetchHourlyForecast();
            } else {
                console.error("获取空气质量数据失败，错误代码:", data.code);
            }
        } catch (error) {
            console.error("无法获取空气质量数据:", error);
        }
    }

    async function fetchHourlyForecast() {
        try {
            const response = await fetch(`https://devapi.qweather.com/v7/weather/24h?location=${locationId}&key=${apiKey}`);
            const data = await response.json();
            
            if (data.code === "200") {
                const hourlyForecast = data.hourly.slice(0, 2);
                
                const forecastText = hourlyForecast.map(hour => {
                    const hourTime = new Date(hour.fxTime).getHours();
                    const hourTemp = hour.temp;
                    return `${hourTime}时 ${hourTemp}℃`;
                }).join(" ");
                
                document.getElementById("hourly-forecast").textContent = forecastText;
            } else {
                console.error("获取未来小时预报数据失败，错误代码:", data.code);
            }
        } catch (error) {
            console.error("无法获取未来小时预报数据:", error);
        }
    }

    function updateWeatherDisplay() {
        document.getElementById("weather-info").innerHTML = 
            `<div class="weather-main">
                <span class="weather-main-left">${weatherText} ${currentTemp}℃</span>
             </div>
             <div class="temp-and-forecast">
                <span class="temp-range">${tempMin}℃ - ${tempMax}℃</span>
                <span class="hourly-forecast" id="hourly-forecast"></span>
             </div>
             <div class="wind-info">
                <span class="air-quality">${airCategory} PM2.5:${pm2p5}</span>
                <span>${windDir} ${windScale}级</span>
             </div>`;
    }

    fetchCurrentWeather();
    setInterval(fetchCurrentWeather, 3600000); /* 每小时刷新一次预报 */
</script>

[kj10086]

大神，用不了啊，完全没反应啊，打开检查第一句就是错误，有没有具体点的使用办法啊

[wintsa123]

你填key了吗...

[beichen123-hub]

天气不准确呀 城市Id啥的都对了