天气信息来源：中国天气网【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'> </span>
<span id='jsWeather'> </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();
}
}
}
分享到：
相关推荐
这是一个开源的、基于jQuery 函数库的 JavaScript 天气预报脚本插件。 代码语法完全符合W3C网页标准，完全兼容各种主流浏览器。 本插件主要用于天气预报的展示。 浏览器兼容： Internet Explorer 6 /7 /8 /9 Fire...
超级漂亮简单实用jQuery天气预报插件下载。一款界面设计扁平化，简洁大气的世界各地天气预报插件。支持手动输入城市（支持英文或中文拼音）获取天气信息。这款jQuery天气预报插件的特点在于可以动态切换城市，通过...
jquery天气预报！天气预报，可以直接用！！
《jQuery天气预报插件模板详解》 在网页设计与开发中，为了提升用户体验，许多开发者会集成实时天气预报功能。jQuery作为一个轻量级、高效且易用的JavaScript库，为实现这一功能提供了便利。本篇文章将详细介绍一个...
在这款天气预报插件中，jQuery的主要作用可能是实现页面元素的动态更新，如当用户加载或刷新页面时，自动获取并显示他们的地理位置信息。 要实现自动定位，插件可能利用HTML5的Geolocation API。这个API允许网页...
《jQuery 3D卡片天气预报插件：手机端滑动技术解析》 在现代Web开发中，用户体验成为了设计的核心考量之一。为了提升网页的互动性和吸引力，开发者们常常利用JavaScript库，如jQuery，来实现各种动态效果。"jQuery ...
"简单的jquery天气预报插件"则表明这个插件的实现较为轻量级，代码可能相对简洁，易于理解和维护。 标签“天气预报”直接指出了这个项目的核心功能，即显示天气信息。这类插件通常会通过调用第三方天气API（如...
利用jQuery天气预报API查询代码，可以在网站、移动应用或其他Web平台上创建用户友好的天气插件。例如，可以在首页显示当前位置的天气情况，或者让用户输入城市名查询天气。此外，还可以结合地图API，定位用户所在...
【标题】"天气预报插件源码"是一个基于JavaScript库jQuery开发的插件，用于在网页上展示实时天气预报信息。这个插件采用div布局，为用户提供了一个直观且易于集成的解决方案来显示当地的天气状况。 【描述】描述中...
今天我们要介绍的同样是一个播报天气预报的界面，使用jQuery和CSS3技术实现，与前一个不同的是，这款jQuery天气预报插件的特点在于可以动态切换城市，通过天气预报网站相关接口数据的读取来显示不同城市的天气情况，...
标题中的“jQuery天气插件自动定位当地天气预报代码特效源码”揭示了这是一个基于JavaScript库jQuery的天气插件，它的核心功能是能够自动检测用户所在地的地理位置，并显示相应的天气预报信息。这个插件通过集成API...
【jQuery自动定位当地天气预报代码】是一个基于JavaScript库jQuery实现的实用工具，它能够自动获取用户所在地区的天气信息，并在网页上展示出来。这个插件的设计理念是为网站添加一个简洁且直观的天气预报功能，让...
本教程将详细讲解如何利用jQuery的AJAX功能调用天气预报API接口，以获取并展示实时天气信息。 首先，我们需要理解什么是API。API（Application Programming Interface）是应用程序接口，它允许不同的软件应用之间...
weather-app是一款非常实用的HTML5 Canvas和jQuery实用实时天气预报App。你可以通过这个天气预报App来查询各个城市的天气，只需要在搜索框中输入英文的城市名称，就可以实时搜索该城市的天气情况。
总之，这个项目提供了一个实用的jQuery插件，结合了获取本地时间和天气预报的功能，使得网页能够实时显示这些信息，提高了用户体验。通过学习和使用这样的插件，开发者可以更好地理解和掌握jQuery在实际项目中的应用...
【标题解析】：“jquery天气预报UI HTC手机界面数字时间表”这一标题暗示了这是一个使用jQuery技术构建的用户界面，特别设计用于HTC智能手机，显示天气预报以及数字式的时间表。这个UI界面可能集成了实时天气数据...
jQuery自动获取本地天气预报代码是一款自动获取本地时间日期天气等情况的jquery插件。
在Web开发领域，jQuery以其简洁、易用的API深受开发者喜爱，而jQuery Clouds Weather Plus v1.0正是这样一个利用jQuery功能实现的JavaScript天气预报插件。这个开源项目旨在为网站提供一种生动、直观的天气展示方式...
《jQuery天气插件实现自动定位天气预报的代码详解》 在网页开发中，为了提供更加人性化的用户体验，很多网站会采用动态展示用户所在地区的天气预报。这种功能的实现往往依赖于JavaScript库，其中jQuery因其易用性和...