Discuz!官方免费开源建站系统

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索

非框架的js天气预报代码!可完全自己定义样式~

[复制链接]
Honancp 发表于 2012-10-29 22:23:17 | 显示全部楼层 |阅读模式
DIY模块素材
模块类型: 论坛类
展示风格: 其他
是否原创:
本帖最后由 Honancp 于 2012-10-29 22:30 编辑

先上图:


以上是我自己修改过的效果。此天气预报代码的天气源来自新浪,源代码来自网络~致敬!天气信息由js输出并且已解决与discuz程序冲突的问题。
首先确定你的页面有加载jquery1.7.2,如果没有,那么请加上
  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
复制代码
  1. <script type="text/javascript" src="weather.js" language="javascript" charset="UTF-8"></script>
复制代码
weather.js见附件,注意此文件的路径为你自己的路径。然后在需要加上天气预报代码的地方加上代码:
<div class="sfweather">
  1. <table width="100%" border="0" cellspacing="0" cellpadding="0" class="weather">
  2.   <tr>
  3.     <td style="width: 64px;padding-right: 16px;"><div class="wtimg" id="T_weather_img"></div></td>
  4.     <td><div class="wtcon">
  5.         <span class="city"></span>
  6.         <span id="T_weather"></span>
  7.         <span id="T_temperature"></span>
  8.         </div></td>
  9.     <td><div class="wtdate">
  10.             <span id="T_Date"></span>
  11.         <span id="T_Day"></span>
  12.         </div></td>
  13.   </tr>
  14. </table>
  15. </div>
复制代码
所有的天气相关信息是通过id来遍历之后输出的,所以不要有其它的与之冲突。如果需要,你可以任意调整id为T_weather_img,T_weather,T_temperature,T_Date,T_Day等span标签的位置。
注意css部分为:
  1. /*天气*/
  2. .sfweather { width:196px; background:#009ad9; padding:4px 12px;margin: 8px auto;}
  3. .sfweather span {color: white;}
  4. .wtimg img{width: 64px;height: 64px;}
  5. .city { font-size:18px; margin-bottom:4px;line-height: 18px;}
  6. .wtcon span {display: block;}
  7. .wtdate{text-align:center;}
  8. .wtdate span {display: block;}
  9. #T_weather,#T_temperature{font-size: 12px;margin-bottom: 1px;line-height:12px}
  10. #T_Date {font-size:18px;line-height: 18px;}
  11. #T_Day {font-size: 36px;line-height: 36px;}
复制代码
最后附上weather.js:(赚点辛苦费~{:soso_e113:})

整理by:SFNav科幻导航站长,我的小站地址www.sfnav.com(也是演示地址).有不对劲的可以跟帖询问,应用此代码前请做好备份。

本帖子中包含更多资源

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

x
楠风、誓言 发表于 2012-10-30 23:48:02 | 显示全部楼层
感觉还不错!支持一个!http://www.asigruel.com/
回复

使用道具 举报

cancer_zml 发表于 2012-11-2 17:10:06 | 显示全部楼层
钱!!!
回复

使用道具 举报

 楼主| Honancp 发表于 2012-11-2 18:02:52 | 显示全部楼层
cancer_zml 发表于 2012-11-2 17:10
钱!!!

什么钱?
回复

使用道具 举报

zgsoftware 发表于 2012-11-8 16:41:35 | 显示全部楼层
这是好东西,我找了很久,楼主发一个给我用一下,我没得金币。
回复

使用道具 举报

scexmh 发表于 2012-11-8 19:48:19 | 显示全部楼层
好东西,顶一下,哥们qq是多少?加好友
回复

使用道具 举报

zhanshiren 发表于 2013-2-17 13:47:22 | 显示全部楼层
站不错!
回复

使用道具 举报

大劫案 发表于 2013-2-21 14:25:24 | 显示全部楼层
装上的效果 www.kiss024.com
回复

使用道具 举报

尐木尐木 发表于 2013-5-17 13:36:00 | 显示全部楼层
要放那个位置??

www.fqschool.com
回复

使用道具 举报

mch_sjz 发表于 2013-8-23 21:41:18 | 显示全部楼层
好像不会用
回复

使用道具 举报

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

本版积分规则

手机版|小黑屋|Discuz! 官方站 ( 皖ICP备16010102号 )star

GMT+8, 2024-11-22 00:03 , Processed in 0.030915 second(s), 5 queries , Gzip On, Redis On.

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.

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