阿坝州网站建设公司

带有天气预报的高大上web报表制作分享

我用FineReport开发了挺多报表，但集成天气预报这样提高交互和人性化的还是第一次，所以跟大家分享下。

成都创新互联公司专注于金口河企业网站建设,响应式网站建设,商城网站建设。金口河网站建设公司,为金口河等地区提供建站服务。全流程按需定制设计，专业设计，全程项目跟踪，成都创新互联公司专业和态度为您提供的服务

       这个报表是综合的门店销售管理分析面板，可以查询业绩分析、店员销售分析，店铺排行分析（可以看出是个连锁店），VIP生日提醒。怎么具体制作模板，业内人士一看即明，无需多讲，就重点说下怎么集成天气吧。

       先上图：

带有天气预报的高大上web报表制作分享

 方法是加一段JS代码，具体如下：

[javascript] view plaincopy

  1. var weather=function(){  

  2.     var tmp=0;  

  3.     var SWther={w:[{}],add:{}};  

  4.     var SWther={};  

  5.     this.getWeather=function(city,type){  

  6.         //city=utf8ToGBK(city);  

  7.         /* 

  8.         $.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);}}); 

  9.         **/  

  10. $.ajax({  

  11. dataType:'script',  

  12. scriptCharset:'gb2312',////////  

  13. url:"http://php.weather.sina.com.cn/iframe/index/w_cl.php?code=js&day=2&city="+city+"&dfc=3",  

  14. success:function(){  

  15. if(type=='js'){echo(city);}  

  16. }  

  17. })  

  18.   

  19.         }  

  20.   

  21. function dis_img(weather){  

  22.     var style_img="p_w_picpath/s_13.png";  

  23.     if(weather.indexOf("多云")!==-1||weather.indexOf("晴")!==-1){style_img="p_w_picpath/s_1.png";}  

  24.     else if(weather.indexOf("多云")!==-1&&weather.indexOf("阴")!==-1){style_img="p_w_picpath/s_2.png";}  

  25.     else if(weather.indexOf("阴")!==-1&&weather.indexOf("雨")!==-1){style_img="p_w_picpath/s_3.png";}  

  26.     else if(weather.indexOf("晴")!==-1&&weather.indexOf("雨")!==-1){style_img="p_w_picpath/s_12.png";}  

  27.     else if(weather.indexOf("晴")!==-1&&weather.indexOf("雾")!==-1){style_img="p_w_picpath/s_12.png";}  

  28.     else if(weather.indexOf("晴")!==-1){style_img="p_w_picpath/s_13.png";}  

  29.     else if(weather.indexOf("多云")!==-1){style_img="p_w_picpath/s_2.png";}  

  30.     else if(weather.indexOf("阵雨")!==-1){style_img="p_w_picpath/s_3.png";}  

  31.     else if(weather.indexOf("小雨")!==-1){style_img="p_w_picpath/s_3.png";}  

  32.     else if(weather.indexOf("中雨")!==-1){style_img="p_w_picpath/s_4.png";}  

  33.     else if(weather.indexOf("大雨")!==-1){style_img="p_w_picpath/s_5.png";}  

  34.     else if(weather.indexOf("暴雨")!==-1){style_img="p_w_picpath/s_5.png";}  

  35.     else if(weather.indexOf("冰雹")!==-1){style_img="p_w_picpath/s_6.png";}  

  36.     else if(weather.indexOf("雷阵雨")!==-1){style_img="p_w_picpath/s_7.png";}  

  37.     else if(weather.indexOf("小雪")!==-1){style_img="p_w_picpath/s_8.png";}  

  38.     else if(weather.indexOf("中雪")!==-1){style_img="p_w_picpath/s_9.png";}  

  39.     else if(weather.indexOf("大雪")!==-1){style_img="p_w_picpath/s_10.png";}  

  40.     else if(weather.indexOf("暴雪")!==-1){style_img="p_w_picpath/s_10.png";}  

  41.     else if(weather.indexOf("扬沙")!==-1){style_img="p_w_picpath/s_11.png";}  

  42.     else if(weather.indexOf("沙尘")!==-1){style_img="p_w_picpath/s_11.png";}  

  43.     else if(weather.indexOf("雾")!==-1){style_img="p_w_picpath/s_12.png";}  

  44.     else{style_img="p_w_picpath/s_2.png";}  

  45.     return style_img;};  

  46.       

  47. function echo(city){  

  48.     $('#city').html(city);  

  49.     $('#weather').html(window.SWther.w[city][0].s1);  

  50.     $('#temperature').html(window.SWther.w[city][0].t1+'°');  

  51.     $('#wind').html(window.SWther.w[city][0].p1);  

  52.     $('#direction').html(window.SWther.w[city][0].d1);  

  53.           

  54.     var T_weather_img=dis_img(window.SWther.w[city][0].s1);  

  55.     $('#T_weather_img').html("
    ");  

  56.     //$('#T_temperature').html(window.SWther.w[city][0].t1+'~'+window.SWther.w[city][0].t2+'°');  

  57.     $('#T_temperature').html(window.SWther.w[city][0].t1);  

  58. $('#T_weather').html(window.SWther.w[city][0].s1);  

  59.   

  60.     $('#T_wind').html(window.SWther.w[city][0].p1);  

  61.     $('#T_direction').html(window.SWther.w[city][0].d1);  

  62.     $('#M_weather').html(window.SWther.w[city][1].s1);  

  63.       

  64.     var M_weather_img=dis_img(window.SWther.w[city][1].s1);  

  65.     $('#M_weather_img').html("");  

  66.     $('#M_temperature').html(window.SWther.w[city][1].t1+'~'+window.SWther.w[city][1].t2+'°');  

  67.     $('#M_wind').html(window.SWther.w[city][1].p1);  

  68.     $('#M_direction').html(window.SWther.w[city][1].d1);  

  69.     $('#L_weather').html(window.SWther.w[city][2].s1);  

  70.       

  71.     var L_weather_img=dis_img(window.SWther.w[city][2].s1);  

  72.     $('#L_weather_img').html("");  

  73.     $('#L_temperature').html(window.SWther.w[city][2].t1+'~'+window.SWther.w[city][2].t2+'°');  

  74.     $('#L_wind').html(window.SWther.w[city][2].p1);$('#L_direction').html(window.SWther.w[city][2].d1);  

  75.     }  

  76.     }  

  77.     //weather结束了  

  78.     function jintian(){  

  79.         weather_.getWeather(city,'js');  

  80.         };  


如此，大功告成。


网页标题：带有天气预报的高大上web报表制作分享
标题来源：http://azwzsj.com/article/pgeeoe.html

其他资讯