我当前的项目是在Codepen上创建本地天气应用。我从openweathermap.org获得了API,并且正在使用以下代码来获取用户位置:
$.getJSON("http://ip-api.com/json",function(data2) {
lat = data2.lat;
long = data2.lon;
}
我的目标是根据openweathermap.org的天气描述显示不同的背景图像。我给了变量weatherType。我正在使用if,if else和else语句来遍历不同的weatherType,并根据与输出匹配的weatherType分配背景图像。另外,我所有的img都是我从飞溅中获得的。
例如,如果weatherType下雨了,我想有雨的背景照片。
这是我的代码示例:
if (weatherType = "clear sky" || "few clouds" || "calm" || "light breeze" ||
"fresh breeze"){
$('body').css('background-image', 'url(https://images.unsplash.com/photo-
1476611338391-6f395a0ebc7b?ixlib=rb-0.3.5&q=80&fm=jpg&crop= entropy&cs=
tinysrgb&s=e444d875e55debddc2319c386d96df90 )');
}
else if (weatherType = "light intensity drizzle" || "drizzle " || "heavy
intensity drizzle" || "light intensity drizzle rain" || "drizzle rain" ||
"heavy intensity drizzle rain" || "shower rain and drizzle" || "heavy shower
rain and drizzle" || "shower drizzle" || "light rain" || "moderate rain" ||
"heavy intensity rain" || "very heavy rain" || "extreme rain" || "light
intensity shower rain" || "shower rain" || "heavy intensity shower rain" ||
"ragged shower rain" ){
$("body").css("background-image",
"url(https://images.unsplash.com/photo-1470432581262-e7880e8fe79a?ixlib=rb
-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=c11591dd2cf9 c9d41b1d577df
052785)");
}
我的问题是图像似乎没有加载,而是我得到了这张随机照片,而且甚至不总是显示出来。我也没有专注于css或任何形式的样式,因为我正在尝试首先完成此工作。
您可以转到我的Codepen查看整个代码:https ://codepen.io/u1tron/pen/jVBeRq
您的if语句无效。
===
比较,而不是=
这是赋值weatherType
在每个OR语句中进行比较,否则,它只是在评估“淋浴雨”是否为真。
如果(weatherType ===“晴朗的天空” || weatherType ===“少量云”...。
另外,您可以使用switch
:
switch(weatherType){
case: "clear sky":
case: "few clouds":
//Set background image
break;
case "light intensity drizzle":
case "drizzle ":
//Set different background image
break;
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句