实时天气卡片html源码

源码简介

一款实时天气卡片html源码，可将代码嵌入自己的网站中，用户访问时会实时显示本机ip位置的天气。

安装教程

纯HTML，直接将压缩包上传网站目录解压即可(或在本地直接打开)

首页截图

补充

将源码删减了下，可适配子比主题的侧边栏位置，代码如下

<div class="zib-widget widget-tag-cloud author-tag">
        <p id="location">📍 <strong>加载中...</strong></p>
        <p id="date">📅 <strong>加载中...</strong></p>
        <p id="time">⏰ <strong>加载中...</strong></p>
        <div class="weather-info">
            <p>🌡️ 天气状况：<strong id="weather-status">加载中...</strong></p>
            <p>🌡️ 温度：<strong id="temperature">加载中...</strong>℃</p>
            <p>💧 湿度：<strong id="humidity">加载中...</strong>%</p>
            <p>💨 风向：<strong id="wind-direction">加载中...</strong></p>
            <p>💨 风力：<strong id="wind-power">加载中...</strong></p>
        </div>
</div>

    <script>
        // 获取天气数据的API
        const API_URL = "https://api.fenx.top/api/getWeather";

        // 获取当前时间
        function getCurrentTime() {
            const now = new Date();
            const time = now.toLocaleTimeString();
            const date = now.toLocaleDateString();
            document.getElementById("time").querySelector("strong").textContent = time;
            document.getElementById("date").querySelector("strong").textContent = date;
        }

        // 更新天气数据
        async function fetchWeatherData() {
            try {
                const response = await fetch(API_URL);
                const data = await response.json();
                if (data.code === 200) {
                    const weather = data.data.weather;
                    const location = `${data.data.province} ${data.data.city}`;
                    const reportTime = new Date(data.data.weather.reporttime).toLocaleString();

                    // 更新卡片内容
                    document.getElementById("location").querySelector("strong").textContent = location;
                    document.getElementById("weather-status").textContent = weather.weather;
                    document.getElementById("temperature").textContent = weather.temp;
                    document.getElementById("humidity").textContent = weather.humidity;
                    document.getElementById("wind-direction").textContent = weather.winddirection;
                    document.getElementById("wind-power").textContent = weather.windpower;
                    document.getElementById("data-source").querySelector("strong").textContent = data.data.ip;
                    document.getElementById("report-time").querySelector("strong").textContent = reportTime;
                    document.querySelector(".tip").textContent = "阴天也有它的独特魅力，适合静下心来，享受一段宁静的时光。";
                    document.querySelector(".loading").style.display = "none";
                } else {
                    throw new Error("Failed to fetch weather data");
                }
            } catch (error) {
                console.error("Error fetching weather data:", error);
            }
        }

        // 初始化
        fetchWeatherData();
        setInterval(fetchWeatherData, 600000); // 每10分钟更新一次天气数据
        setInterval(getCurrentTime, 1000); // 每秒更新时间
    </script>

效果图：

源码下载