星空网 > 软件开发 > 网页设计

WEB前端工程师(实践)制作天气预报难度:简单

需要准备:jQuery Bootstrap 天气预报API(本文中使用API可能会失效请灵活运用)

CSS样式可以你自己去写这里只提出jQuery 请求数据和解析JSON数据 

{	"resultcode":"200",	"reason":"successed!",	"result":{		"sk":{			"temp":"21",			"wind_direction":"东北风",			"wind_strength":"3级",			"humidity":"66%",			"time":"14:00"		},		"today":{			"temperature":"17℃~22℃",			"weather":"阴",			"weather_id":{				"fa":"02",				"fb":"02"			},			"wind":"东北风3-4 级",			"week":"星期三",			"city":"无锡",			"date_y":"2016年10月12日",			"dressing_index":"较舒适",			"dressing_advice":"建议着薄外套、开衫牛仔衫裤等服装。年老体弱者应适当添加衣物,宜着夹克衫、薄毛衣等。",			"uv_index":"最弱",			"comfort_index":"",			"wash_index":"较适宜",			"travel_index":"较适宜",			"exercise_index":"较适宜",			"drying_index":""		},		"future":{			"day_20161012":{				"temperature":"17℃~22℃",				"weather":"阴",				"weather_id":{					"fa":"02",					"fb":"02"				},				"wind":"东北风3-4 级",				"week":"星期三",				"date":"20161012"			},			"day_20161013":{				"temperature":"17℃~21℃",				"weather":"阴",				"weather_id":{					"fa":"02",					"fb":"02"				},				"wind":"东北风3-4 级",				"week":"星期四",				"date":"20161013"			},			"day_20161014":{				"temperature":"18℃~22℃",				"weather":"阵雨",				"weather_id":{					"fa":"03",					"fb":"03"				},				"wind":"东北风3-4 级",				"week":"星期五",				"date":"20161014"			},			"day_20161015":{				"temperature":"17℃~22℃",				"weather":"阵雨",				"weather_id":{					"fa":"03",					"fb":"03"				},				"wind":"东北风3-4 级",				"week":"星期六",				"date":"20161015"			},			"day_20161016":{				"temperature":"17℃~24℃",				"weather":"阴",				"weather_id":{					"fa":"02",					"fb":"02"				},				"wind":"东北风3-4 级",				"week":"星期日",				"date":"20161016"			},			"day_20161017":{				"temperature":"17℃~21℃",				"weather":"阴",				"weather_id":{					"fa":"02",					"fb":"02"				},				"wind":"东北风3-4 级",				"week":"星期一",				"date":"20161017"			},			"day_20161018":{				"temperature":"17℃~21℃",				"weather":"阴",				"weather_id":{					"fa":"02",					"fb":"02"				},				"wind":"东北风3-4 级",				"week":"星期二",				"date":"20161018"			}		}	},	"error_code":0}

  

上面是要用到的JSON数据格式

搭建界面略过 根据JSON中数据添加到HTML中

 

解析数据到HTML中 其中一定要注意 跨域问题

$(document).ready(function() {
$.ajax({
type : "POST",
dataType:'JSONP',//跨域
jsonp:"callback",
jsonpCallback:"fanyi",
url:"http://v.juhe.cn/weather/ip",//服务器URL
data : {ip:"124.126.230.180",key:"b2a208cb39cec1c93dd5534966708285"},//请求数据
success : function(datas){//datas是返回的JSON数据


if (datas.resultcode == 200) {//根据返回的数据 判断是否成功获取到JSON中的值
$("#city").text(datas.result.today.city);//解析数据到HTML文档中显示数据
$("#date").text(datas.result.sk.time+"发布");
$("#temp").text(datas.result.sk.temp+"°");
$("#weather").text(datas.result.today.weather);
$("#jt-tq").text(datas.result.today.weather);
$("#jt-wd").text(datas.result.today.temperature);
$("#jt-fx").text(datas.result.today.wind);
$("#two-week").text(datas.result.future.day_20161013.week);
$("#two-tq").text(datas.result.future.day_20161013.weather);
$("#two-wd").text(datas.result.future.day_20161013.temperature);
$("#two-fx").text(datas.result.future.day_20161013.wind);
$("#three-week").text(datas.result.future.day_20161014.week);
$("#three-tq").text(datas.result.future.day_20161014.weather);
$("#three-wd").text(datas.result.future.day_20161014.temperature);
$("#three-fx").text(datas.result.future.day_20161014.wind);

}else{

//错误...

}

}
});
});

 

 

 




原标题:WEB前端工程师(实践)制作天气预报难度:简单

关键词:Web前端

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

跨境卖家慎用这些词!10000+产品面临下架风险!:https://www.ikjzd.com/articles/141216
360度玩转抖音,教你快速精准引流:https://www.ikjzd.com/articles/141217
跨境卖家慎用这些词!10000+产品面临下架风险!:https://www.ikjzd.com/articles/141218
2020 年下半年中国出海跨境电商机遇与趋势白皮书:https://www.ikjzd.com/articles/141219
如何提升亚马逊店铺流量:https://www.ikjzd.com/articles/141220
亚马逊索评有哪些陷阱?如何安全索评避免踩坑呢?:https://www.ikjzd.com/articles/141221
TikTok 将推出先买后付服务 :https://www.goluckyvip.com/news/188219.html
深圳有没有比较好玩的景点 深圳有没有比较好玩的景点推荐一下:https://www.vstour.cn/a/366175.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流