`
maomaoysq
  • 浏览: 7551 次
  • 性别: Icon_minigender_1
  • 来自: 上海
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

免费天气预报插件jquery版本

jQueryGoogleQQChromeXML 
阅读更多
天气信息来源：中国天气网【weather.com.cn】
根据QQ[http://fw.qq.com:80/ipaddress]得到ip地址和所在城市信息，
然后调用weather.com.cn网站的xml得到城市代码，就可以得到JSON格式的天气信息
setWeather函数可以自行修改生成您想要的天气信息格式

有些兄弟说不好用可能是没有仔细看，我重新整理一下：
Weather.html 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title></title>
</head>
<body>
<script language="javascript" src="jquery.js"></script>
<script language='javascript' src='jquery.cookie.js'></script>
<script language='javascript' src='weather.js'></script>
<div align="center">
	<span id='jsCity'>&nbsp;</span>
	<span id='jsWeather'>&nbsp;</span>
</div>
</body>
</html>


Weather.js文件内容如下： 

/*
'**********************************************
' 文件名: 免费天气插件jquery版本
' 版本:  mmWeather1.0
' 作者:  走过四季
' 电子邮件: maomaoysq@sohu.com
' 日期:  2010年01月01日
' 声明:  
'   本代码可以自由使用，但请保留此版权声明信息
'   如果您对本代码进行修改增强，
'   请发送一份给俺。
'**********************************************
*/

//jsCity、jsWeather为您html中的元素ID
function setWeather(tID,tCity,tTip,tWendu,tFengli)
{
 $("#jsCity").html("<a href='http://www.weather.com.cn/html/weather/"+tID+".shtml' target=_bank>"+tCity+"</a>");
 $("#jsWeather").html(tTip+" "+tWendu);
}

var cityid,city1,city2,weaXML,weaHTML
weaXML = "http://service.weather.com.cn/plugin/"
weaHTML = "http://m.weather.com.cn/data/"
$().ready(function() {
 cityid = $.cookie('wea_cityid');
 if(cityid==null){
  LoadJS("http://fw.qq.com:80/ipaddress", function()
  {
   if (typeof IPData != "undefined")
   {
    city1 = IPData[2];
    city2 = IPData[3];
    city1 = city1.replace("省","")
    city1 = city1.replace("市","");
    if(city2=="") city2 = city1;
    $.cookie('wea_cityip', IPData[0]);
    getLocalCity("data/city.xml",0);
   }
  });
 }
 else{
  getWeather(cityid);
 }
});
function getLocalCity(turl,b)
{
 $.ajax({
    type: "GET",
    url: weaXML+turl,
    dataType: "text",
    success: function(msg){
   var cityArr = msg.split(",");
   for(var i=0;i <cityArr.length;i++){
    cid = cityArr[i].split("|")[0];
    if(b<3){
     if(cityArr[i].split("|")[1]==city1 || cityArr[i].split("|")[1]==city2){
      getLocalCity("data/city"+ cid +".xml",b+1);
      break;
     }
    }
    else{
     cid = cityArr[i].split("|")[1];
     getWeather(cid);
     break;
    }
   }
    }
 });
}
function getWeather(cid)
{
 $.cookie('wea_cityid', cid,{expires: 365});
 var weajs = weaHTML+cid+'.html';
 $.getJSON(
  weajs,
  function(objJson){
   var cityname=objJson.weatherinfo.city;  //上海
   var id=objJson.weatherinfo.cityid;   //101020100 
   var cityinfo1=objJson.weatherinfo.weather1; //晴转多云
   var cityinfo2=objJson.weatherinfo.weather2;
   var wd1=objJson.weatherinfo.wind1;   //北风3-4级
   var wd2=objJson.weatherinfo.wind2;
   var fl1=objJson.weatherinfo.fl1;   //3-4级
   var fl2=objJson.weatherinfo.fl2;
   var temp1=objJson.weatherinfo.temp1;  //4℃~-1℃
   var temp2=objJson.weatherinfo.temp2;
   var img1=objJson.weatherinfo.img1;
   var img2=objJson.weatherinfo.img2;
   var img3=objJson.weatherinfo.img3;
   var img4=objJson.weatherinfo.img4;
   var index=objJson.weatherinfo.index;
   var index_d=objJson.weatherinfo.index_d;
   var index_xc=objJson.weatherinfo.index_xc;
   var index_uv=objJson.weatherinfo.index_uv;
   var date=objJson.weatherinfo.date;
   var date_y=objJson.weatherinfo.date_y;
   var imgtitle1=objJson.weatherinfo.img_title1;
   var imgtitle2=objJson.weatherinfo.img_title2;
   var imgsingle=objJson.weatherinfo.img_single;
   var imgtitlesingle=objJson.weatherinfo.img_title_single;
   
   setWeather(id,cityname,cityinfo1,temp1,wd1)
 }); 
}
function LoadJS(jsUrl,fCallBack)
{
 var _script = document.createElement('script');
 _script.setAttribute('type', 'text/javascript');
 _script.setAttribute('charset', 'gb2312');
 _script.setAttribute('src', jsUrl);
 document.getElementsByTagName('head')[0].appendChild(_script);
 if(typeof fCallBack != "undefined")
 {
  if ($.browser.msie)
  {
   _script.onreadystatechange = function()
   {
    if (this.readyState=='loaded' || this.readyState=='complete')
    {fCallBack();}
   };
  }
  else if ($.browser.mozilla)
  {
   _script.onload = function(){fCallBack();};
  }
  else
  {
   fCallBack();
  }
 }
}
分享到：
| DropDownList 不能有多个项被选定的解决方 ...
评论
25 楼 coofucoo 2010-01-16  
maomaoysq 写道
ThinkingInAll 写道
调试了把不能用
http://service.weather.com.cn/plugin/data/city.xml
405 Not Allowed
屏蔽了



上面的仁兄，我一直在用应该没有问题的：）
上面的文件返回的信息如下，为一级城市的编码：

00|省,01|北京,02|上海,03|天津,04|重庆,05|黑龙江,06|吉林,07|辽宁,08|内蒙古,09|河北,10|山西,11|陕西,12|山东,13|新疆,14|西藏,15|青海,16|甘肃,17|宁夏,18|河南,19|江苏,20|湖北,21|浙江,22|安徽,23|福建,24|江西,25|湖南,26|贵州,27|四川,28|广东,29|云南,30|广西,31|海南,32|香港,33|澳门,34|台湾



XML解析错误：语法错误
位置：http://service.weather.com.cn/plugin/data/city.xml
行：1，列：1：00|省,01|北京,02|上海,03|天津,04|重庆,05|黑龙江,06|吉林,07|辽宁,08|内蒙古,09|河北,10|山西,11|陕西,12|山东,13|新疆,14|西藏,15|青海,16|甘肃,17|宁夏,18|河南,19|江苏,20|湖北,21|浙江,22|安徽,23|福建,24|江西,25|湖南,26|贵州,27|四川,28|广东,29|云南,30|广西,31|海南,32|香港,33|澳门,34|台湾
^

FF3.5.6下，大概知道啥原因了
24 楼 coofucoo 2010-01-16  
maomaoysq 写道
ThinkingInAll 写道
$.cookie我怎么没有那？第几版的jquery?


就是使用jquery.cookie.js呀

还有仁兄说不能用，可能小弟文笔不好没有写清楚，您仔细看看

setWeather函数可以自行修改生成您想要的天气信息格式

这个函数里面有页面的ID的，改成您页面相应的元素ID就可以了


ie6下测试ok，
ff3下测试看不到结果。不知道其他玩过的人发现没？
23 楼 quaff 2010-01-15  
参照楼主提供的数据url,做了一个chrome插件,欢迎试用
http://code.google.com/p/chinaweather-chrome/

qq的地址用xhr请求会乱码,这个问题貌似解决不了,只好用script tag搞
22 楼 yhailj 2010-01-15  
maomaoysq 写道

google的城市是汉语拼音，不太支持国情，比如输入【http://www.google.com/ig/api?hl=zh_cn&weather=上海】


也许吧. 不支持国情. 但可以保证足够稳定
要知道, 要做到 "不作恶" . 哪个公司能做到这点 ? 你到中国给找一个出来看看
21 楼 maomaoysq 2010-01-14  
yhailj 写道
天朝 的 多数公司做的 "free" web services 最好就不要用了
弄不好哪天收到一封邮件. 有使用限制或等等之类

信赖 不作恶的 google , :
http://www.google.com/ig/api?hl=zh_cn&weather=beijing 

/**
 * 天气查询. 推荐使用此 google service 查询<br/>
 * <a href="mailto:liu_anxin@yahoo.cn">天气</a>
 *
 * @author Yh
 */
public class WeatherUtils {

	/**
	 * 使用 google 查询天气<br/>
	 * 上海: http://www.google.com/ig/api?hl=zh_cn&weather=shanghai
	 * 
	 * @param city 城市拼音, 如 北京: beijing
	 */
	public static String getweather(String city) {
		StringBuilder sbd = new StringBuilder();
		try {
			String ur = "http://www.google.com/ig/api?hl=zh_cn&weather=";
			java.net.URL url = new java.net.URL(ur + city);
			java.io.InputStream in = url.openStream();

			String st = "";
			// 将流转换为 文本. 此一过程是为了解决乱码问题
			java.io.ByteArrayOutputStream bos = new java.io.ByteArrayOutputStream();
			int i = -1;
			while ((i = in.read()) != -1)
				bos.write(i);

			// 转换编码为 GB18030, 否则会乱码
			st = bos.toString().replace("<?xml version=\"1.0\"?>",
					"<?xml version=\"1.0\" encoding=\"GB18030\"?>");

			// 将文本转换成流
			java.io.InputStream inp = new java.io.ByteArrayInputStream(st
					.getBytes());

			// 读取流
			org.w3c.dom.Document doc = javax.xml.parsers.DocumentBuilderFactory
					.newInstance().newDocumentBuilder().parse(inp);

			// 日期 
			org.w3c.dom.NodeList n1 = doc.getElementsByTagName(
					"forecast_information").item(0).getChildNodes();
			// 城市:
			sbd.append(n1.item(4).getAttributes().item(0).getNodeValue())
					.append(" ").append(city).append(" : ");

			// 天气, 最高气温 最低气温
			org.w3c.dom.NodeList n2 = doc.getElementsByTagName(
					"forecast_conditions").item(0).getChildNodes();
			sbd.append(n2.item(4).getAttributes().item(0).getNodeValue())
					.append(", ").append(
							n2.item(1).getAttributes().item(0).getNodeValue())
					.append("℃ － ").append(
							n2.item(2).getAttributes().item(0).getNodeValue())
					.append("℃");

		} catch (Exception e) {
			sbd.append("获取天气失败或不存在此城市");
		}
		return sbd.toString();
	}

	public static void main(String[] args) {
		System.out.println("北京天气: " + WeatherUtils.getweather("beijing"));
	}
}


javascript 没搞过



google的城市是汉语拼音，不太支持国情，比如输入【http://www.google.com/ig/api?hl=zh_cn&weather=上海】
20 楼 maomaoysq 2010-01-14  
fengzhizi8584 写道
有跨域问题？？？？？？


我的asp版本：根据用户上网地址自动获取所在城市的天气信息
http://www.iteye.com/topic/570723
19 楼 fengzhizi8584 2010-01-14  
有跨域问题？？？？？？
18 楼 gaoshang502 2010-01-14  
出不来效果，不知道你是怎么弄的
17 楼 ageha67 2010-01-14  
楼主的代码我还没试过，不论是否能用，至少提供了一种思路、以后如果遇到类似情况可以借鉴。。也多谢yhailj 提供的java版本的获取天气的代码。。yhailj 说的有些道理，还是比较倾向使用google
16 楼 maomaoysq 2010-01-13  
ThinkingInAll 写道
$.cookie我怎么没有那？第几版的jquery?


就是使用jquery.cookie.js呀

还有仁兄说不能用，可能小弟文笔不好没有写清楚，您仔细看看

setWeather函数可以自行修改生成您想要的天气信息格式

这个函数里面有页面的ID的，改成您页面相应的元素ID就可以了
15 楼 maomaoysq 2010-01-13  
ThinkingInAll 写道
调试了把不能用
http://service.weather.com.cn/plugin/data/city.xml
405 Not Allowed
屏蔽了



上面的仁兄，我一直在用应该没有问题的：）
上面的文件返回的信息如下，为一级城市的编码：

00|省,01|北京,02|上海,03|天津,04|重庆,05|黑龙江,06|吉林,07|辽宁,08|内蒙古,09|河北,10|山西,11|陕西,12|山东,13|新疆,14|西藏,15|青海,16|甘肃,17|宁夏,18|河南,19|江苏,20|湖北,21|浙江,22|安徽,23|福建,24|江西,25|湖南,26|贵州,27|四川,28|广东,29|云南,30|广西,31|海南,32|香港,33|澳门,34|台湾
14 楼 yhailj 2010-01-13  
天朝 的 多数公司做的 "free" web services 最好就不要用了
弄不好哪天收到一封邮件. 有使用限制或等等之类

信赖 不作恶的 google , :
http://www.google.com/ig/api?hl=zh_cn&weather=beijing 

import java.io.ByteArrayInputStream;
import java.io.ByteArrayOutputStream;
import java.io.InputStream;
import java.net.URL;

import javax.xml.parsers.DocumentBuilderFactory;

import org.w3c.dom.Document;
import org.w3c.dom.NodeList;

/**
 * 天气查询. 推荐使用此 google service 查询<br/>
 * 
 */
public class WeatherUtils {

	/**
	 * 使用 google 查询天气<br/>
	 * 上海: http://www.google.com/ig/api?hl=zh_cn&weather=shanghai
	 * 
	 * @param city 城市拼音, 如 北京: beijing
	 * @return wuhan : 2010-02-27 天气： 晴, 温度： 8 － 20℃, 湿度： 88%, 风向： 东南、风速：4 米/秒
	 */
	public static String getweather(String city) {
		StringBuilder sbd = new StringBuilder();
		try {
			String ur = "http://www.google.com/ig/api?hl=zh_cn&weather=";
			URL url = new URL(ur + city);
			InputStream in = url.openStream();

			// 解决乱码问题
			ByteArrayOutputStream bos = new ByteArrayOutputStream();
			int i = -1;
			while ((i = in.read()) != -1)
				bos.write(i);

			// 使用 utf-8 编码. 若不使用则默认会使用本地编码 GB18030, 则会有乱码
			InputStream inp = new ByteArrayInputStream(bos.toString()
					.getBytes("utf-8"));

			// 读取流
			Document doc = DocumentBuilderFactory
					.newInstance().newDocumentBuilder().parse(inp);

			// 城市:
			sbd.append(city).append(" : ");
			
			NodeList n1 = getNode(doc, "forecast_information", 0);
			// 日期
			sbd.append(getAttributeValue(n1, 4, 0) + " ");
			
			NodeList n2 = getNode(doc, "current_conditions", 0);
			System.out.println("天气: " + getAttributeValue(n2, 0, 0));
			System.out.println(getAttributeValue(n2, 3, 0));
			System.out.println(getAttributeValue(n2, 5, 0));
			
			// 天气
			sbd.append("天气： " + getAttributeValue(n2, 0, 0) + ", ");

			NodeList n3 = getNode(doc, "forecast_conditions", 0);
			// 最低气温
			sbd.append("温度： " + getAttributeValue(n3, 1, 0));
			sbd.append(" － ");
			// 最高气温
			sbd.append(getAttributeValue(n3, 2, 0) + "℃, ");
			
			// 湿度
			sbd.append(getAttributeValue(n2, 3, 0) + ", ");
			// 风向
			sbd.append(getAttributeValue(n2, 5, 0));
		} catch (Exception e) {
			sbd.append("获取天气失败或不存在此城市");
		}

		return sbd.toString();
	}
	
	/**
	 * 获取节点集合
	 * @param doc : Doument 对象
	 * @param tagName : 节点名
	 * @param index : 找到的第几个
	 * @return
	 */
	private static NodeList getNode(Document doc, String tagName, int index) {
		return doc.getElementsByTagName(tagName).item(index).getChildNodes();
	}
	
	/**
	 * 获取节点内容
	 * @param node : nodelist
	 * @param index : 节点索引, 也可使用 getNamedItem(String name) 节点名查找
	 * @param item : 属性的索引
	 * @return
	 */
	private static String getAttributeValue(NodeList node, int index, int item) {
		return node.item(index).getAttributes().item(item).getNodeValue();
	}

	public static void main(String[] args) {
		System.out.println(getweather("wuhan"));
	}
	
}


javascript 没搞过
13 楼 keer2345 2010-01-13  
提供下载才是王道
不过感谢楼主，我从中学到了不少东西
12 楼 Snow_Young 2010-01-12  
LZ确定自己运行成功过？
11 楼 javaAK 2010-01-12  
为做出贡献的人颁奖。
10 楼 zqding 2010-01-12  
不错，很好，感谢共享
9 楼 yq76034150 2010-01-12  
拜托老兄，您有没有测试过，js不能跨域取别人网站的数据。除非别人的网站支持jsonp，而天气网是不支持的。ie会弹出安全提示，ff压根不会给你执行的
8 楼 ThinkingInAll 2010-01-11  
希望封装一下，并做缓存
7 楼 zengbailan 2010-01-11  
不错, 很好.
6 楼 IamNull 2010-01-11  
好東西。。玩玩先，可能我要嘗試更換天氣預報的網站，也許用 Yahoo 的
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jQuery 浮云天气，jQuery天气预报插件

    这是一个开源的、基于jQuery 函数库的 JavaScript 天气预报脚本插件。 代码语法完全符合W3C网页标准，完全兼容各种主流浏览器。 本插件主要用于天气预报的展示。 浏览器兼容： Internet Explorer 6 /7 /8 /9 Fire...

    超级漂亮简单实用jQuery天气预报插件

    超级漂亮简单实用jQuery天气预报插件下载。一款界面设计扁平化，简洁大气的世界各地天气预报插件。支持手动输入城市（支持英文或中文拼音）获取天气信息。这款jQuery天气预报插件的特点在于可以动态切换城市，通过...

    jquery天气预报

    jquery天气预报！天气预报，可以直接用！！

    jQuery天气预报插件模板.zip

    《jQuery天气预报插件模板详解》 在网页设计与开发中，为了提升用户体验，许多开发者会集成实时天气预报功能。jQuery作为一个轻量级、高效且易用的JavaScript库，为实现这一功能提供了便利。本篇文章将详细介绍一个...

    简单漂亮的jQuery自动定位当地天气预报代码

    在这款天气预报插件中，jQuery的主要作用可能是实现页面元素的动态更新，如当用户加载或刷新页面时，自动获取并显示他们的地理位置信息。 要实现自动定位，插件可能利用HTML5的Geolocation API。这个API允许网页...

    jQuery 3D卡片天气预报插件 支持手机端滑动

    《jQuery 3D卡片天气预报插件：手机端滑动技术解析》 在现代Web开发中，用户体验成为了设计的核心考量之一。为了提升网页的互动性和吸引力，开发者们常常利用JavaScript库，如jQuery，来实现各种动态效果。"jQuery ...

    jquery封装的天气预报

    "简单的jquery天气预报插件"则表明这个插件的实现较为轻量级，代码可能相对简洁，易于理解和维护。 标签“天气预报”直接指出了这个项目的核心功能，即显示天气信息。这类插件通常会通过调用第三方天气API（如...

    jQuery天气预报API查询代码.zip

    利用jQuery天气预报API查询代码，可以在网站、移动应用或其他Web平台上创建用户友好的天气插件。例如，可以在首页显示当前位置的天气情况，或者让用户输入城市名查询天气。此外，还可以结合地图API，定位用户所在...

    天气预报插件源码

    【标题】"天气预报插件源码"是一个基于JavaScript库jQuery开发的插件，用于在网页上展示实时天气预报信息。这个插件采用div布局，为用户提供了一个直观且易于集成的解决方案来显示当地的天气状况。 【描述】描述中...

    jQuery/CSS3天气预报插件 可切换城市

    今天我们要介绍的同样是一个播报天气预报的界面，使用jQuery和CSS3技术实现，与前一个不同的是，这款jQuery天气预报插件的特点在于可以动态切换城市，通过天气预报网站相关接口数据的读取来显示不同城市的天气情况，...

    jQuery天气插件自动定位当地天气预报代码特效源码

    标题中的“jQuery天气插件自动定位当地天气预报代码特效源码”揭示了这是一个基于JavaScript库jQuery的天气插件，它的核心功能是能够自动检测用户所在地的地理位置，并显示相应的天气预报信息。这个插件通过集成API...

    jQuery自动定位当地天气预报代码.zip

    【jQuery自动定位当地天气预报代码】是一个基于JavaScript库jQuery实现的实用工具，它能够自动获取用户所在地区的天气信息，并在网页上展示出来。这个插件的设计理念是为网站添加一个简洁且直观的天气预报功能，让...

    JS,jquery调用天气预报api接口

    本教程将详细讲解如何利用jQuery的AJAX功能调用天气预报API接口，以获取并展示实时天气信息。 首先，我们需要理解什么是API。API（Application Programming Interface）是应用程序接口，它允许不同的软件应用之间...

    HTML5 Canvas和jQuery实用实时天气预报App

    weather-app是一款非常实用的HTML5 Canvas和jQuery实用实时天气预报App。你可以通过这个天气预报App来查询各个城市的天气，只需要在搜索框中输入英文的城市名称，就可以实时搜索该城市的天气情况。

    jQuery自动获取本地时间日期天气预报代码.zip

    总之，这个项目提供了一个实用的jQuery插件，结合了获取本地时间和天气预报的功能，使得网页能够实时显示这些信息，提高了用户体验。通过学习和使用这样的插件，开发者可以更好地理解和掌握jQuery在实际项目中的应用...

    jquery天气预报UI HTC手机界面数字时间表

    【标题解析】：“jquery天气预报UI HTC手机界面数字时间表”这一标题暗示了这是一个使用jQuery技术构建的用户界面，特别设计用于HTC智能手机，显示天气预报以及数字式的时间表。这个UI界面可能集成了实时天气数据...

    jQuery自动获取本地时间日期天气预报代码

    jQuery自动获取本地天气预报代码是一款自动获取本地时间日期天气等情况的jquery插件。

    jQuery 浮云天气插件 (jQuery Clouds Weather Plus) v1.0.zip

    在Web开发领域，jQuery以其简洁、易用的API深受开发者喜爱，而jQuery Clouds Weather Plus v1.0正是这样一个利用jQuery功能实现的JavaScript天气预报插件。这个开源项目旨在为网站提供一种生动、直观的天气展示方式...

    jQuery天气插件自动定位当地天气预报代码特效源码.zip

    《jQuery天气插件实现自动定位天气预报的代码详解》 在网页开发中，为了提供更加人性化的用户体验，很多网站会采用动态展示用户所在地区的天气预报。这种功能的实现往往依赖于JavaScript库，其中jQuery因其易用性和...

Magicbox
Global site tag (gtag.js) - Google Analytics