HTML5 天气预报 互动版

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

页面初始化

加载页面,会根据默认给定的城市(北京),拼一个sql语句通过天气预报api,查询woeid – 用来识别天气预报城市的地区代号;

function init() {
    getWoeid(selectedCity);
}
function getWoeid(city) {
    var woeidYQL = 'select woeid from geo.placefinder where text="' + city + '"&format=json';
    var jsonURL = baseYahooURL + woeidYQL;
    $.getJSON(jsonURL, woeidDownloaded);
}

function woeidDownloaded(data) {
    var woeid = null;
    if (data.query.count <= 0) {
        $('#city').val("No city found");
        $('#deg').html("");
        setImage(999, $("#big")[0]);
        for (var i = 0; i <= 4; i++) {
            $('#forecast' + i).html("");
            setImage(999, $("#forecastimg" + i)[0]);
            $('#forecastdeg' + i).html("");
        }
        return;
    } else if (data.query.count == 1) {
        woeid = data.query.results.Result.woeid;
    } else {
        woeid = data.query.results.Result[0].woeid;
    }
    console.log(woeid);  // 识别天气预报城市的地区代号
    getWeatherInfo(woeid);
}