HTML5 天气预报 互动版

在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

获取数据成功,为占位符绑定数据

通过getWeatherInfo()方法,获取此输入城市的天气情况,并为预留位置绑定数据。并获取一组未来五天天气的情况。

function weaterInfoDownloaded(data) {
    $('#city').val(selectedCity);
    //$('#city').val(data.query.results.channel.location.city);
    $('#deg').html(data.query.results.channel.item.condition.temp + " °" + unit.toUpperCase());
    setImage(data.query.results.channel.item.condition.code, $('#big')[0]);
    for (var i = 0; i <= 4; i++) {
        var fc = data.query.results.channel.item.forecast[i];
        $('#forecast' + i).html(fc.day);
        setImage(fc.code, $("#forecastimg" + i)[0]);
        $('#forecastdeg' + i).html((parseInt(fc.low) + parseInt(fc.high)) / 2 + " °" + unit.toUpperCase());
    }
}