[每天进步一点点~] js、jquery调用接口获取天气

作者: WYL_99 | 来源:发表于2020-11-23 14:48 被阅读0次

[每天进步一点点~] js、jquery调用接口获取天气
egg.js 跨域设置cookie
Android与WebView的js交互
上传文件与设置进度条
js实现lazyload
jQuery类插件编写方法
获取返回URL
微信小程序Openid获取及数据存储
02-JQuery操作DOM
Vue数据请求

天气预览图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>天气</title>
 <style>
        .weather-list {
            width: 100%;
            /*margin-top: 15px;*/
            /*font-size: 12px;*/
            background-color: pink;
        }
        .weather-list ul {
            width: 20%;
            float: left;
            background-color: pink;
        }
        .weather-list ul li {
            text-align: center;
            color: white;
            width: 160px;
            overflow: hidden;
        }
        .weather-list ul li.text {
            height: 20px;
        }
        .weather-list img {
            width: 50px;
            height: 50px;
        }
    </style>
</head>
<body>

<div id="wea"></div >
<div class="weather-list"></div>

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
    $.ajax({
        type: 'GET',
        url: 'http://wthrcdn.etouch.cn/weather_mini?city=北京',
        dataType: 'JSON',
        error: function () {
            alert('网络错误');
        },
        success: function (res) {
            console.log(res);
            $('#wea').append(res.data.city);
        }
    });


    getWeather();
    function getWeather()
    {
        $.getJSON('http://wthrcdn.etouch.cn/weather_mini?city=北京', function (result) {
            var update_time = Date.parse(result.data.forecast[0].date);
            update_time = getTime(update_time);
            $('.tianqi_icon').html(setWeatherIcon(result.data.forecast[0].type));

            $('.weather-header-city').append(result.city);
            $('.weather-content-content .wea').html(result.data.forecast[0].type);
            $('.weather-content-content .tem').html(result.data.forecast[0].high + '~' + result.data.forecast[0].low);

            $('.weather-list').html('');
            var str = '';
            var tianqi_icon = setWeatherIcon(result.data.forecast[0].type);
            var wea = result.data.forecast[0].type;
            var tem = result.data.forecast[0].high + '~' + result.data.forecast[0].low;
            var week = '今天';
            for (var i = 0; i < 3; i++)
            {
                if (i > 0) {
                    tianqi_icon = setWeatherIcon(result.data.forecast[i].type);
                    week = result.data.forecast[i].date;
                    wea = result.data.forecast[i].type;
                    tem = result.data.forecast[i].high + '~' + result.data.forecast[i].low;
                }
                str +='<ul>\n' +
                    '            <li>'+week+'</li>\n' +
                    '            <li>'+tianqi_icon+'</li>\n' +
                    '            <li class="text">'+wea+'</li>\n' +
                    '            <li>'+tem+'</li>\n' +
                    '        </ul>';
            }
            $('.weather-list').html(str);
        })
    }

    // 根据天气设置背景图片
    function setBgImg(wea)
    {
        var bg_img = '';
        if (wea.indexOf("阴") >= 0) {
            bg_img = 'url("images/duoyun.png")';
        } else if (wea.indexOf("小雨") >= 0) {
            bg_img = 'url("images/xiaoyu.png")';
        } else if (wea.indexOf("多云") >= 0) {
            if (wea.indexOf("小雨") >= 0) {
                bg_img = 'url("images/xiaoyu.png")';
            } else {
                bg_img = 'url("images/duoyun.png")';
            }
        } else {
            bg_img = 'url("images/qingtian.png")';
        }
        return bg_img;
    }

    // 根据天气设置图标
    function setWeatherIcon(wea)
    {
        var wea_img = '';
        if (wea.indexOf("阴") >= 0) {
            wea_img = '<img src="images/duoyun.png" />';
        } else if (wea.indexOf("小雨") >= 0) {
            wea_img = '<img src="images/xiaoyu.png" />';
        } else {
            wea_img = '<img src="./images/qingtian.png" />';
        }
        return wea_img;
    }

    function getTime(timestamp)
    {
        var date = new Date(timestamp);
        var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
        var m = (date.getMinutes() <10 ? '0' + date.getMinutes() : date.getMinutes());
        return h+m;
    }

</script>
</body>
</html>