纯JS版天气预报代码（优化版） [复制链接]

大陆仔仔

帖子: 1114
体力: 1771
威望: 1

发表于 2012-1-12 10:02:01 |显示全部楼层

一个纯JS版的天气预报，调用了新浪的天气预报接口实现。

具体功能如下：
● 支持根据用户IP来显示当地的天气预报（使用了魔镜的 API）
● 支持用户搜索中国和国外城市的天气预报
● 将能够查询未来两天的天气情况。

使用方法：

该程序是基于jquery 1.32 和 daluzai JS函数库 1.3 开发的，所以在使用前请检测网站是否拥有jquery和daluzai函数库。确认无误后那么就可以初始化大陆仔天气预报了
//创建天气预报核心对象
var weather_=new weather();
接着，配置将要使用的天气预报风格：(系统默认使用QQ的风格)
//设置样式
weather_.getStyle('qq');
大陆仔天气预报支持两套风格：QQ风格和未名风格。
QQ风格将和QQ天气预报一样的皮肤和显示方式，
未名风格则是官方自己开发的一套风格，因为图片的来源未知，因此起名为未名风格。

接下来监听用户的所有事件，比如：点击按钮查询天气和回车查询天气等事件。
//监听用户事件
onEvent.onEvent();
最后，是大陆仔天气预报提供的帮助接口
大陆仔天气预报共提供了四个帮助函数，
分别是
.help('ver');
.help('about');
.help('style');
.help('');
使用 weather_.help('ver'); 系统将返回当前使用的版本号；
使用 weather_.help('ablout'); 系统将返回官方的信息；
使用 weather_.help('style'); 系统将返回系统拥有的所有皮肤；
使用 weather_.help(''); 系统将返回帮助所有的函数；
程序说明：

核心程序 weather.js
Weather.js 共有三个对象：
分别是
weather
uisy
onEvent
weather系统核心对象。处理了向新浪请求数据，天气预报皮肤，揣测天气预报对应的图片，页面的输出已经系统帮助的等功能。
uisy系统的JS和 CSS交互效果对象。
onEvent系统的所有响应事件。比如：用户的点击查询按钮，回车事件，系统正在查询，已经屏蔽报错等功能。

修改皮肤:

大陆仔天气预报的样式依赖于 daluzai CSS 底层库，其中，大陆仔天气预报样式在 uisy/drivers/prviate.css
修改样式即可换肤。
特别说明：大陆仔产品一直遵循一个原则，CSS样式从来不用ID定义。所以，在修改皮肤时请不要使用ID定义样式，以免于JS的使用发生冲突。

程序演示 http://daluzai.net/demo.shtml?ga=weather_demo

下载源代码：

附件: 你需要登录才可以下载或查看附件。没有帐号？注册 

		自动登录	找回密码
密码			注册

纯JS版天气预报代码 （优化版） [复制链接]

浏览过的帖子

浏览过的版块

纯JS版天气预报代码（优化版） [复制链接]