Javascript 天敌没有出现
我正在创建一个基本的天气应用程序。它从开放式天气API获取天气数据，然后显示温度和位置。我找到了SKYCONS，并认为它们将是一种向我的应用程序添加图标的好方法。然而，他们不会出现Javascript 天敌没有出现,javascript,json,web,weather-api,Javascript,Json,Web,Weather Api,我正在创建一个基本的天气应用程序。它从开放式天气API获取天气数据，然后显示温度和位置。我找到了SKYCONS，并认为它们将是一种向我的应用程序添加图标的好方法。然而，他们不会出现 <link rel="stylesheet" href="bootstrap.css"/> <link rel="stylesheet" href="style.css"/> <script src="https://ajax.googleapis.com/ajax/libs/jquer
<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">℉</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("℃"); // change to Celsius
$("#temperature").html(tempInCelsius);
} else {
$("#unit").html("℉"); // 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();
});
});
$（文档）.ready（函数（）{
//获取用户的位置；如果无法访问该位置，则显示地球天气
var经度=0；
var纬度=0；
if（导航器.地理位置）{
navigator.geolocation.getCurrentPosition（函数（位置）{
纬度=数学楼层（位置坐标纬度）；
经度=数学地板（位置坐标经度）；
});
}
$.getJSON（“http://api.openweathermap.org/data/2.5/weather?lat=“+纬度+”&lon=“+经度+”&appid=44db6a862fba0b067b1930da0d769e98”，函数（json）{
//从json获取数据
$（“#city”）.html（json.name）；
$（“#country”）.html（“，”+json.sys.country）；
var weather=json.weather[0].main；
$（“#weather”）.html（天气）；
var tempInKelvin=parseFloat（json.main.temp）；
var tempInCelsius=数学圆（（tempInKelvin-273.15）*10）/10；
var tempInFahrenheit=tempInCelsius+32；
$（“#temperature”）.html（tempInFahrenheit）；//默认情况下以华氏温度显示温度
//单击时在华氏温度和摄氏温度之间切换
var iterator=1；//因为.toggle（）在jQuery 1.9中被弃用
$（“#单位”）。在（“单击”，函数（）{
如果（迭代器%2==1）{
$（“#单位”）.html（℃”）；//更改为摄氏度
$（“#温度”）.html（tempInCelsius）；
}否则{
$（“#单位”）.html（℉”）//更改回华氏温度
$（“#温度”）.html（tempinghernheit）；
}
迭代器++；
});
//根据一天中的时间更改背景
变量时间=新日期（）；
time=time.getHours（）；
var color=“”；
如果（时间>=19 | |时间=17）{
color=“#F0CB35”；
}否则如果（时间>=7）{
color=“#C02425”；
}否则{
color=“#FF512F”；
}
$（“body”）.css（“背景色”，颜色）；
//根据时间和天气添加图标
var icons=新的天空图标（{“color”：“red”}）；
var htmlToAdd=''；
开关（weather.toLowerCase（））{
案例“云”：
如果（time>=19 | | time=19 | | time我知道这是一个老问题，但如果有人在寻找答案，我也会遇到同样的问题，然后我想这可能是因为脚本在页面加载之前加载。我将脚本移到页面底部，它工作了。我知道这是一个老问题，但如果有人在寻找答案嗯，我也有同样的问题，然后我想这可能是因为脚本在页面加载之前加载。我将脚本移动到页面底部，它工作了