html代码获取天气预报实例

天气预报是我们日常生活中很重要的一部分，通过网上获取天气预报是很方便的。本文将介绍通过HTML代码获取天气预报的实例。

    !DOCTYPE html>
        html>
        head>
            title>
    获取天气预报实例/title>
        /head>
        body>
            h1>
    获取天气预报实例/h1>
            p>
    请输入您的城市名称: /p>
            form id="form1">
                input type="text" id="city" name="city" />
                input type="button" id="btn" value="查询" onclick="getWeather()" />
            /form>
            p id="result">
    /p>
            script>
            function getWeather(){
                    var city = document.getElementById("city").value;
                    var xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function(){
                        if(xhr.readyState == 4 &
    &
 xhr.status == 200){
                            var data = JSON.parse(xhr.responseText);
                            var weather = data.weatherinfo.weather;
                            var temp = data.weatherinfo.temp;
                            var wind = data.weatherinfo.WD;
                            var result = document.getElementById("result");
                            result.innerHTML = city + "的天气情况: 天气-" + weather + "，温度-" + temp + "，风向-" + wind;
                    }
                }
                    xhr.open("get", "http://www.weather.com.cn/data/cityinfo/" + city + ".html", true);
                    xhr.send(null);
            }
            /script>
        /body>
        /html>
    

以上代码演示了通过获取用户输入的城市名称，向一个天气预报API发送请求，返回得到数据并解析显示到HTML页面上。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！