如何在雅虎天气预报的每一天加载天气图标？

Posted 2023-02-24

【中文标题】如何在雅虎天气预报的每一天加载天气图标？

【英文标题】：How to load weather icons with each day of yahoo weather forecast?

【发布时间】：2018-09-17 13:55:12

【问题描述】：

我是 Django 和 jquery 的新手。我试图使用Yahoo Weather API 制作天气应用程序。 除了预报中的天气图标外，一切都很好。以前所有的图标都使用相同的图标 天气变化，但我如何编写代码，以便在不同的气候下看到不同的图标

这是我的Jquery 代码：

$(document).ready(function () 
    var content = $('#patti').text();
    var iconurl = 'http://l.yimg.com/a/i/us/we/52/' +content+ '.gif';
    $('#wicon').attr('src', iconurl);


    $.each($('.icon1'), function( ) 
        var content2 = $(this).text();
        //console.log("content=",content2);
        var iconurl2 = 'http://l.yimg.com/a/i/us/we/52/' +content2+ '.gif';
        console.log(iconurl2);
        var final = $('.wicon2').attr('src', iconurl2);
        console.log(final)
    );
);

我的index.html 7 天预测文件：

<div id="container-fluid">
<div class="row">
    % if form.is_valid %
    <div class="col-sm-3">
        <div class="container text-center hi" style="background: whitesmoke"><br>
            <iframe class="clock" src="http://free.timeanddate.com/clock/i66pyson/n1906/fn4/tct/pct/ftb/ta1" frameborder="0"   allowTransparency="true"></iframe>

            <h4 style="color: whitesmoke">text</h4>
            <br>
            <div id="icon"><img id="wicon" src="" ></div><h2 id="thendi" style="color: whitesmoke"><strong>temp °C</strong></h2>
            <br>
            <!--<p style="color: whitesmoke">date|slice:':3'</p>-->
            <p id="patti" style="visibility: hidden">code</p>
        </div>
    </div>
    % endif %
        <br>
    <br>
    <!--forecast-->
    <div class="col-md-offset-9">
        <div class="row">
            % for obj in forecast|slice:":7" %
                <div class="col-sm-offset-5 text-center" style="color: #7a43b6">
                    <div class="card">
                        <p style="color: whitesmoke"> obj.date</p>
                        <p style="color: whitesmoke">obj.text</p>
                        <div class="card-content">
                            <p class='icon1' style="visibility: hidden">obj.code</p>
                            <div id="icon2"><img class="wicon2" src="" ></div>
                            <p style="color: whitesmoke"><i class="fas fa-arrow-up"></i>obj.high°C</p>
                            <p style="color: whitesmoke"><i class="fas fa-arrow-down"></i>obj.low°C</p>
                        </div>
                    </div>

                </div>
            % endfor %
        </div>
    </div>
</div>

这是我现在得到的结果。

这是视图部分：

def weatherview(request):
form = LocationForm(request.POST or None)
if form.is_valid():
    forminput = form.cleaned_data['location']
    baseurl = "https://query.yahooapis.com/v1/public/yql?"
    yql1 = 'select * from '
    yql2 = 'weather.forecast where woeid in '
    yql3 = '(select woeid from geo.places(1) where text="' + forminput+ '") and u="c"'
    yql_query = yql1+yql2+yql3
    yql_url = baseurl + urllib.parse.urlencode('q': yql_query) + "&format=json"
    result = urllib.request.urlopen(yql_url).read()
    data = json.loads(result)
    forecast  =   data['query']['results']['channel']['item']['forecast']
    location = data['query']['results']['channel']['location']
    today = data['query']['results']['channel']['item']['condition']


    return render(request,'index.html', 
        "forecast":forecast,
        "city":location['city'],
        "country": location['country'],
        "region": location['region'],
        "date":today['date'],
        "temp":today['temp'],
        "text":today['text'],
        'code':today['code'],
        'form': form
    )

return render(request,'index.html','form':form)

【问题讨论】：

请为 forecast 提供上下文，我也对 jQuery 代码感到困惑，这与 index.html 有什么关系？

我们还将获得一个包含每天预测的代码 (obj.code)... 我们所要做的就是替换 ('l.yimg.com/a/i/us/we/52' +content2+ '.gif' ) 。 . 带有该代码的 url 中的“content2”字段。

如果是这样，那为什么不在imgsrc中使用code呢？

如果我们直接将url粘贴到src..那么我们可以得到不同的天气图标。根据气候.?

我相信这将适用于 src http://l.yimg.com/a/i/us/we/52/ code .gif

【参考方案1】：

code 是我们显示图像所需的全部内容。您可以使用src中的 code 来显示图片。

<img src="http://l.yimg.com/a/i/us/we/52/ code .gif">