个人中心
gpt4 book ai didi

javascript - Skycons 未显示

转载 作者：行者123 更新时间：2023-11-28 06:19:43 24 4
gpt4 key购买 nike

我正在创建一个基本的天气应用程序。它从开放天气API获取天气数据，然后显示温度和位置。我找到了 SKYCONS，并认为它们是向我的应用程序添加图标的一种很好且简单的方法。然而，他们不会出现。 

<link rel="stylesheet" href="bootstrap.css"/>
<link rel="stylesheet" href="style.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://rawgithub.com/darkskyapp/skycons/master/skycons.js"></script>
<script src="Script.js"></script>


<body>
    <div class="col-xs-12 text-center">
        <h1>Weather App</h1>
        <div class="container">
            <br>
            <h3><span id = "city">{City here}</span><span id = "country">{Country here}</span></h3>
            <h1><span id = "temperature">{Temperature here}</span><span id="unit">&#8457</span></h1>
            <h2><span id = "weather">{Weather here}</span></h2>
            <br>
            <p class = "text"></p>
            <br>
            <figure id = "icon"><canvas id="partly-cloudy-night" width="175" height="175"></canvas></figure>
            <br>
        </div>
    </div>
</body>

这是脚本:

$(document).ready(function(){

    // gets user's location; shows Earth weather if location cannot be accessed
    var longitude = 0;
    var latitude = 0;
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
            latitude = Math.floor(position.coords.latitude);
            longitude = Math.floor(position.coords.longitude);
        });
    }

    $.getJSON("http://api.openweathermap.org/data/2.5/weather?lat=" + latitude + "&lon=" + longitude + "&appid=44db6a862fba0b067b1930da0d769e98", function(json){

        // gets data from json
        $("#city").html(json.name);
        $("#country").html(", " + json.sys.country);
        var weather = json.weather[0].main;
        $("#weather").html(weather);
        var tempInKelvin = parseFloat(json.main.temp);
        var tempInCelsius = Math.round((tempInKelvin - 273.15)*10)/10;
        var tempInFahrenheit = tempInCelsius + 32;
        $("#temperature").html(tempInFahrenheit); // shows temperature in Fahrenheit by default

        // switches between Fahrenheit and Celsius when clicked
        var iterator = 1; // because .toggle() was deprecated in jQuery 1.9
        $("#unit").on("click", function(){
            if (iterator % 2 == 1) { 
                $("#unit").html("&#8451"); // change to Celsius
                $("#temperature").html(tempInCelsius);
            } else {
                $("#unit").html("&#8457"); // change back to Fahrenheit
                $("#temperature").html(tempInFahrenheit);
            }
            iterator++;
        });

        // Changes background according to time of day
        var time = new Date();
        time = time.getHours();
        var color =  "";
        if (time >= 19 || time <= 4) {
            color = "#283048";
        } else if (time >= 17) {
            color = "#F0CB35";
        } else if (time >= 7) {
            color = "#C02425";
        } else {
            color = "#FF512F";
        }

        $("body").css("background-color", color);

        // adds icon, depending on time and weather
        var icons = new Skycons({"color": "red"});
        var htmlToAdd = '';
        switch (weather.toLowerCase()) {
            case "clouds":
                if (time >= 19 || time <= 4) {
                    htmlToAdd = '<canvas id="partly-cloudy-night" width="175" height="175"></canvas>';
                    icons.set("partly-cloudy-night", Skycons.PARTLY_CLOUDY_NIGHT);
                } else {
                    htmlToAdd = '<canvas id="cloudy" width="175" height="175"></canvas>';
                    icons.set("cloudy", Skycons.CLOUDY);
                }
                $("#weather").html("Cloudy");
                break;
            case "rain":
                htmlToAdd = '<canvas id="rain" width="175" height="175"></canvas>';
                icons.set("rain", Skycons.RAIN);
                break;
            case "snow":
                htmlToAdd = '<canvas id="snow" width="175" height="175"></canvas>';
                icons.set("snow", Skycons.SNOW);
                break;
            case "clear":
                if (time >= 19 || time <= 4) {
                    htmlToAdd = '<canvas id="clear-night" width="175" height="175"></canvas>';
                    icons.set("clear-night", Skycons.CLEAR_NIGHT);
                } else {
                    htmlToAdd = '<canvas id="clear-day" width="175" height="175"></canvas>';
                    icons.set("clear-day", Skycons.CLEAR_DAY);
                }
                break;
            default:
                htmlToAdd = '<canvas id="rain" width="175" height="175"></canvas>';
                icons.set("rain", Skycons.RAIN);
        }

        $("#icon").html(htmlToAdd);
        icons.play();
    });
});

是的，我知道我正在 getJSON 中执行所有操作，但我不知道如何将 json 值存储到全局变量而不妨碍 getJSON 的异步功能。

最佳答案

我知道这是一个老问题，但如果有人在寻找答案，我遇到了同样的问题，然后我认为这可能是因为脚本在页面加载之前加载。我将脚本移至页面底部并且它起作用了。

关于javascript - Skycons 未显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35643164/

24 4 0
文章推荐： jquery - css 菜单制作器无法在移动设备上运行
文章推荐： Javascript element.style.height 不工作
文章推荐： html - 定位导航栏
文章推荐： C++ ofstream浮点编码
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com