您的位置:时时app平台注册网站 > web前端 > WEB前端工程师(实践)制作天气预报难度:简单彩世

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

2019-11-28 05:20

 

WEB前端工程师(实践)制作天气预报难度:简单,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:"
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{

//错误...

}

}
});
});

 

 

 

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

}

 

}else{

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);

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

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

 

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

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

  

//错误...

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

 

{
 "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
}

}
});
});

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

本文由时时app平台注册网站发布于web前端,转载请注明出处:WEB前端工程师(实践)制作天气预报难度:简单彩世

关键词: