使用聚合数据制作天气信息组件

最近个人做了一个移动端的小demo，看到手机屏幕上的天气提示组件，就想自己做一个，目前是一个可以用的简易版本，后期优化再更新，现在先分享出来仅供参考！

ps：数据使用了聚合数据网提供的全国天气预报接口（http://v.juhe.cn/weather/index），主要使用技术为Jquery；

html代码如下：

<div id='nav'>
    <div class='nav-left'>
        <dl class='nav-left-top'>
            <dt id='temp'>
                21
            </dt>
            <dd>
                <p>
                    <span>
                        。
                    </span>
                        C
                </p>
                <p id='temperature'>
                    8°C~20°C
                </p>
            </dd>
        </dl>
        <div class='nav-left-bottom'>
            <span id='date_y'>
                2014年03月21日
            </span>
            <span id='week'>
                星期五
            </span>
        </div>
    </div>
    <dl class='nav-right'>
        <dt id='weather_logo'>
            --
        </dt>
        <dd>
            <p>
                <span id='weather'>
                    晴
                </span>
                <span id='city'>
                    杭州
                </span>
            </p>
            <p>
                <span id='wind_direction'>
                    西南风
                </span>
                <span id='wind_strength'>
                    2级
                </span>
            </p>
        </dd>
    </dl>
</div>

css代码如下：

#nav{
    height:1rem;
    /* background: #ddd; */
    position: relative;
}
#nav .nav-left{
    width: 50%;
    height: 100%;
    float: left;
    padding: 0 3%;
    margin-bottom: 0.15rem;
}
#nav .nav-left .nav-left-top{
    height:0.8rem;
}
#nav .nav-left .nav-left-top dt{
    float: left;
    width: 0.8rem;
    text-align: center;
    line-height: 0.8rem;
    font-size: 0.38rem;
}
#nav .nav-left .nav-left-top dd>p:nth-of-type(1){
    margin-top: 0.15rem;
    height:0.4rem;
    width: 0.3rem;
    position: relative;
    line-height: 0.46rem;
    text-align: center;
    font-size: 0.22rem;
}
#nav .nav-left .nav-left-top dd>p:nth-of-type(1) span{
    display: block;
    width:0.18rem;
    height: 0.18rem;
    line-height: 0.1rem;
    font-size: 0.2rem;
    position: absolute;
    top: 0;
    left: 0;
}
#nav .nav-left .nav-left-top dd>p:nth-of-type(2){
    margin-top:0.05rem;
    height: 0.2rem;
    line-height: 0.2rem;
}
#nav .nav-left .nav-left-top dd{
    float: left;
}
#nav .nav-left .nav-left-bottom>span:nth-of-type(2){
    margin-left: 0.1rem;
}
#nav .nav-right {
    width: 38%;
    height: 100%;
    float: left;
    padding: 0 3%;
}
#nav .nav-right dt {
    font-family: 'iconfont';
    height:0.6rem;
    text-align: center;
    line-height: 0.6rem;
    font-size: 0.42rem;
}
#nav .nav-right dd p{
    line-height: 0.2rem;
    text-align: center;
}

js代码如下：

// 获取天气数据
$.ajax({
    type: 'GET',
    dataType: 'jsonp',
    // 真实的url可结合自己的实际需求设置
    url: 'http://v.juhe.cn/weather/index?format=2&cityname=城市名或城市ID&key=您申请的KEY',
    success: function(res){
        var tq = res.result;
        // 回回显数据
        $('#temp').text(tq.sk.temp);
        $('#temperature').text(tq.today.temperature);
        $('#date_y').text(tq.today.date_y);
        $('#week').text(tq.today.week);
        $('#weather').text(tq.today.weather);
        $ ('#city').text (tq.today.city);
        $('#wind_direction').text(tq.sk.wind_direction);
        $('#wind_strength').text(tq.sk.wind_strength);
        if (tq.today.weather_id.fa === '00') {
            $('#weather_logo').html('<span>&#xe61f;</span>');
        } else if (tq.today.weather_id.fa === '01') {
            $('#weather_logo').html('<span>&#xe631;</span>');
        } else if (tq.today.weather_id.fa === '02') {
            $('#weather_logo').html('<span>&#xe627;</span>');
        } else if ((tq.today.weather_id.fa === '03') || (tq.today.weather_id.fa === '07') || (tq.today.weather_id.fa === '19') || (tq.today.weather_id.fa === '21')) {
            $('#weather_logo').html('<span>&#xe6ed;</span>');
        } else if ((tq.today.weather_id.fa === '08')|| (tq.today.weather_id.fa === '22')) {
            $('#weather_logo').html('<span>&#xe685;</span>');
        } else if ((tq.today.weather_id.fa === '10') || (tq.today.weather_id.fa === '11') || (tq.today.weather_id.fa === '12') || (tq.today.weather_id.fa === '23') || (tq.today.weather_id.fa === '24') || (tq.today.weather_id.fa === '25')) {
            $('#weather_logo').html('<span>&#xe676;</span>');
        } else if ((tq.today.weather_id.fa === '14') || (tq.today.weather_id.fa === '15') || (tq.today.weather_id.fa === '13') || (tq.today.weather_id.fa === '26')) {
            $('#weather_logo').html('<span>&#xe6ec;</span>');
        } else if ((tq.today.weather_id.fa === '16') || (tq.today.weather_id.fa === '17') || (tq.today.weather_id.fa === '27') || (tq.today.weather_id.fa === '28')) {
            $('#weather_logo').html('<span>&#xe6f5;</span>');
        } else if ((tq.today.weather_id.fa === '20') || (tq.today.weather_id.fa === '29') || (tq.today.weather_id.fa === '30') || (tq.today.weather_id.fa === '31')) {
            $('#weather_logo').html('<span>&#xe6f0;</span>');
        } else if ((tq.today.weather_id.fa === '04') || (tq.today.weather_id.fa === '05')) {
            $('#weather_logo').html('<span>&#xe606;</span>');
        } else if ((tq.today.weather_id.fa === '53')) {
            $('#weather_logo').html('<span>&#xe67e;</span>');
        } else {
            $('#weather_logo').html('<span>&#xe67c;</span>');
        }
    }
})

效果图如下：

ps:

所用iconfont小图标下载地址：https://pan.baidu.com/s/1XQpe8lQJKhxl3nscvrrQRw