找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 9369|回复: 2

[特效代码] 纯JS版天气预报代码 (优化版)

[复制链接]
发表于 2013-2-22 10:11:36 | 显示全部楼层 |阅读模式 来自 中国–北京–北京
一个纯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的使用发生冲突。
下载源代码:

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

×

评分

参与人数 1金币 +20 收起 理由
光明使者 + 20 很给力!

查看全部评分

发帖求助前要善用【论坛搜索】功能,那里可能会有你要找的答案;

如何回报帮助你解决问题的坛友,好办法就是点击帖子下方的评分按钮给对方加【金币】不会扣除自己的积分,做一个热心并受欢迎的人!

发表于 2013-6-26 08:42:42 | 显示全部楼层 来自 中国–北京–北京
http://www.wsxa.com/WebService/WeatherI.asp

六天天气预报js调用方法一 :<script type="text/javascript" src="http://218.30.67.26/weather/?id=城市地方ID"></script>

六天天气预报js调用方法二(无日期):<script type="text/javascript" src="http://218.30.67.26/weather/?id=城市地方ID&typestr=1"></script>

六天天气预报js调用方法三(高级):<script type="text/javascript" src="http://218.30.67.26/weather/?id=城市地方ID&typestr=2"></script>

六天天气预报js调用方法四(自定义方法):<script type="text/javascript" src="http://218.30.67.26/weather/?id=城市地方ID&typestr=0"></script>

发帖求助前要善用【论坛搜索】功能,那里可能会有你要找的答案;

如何回报帮助你解决问题的坛友,好办法就是点击帖子下方的评分按钮给对方加【金币】不会扣除自己的积分,做一个热心并受欢迎的人!

回复 支持 反对

使用道具 举报

发表于 2013-7-9 23:56:27 | 显示全部楼层 来自 中国–北京–北京
本帖最后由 whg118 于 2013-7-9 23:58 编辑

本人比较菜,直接应用的插件,然后修改的iframe,改成js。
方法请看迈普论坛。
可以直接引用:<script name="weather_inc"  script type="text/javascript" charset="utf-8"  src="http://bbs.moopro.cn/source/plugin/xyfx_tianqi/tq.js"></script>

发帖求助前要善用【论坛搜索】功能,那里可能会有你要找的答案;

如何回报帮助你解决问题的坛友,好办法就是点击帖子下方的评分按钮给对方加【金币】不会扣除自己的积分,做一个热心并受欢迎的人!

回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则 需要先绑定手机号

关闭

站长推荐上一条 /1 下一条

QQ|侵权投诉|广告报价|手机版|小黑屋|西部数码代理|飘仙建站论坛 ( 豫ICP备2022021143号-1 )

GMT+8, 2024-11-21 19:48 , Processed in 0.053970 second(s), 11 queries , Redis On.

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表