实时天气预报–Web精美呈现

chenglin博客 2014年2月11日 浏览 10019 回复3

实时的天气预报,使用web完美呈现,可以查看近三天的实时天气,做好出门准备,让生活变得简单快乐。

最近做了个天气预报的导航设置,感觉挺实用,也挺精美的。可以查看近三天的天气,包括精美图标展示,下雨、晴天、小雪等提示,还有公历、农历的呈现;还有一个设置城市,用户可以根据自己城市设置响应的城市天气预报。那么来看看怎么设计这个小工具吧:

先贴个图让大家看看先,查看地址: http://www.chenglin.name/nav/
weather1
weather2

大致思路: 获取数据 -> 处理数据 -> 呈现数据

1、获取数据
获取数据要权威,什么是权威,官网就是了:weather.com.cn
在中国天气网下有一个子网站 http://m.weather.com.cn/data/101010100.html,这个可以获取实时天气信息,101010100代表区域的编号;这里是北京的编号,里面的天气信息很多我就不一一介绍了;
根据区域编号获取天气数据

2、处理数据
数据很多,很杂需要按照需求处理数据,获取到自己需要的信息,并按一定的格式整合,以便输出展示。

3、呈现数据
数据已经得到了,那么需要自己去呈现,这个就调整下css就行了。可以参照我的页面展示;

查看地址: http://www.chenglin.name/nav/
就介绍到这里了,大家可以鼠标经过我的博客右上角,如果没有请刷新界面,将会显示上面展示的图像;别忘了评论,点赞;
辛苦码字分享啊!



发表评论

电子邮件地址不会被公开。 必填项已用*标注

姓名
邮箱
网址

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

实时天气预报–Web精美呈现》上有3条评论

  1. 希望附上源码 多谢
    这个接口我也用过 里面的天气信息很多 希望参照下你的是如何对应天气图标的
    还有我发现这个接口返回的数据编码不一致 不知道你有没有遇到过

    • 暂时没有获取不一致的情况,给出思路了,代码没有整理,有些乱,不懂的地方可以询问我