我用FineReport开发了挺多报表,但集成天气预报这样提高交互和人性化的还是第一次,所以跟大家分享下。
这个报表是综合的门店销售管理分析面板,可以查询业绩分析、店员销售分析,店铺排行分析(可以看出是个连锁店),VIP生日提醒。怎么具体制作模板,业内人士一看即明,无需多讲,就重点说下怎么集成天气吧。
先上图:
方法是加一段JS代码,具体如下:
[javascript] view plaincopy
var weather=function(){
var tmp=0;
var SWther={w:[{}],add:{}};
var SWther={};
this.getWeather=function(city,type){
//city=utf8ToGBK(city);
/*
$.getScript("http://php.weather.sina.com.cn/iframe/index/w_cl.php?code=js&day=2&city="+city+"&dfc=3",function(){if(type=='js'){echo(city);}});
**/
$.ajax({
dataType:'script',
scriptCharset:'gb2312',////////
url:"http://php.weather.sina.com.cn/iframe/index/w_cl.php?code=js&day=2&city="+city+"&dfc=3",
success:function(){
if(type=='js'){echo(city);}
}
})
}
function dis_img(weather){
var style_img="image/s_13.png";
if(weather.indexOf("多云")!==-1||weather.indexOf("晴")!==-1){style_img="image/s_1.png";}
else if(weather.indexOf("多云")!==-1&&weather.indexOf("阴")!==-1){style_img="image/s_2.png";}
else if(weather.indexOf("阴")!==-1&&weather.indexOf("雨")!==-1){style_img="image/s_3.png";}
else if(weather.indexOf("晴")!==-1&&weather.indexOf("雨")!==-1){style_img="image/s_12.png";}
else if(weather.indexOf("晴")!==-1&&weather.indexOf("雾")!==-1){style_img="image/s_12.png";}
else if(weather.indexOf("晴")!==-1){style_img="image/s_13.png";}
else if(weather.indexOf("多云")!==-1){style_img="image/s_2.png";}
else if(weather.indexOf("阵雨")!==-1){style_img="image/s_3.png";}
else if(weather.indexOf("小雨")!==-1){style_img="image/s_3.png";}
else if(weather.indexOf("中雨")!==-1){style_img="image/s_4.png";}
else if(weather.indexOf("大雨")!==-1){style_img="image/s_5.png";}
else if(weather.indexOf("暴雨")!==-1){style_img="image/s_5.png";}
else if(weather.indexOf("冰雹")!==-1){style_img="image/s_6.png";}
else if(weather.indexOf("雷阵雨")!==-1){style_img="image/s_7.png";}
else if(weather.indexOf("小雪")!==-1){style_img="image/s_8.png";}
else if(weather.indexOf("中雪")!==-1){style_img="image/s_9.png";}
else if(weather.indexOf("大雪")!==-1){style_img="image/s_10.png";}
else if(weather.indexOf("暴雪")!==-1){style_img="image/s_10.png";}
else if(weather.indexOf("扬沙")!==-1){style_img="image/s_11.png";}
else if(weather.indexOf("沙尘")!==-1){style_img="image/s_11.png";}
else if(weather.indexOf("雾")!==-1){style_img="image/s_12.png";}
else{style_img="image/s_2.png";}
return style_img;};
function echo(city){
$('#city').html(city);
$('#weather').html(window.SWther.w[city][0].s1);
$('#temperature').html(window.SWther.w[city][0].t1+'°');
$('#wind').html(window.SWther.w[city][0].p1);
$('#direction').html(window.SWther.w[city][0].d1);
var T_weather_img=dis_img(window.SWther.w[city][0].s1);
$('#T_weather_img').html("<img src='"+T_weather_img+"' title='"+window.SWther.w[city][0].s1+"' alt='"+window.SWther.w[city][0].s1+"' /><br><span id=\"T_weather\"></span>");
//$('#T_temperature').html(window.SWther.w[city][0].t1+'~'+window.SWther.w[city][0].t2+'°');
$('#T_temperature').html(window.SWther.w[city][0].t1);
$('#T_weather').html(window.SWther.w[city][0].s1);
$('#T_wind').html(window.SWther.w[city][0].p1);
$('#T_direction').html(window.SWther.w[city][0].d1);
$('#M_weather').html(window.SWther.w[city][1].s1);
var M_weather_img=dis_img(window.SWther.w[city][1].s1);
$('#M_weather_img').html("<img src='"+M_weather_img+"' title='"+window.SWther.w[city][1].s1+"' alt='"+window.SWther.w[city][1].s1+"' />");
$('#M_temperature').html(window.SWther.w[city][1].t1+'~'+window.SWther.w[city][1].t2+'°');
$('#M_wind').html(window.SWther.w[city][1].p1);
$('#M_direction').html(window.SWther.w[city][1].d1);
$('#L_weather').html(window.SWther.w[city][2].s1);
var L_weather_img=dis_img(window.SWther.w[city][2].s1);
$('#L_weather_img').html("<img src='"+L_weather_img+"' title='"+window.SWther.w[city][2].s1+"' alt='"+window.SWther.w[city][2].s1+"' />");
$('#L_temperature').html(window.SWther.w[city][2].t1+'~'+window.SWther.w[city][2].t2+'°');
$('#L_wind').html(window.SWther.w[city][2].p1);$('#L_direction').html(window.SWther.w[city][2].d1);
}
}
//weather结束了
function jintian(){
weather_.getWeather(city,'js');
};
如此,大功告成。
分享到:
相关推荐
PageStackNavigation高大上分页 PageStackNavigation高大上分页 PageStackNavigation高大上分页 PageStackNavigation高大上分页 PageStackNavigation高大上分页
在 http://www.cnblogs.com/strick/p/5448570.html 有详细说明
高大上IOS风格PPT制作教程.pptx
高大上IOS风格PPT制作教程。包括背景选择、形状制作、图片处理、色彩搭配、相关细节等内容。
如何制作高大上的PPT.ppt
简约创意共赢未来高大上带图表商务项目介绍模板学习教案.pptx
响应式导航,图片轮播,图片轮播,动态登录框,响应式导航等,都是拿来就用的好资源,稍微修改一下就变身为高大上网页。
这是PPT教学视频,讲解老师是PPT方面的牛人,讲解清晰流利,知识面全,学会以后立马让自己PPT能力有一个质的飞升,想成为下一个PPT达人吗,赶快下载来学习吧
如何制作高大上的PPT学习教案.pptx
10套高大上商务PPT模板.rar
电脑各种常用快捷键,做一个高大上的电脑使用者
ppt首页设计示例,首页模板,18套高大上首页示例ppt模板免费下载,第一集分享,@西禾视觉作品。
10套简历PPT模板,样式丰富,什么风格样式的都有,可以拿去参考下。
PPT模板带有浓郁的职场气息,本套简约的PPT适合制作商务工作总结、工作汇报PowerPoint。 关键词:动态PPT模板,简洁、简约、简单幻灯片背景图片,工作汇报、工作总结PPT模板,商务PPT模板,.PPTX格式;
高大上PPT模板 相信对你们的学习使用都有帮助 希望能帮到大家
ppt首页设计示例,首页模板,22套高大上首页示例ppt模板免费下载,第二集分享,@西禾视觉作品。
高大上web登录界面,值得一看,包含源码。
Axure高大上低保证组件库Stwo奉献
高大上有内涵的口号_15班高大上运动会口号.docx