预报在线：实现文字显示在图片上和切换选项卡

需求：实现文字显示在图片上和切换选项卡，显示不同的文字；效果如下图：





代码实现：

JSP部分代码：

<div style="float:left;width:660px;padding:0px;padding-bottom:15px;position:relative;">

        <!--  添加div： 开始 -->

        <div style="position:absolute; z-index:2;left:480px; top:40px;text-align: left;"
id ="maxt">

        <c:if test="${not empty maxT && not empty minT}"> 

        最高温度：${obtname } ${maxT }℃<br/>最低温度：${obtname2 } ${minT }℃

        </c:if>

        </div>

        <div style="position:absolute; z-index:2; left:480px; top:40px"id ="maxr">

        <c:if test="${not empty maxR && maxR !=0.0}">

        最大日雨量：${obtname4 } ${maxR }mm

        </c:if>

        </div>

        <div style="position:absolute; z-index:2; left:480px; top:40px"id ="maxw">

        <c:if test="${not empty maxW && not empty obtname3}">

        日最大瞬时：${obtname3 } ${maxW }m/s

        </c:if>

        </div>

<!--  添加div： 结束 --> 

</div>

js部分代码：

Date.prototype.format = function(format)

{

var o = {

            "M+" : this.getMonth()+1, //month

            "d+" : this.getDate(), //day

            "h+" : this.getHours(), //hour

            "m+" : this.getMinutes(), //minute

            "s+" : this.getSeconds(), //second

            "q+" : Math.floor((this.getMonth()+3)/3), //quarter

            "S" : this.getMilliseconds() //millisecond

        }

    if(/(y+)/.test(format))

    format=format.replace(RegExp.$1,(this.getFullYear()+"").substr(4 - RegExp.$1.length));

    for(var k in o)

    if(new RegExp("("+ k +")").test(format))

    format = format.replace(RegExp.$1,RegExp.$1.length==1 ? o[k] : ("00"+ o[k]).substr((""+ o[k]).length));

    return format;

}

var d = 10,sp = "start", nIntervId = '',x = parseInt(d),dd="(单位:℃)    ";

var root = "##########省略#######";

$(document).ready(function(){
$("#maxt").show(); 
$("#maxr").hide(); 
$("#maxw").hide();
$(".html-image").attr('width',655);
$(".html-image").attr('height',375);

var date = new Date();
date.setMinutes(date.getMinutes()-7);
var dtime = dd+date.format("yyyy年MM月dd日hh时mm分");
var xtime = date.format("yyyyMMddhhmm")+"00";
 
$("#load-image10").attr('timetext',dtime);
$("#load-image10").attr('src',root+'/temp/'+xtime+'/finish.png');
$('#timetext').html(dtime);
 
for(var i = 1; i < 10; i++){
date.setMinutes(date.getMinutes()-5);
dtime = dd+date.format("yyyy年MM月dd日hh时mm分");
xtime = date.format("yyyyMMddhhmm")+"00";
 
var n = 10-i;
$("#load-image"+n).attr('timetext',dtime);
$("#load-image"+n).attr('src',root+'/temp/'+xtime+'/finish.png');
}

$("#load-image"+10).removeClass('load-image');
$('span[id ^= "zhjc-sapn"]').css({'background-color':'#FAFAFA'});
$('#zhjc-sapn10').css({'background-color':'#C5C7C6'});

function changeImg(type,thiz){
var date = new Date();
if(type == 'lightning'){
$("#maxt").hide(); 
$("#maxr").hide(); 
$("#maxw").hide(); 
date.setMinutes(date.getMinutes()-2);
$(".html-image").attr('width',600);
$(".html-image").attr('height',290);
$(".html-image").css({'margin':'40px 20px 20px 20px'}); //szbigmap1.png
$( ".html-image" ).error(function() {
    $( this ).attr( "src", root+'/szbigmap1.png' );
  });
}else{
if(type == 'fog' || type == 'haze') {
$("#maxt").hide();
$("#maxr").hide(); 
$("#maxw").hide(); 
date.setMinutes(date.getMinutes()-40);
}
else if (type == 'temp') {
$("#maxt").show(); 
$("#maxr").hide(); 
$("#maxw").hide();
date.setMinutes(date.getMinutes()-7);
}else if (type == 'rain') {
$("#maxt").hide(); 
$("#maxr").show(); 
$("#maxw").hide();
date.setMinutes(date.getMinutes()-7);
}else if (type == 'wind') {
$("#maxt").hide(); 
$("#maxr").hide(); 
$("#maxw").show();
date.setMinutes(date.getMinutes()-7);
}else if (type == 'visi') {
$("#maxt").hide();
$("#maxr").hide(); 
$("#maxw").hide();
date.setMinutes(date.getMinutes()-7);
}
$(".html-image").attr('width',655);
$(".html-image").attr('height',375);
$(".html-image").css({'margin':'0'});
$( ".html-image" ).error(function() {
    $( this ).attr( "src", root+'/error.png' );
  });
}
dd = '(单位:mm)    ';
if(type == 'wind') dd = '(单位:m/s)    ';
else if (type == 'fog' || type == 'haze' || type=='visi') dd = '(单位:km)    ';
else if(type == 'temp')  dd = '(单位:℃)    ';
else if(type == 'lightning') dd = '';

var dtime = dd+date.format("yyyy年MM月dd日hh时mm分");
var xtime = date.format("yyyyMMddhhmm")+"00";
 
$("#load-image10").attr('timetext',dtime);
$("#load-image10").attr('src',root+'/'+type+'/'+xtime+'/finish.png');
$('#timetext').html(dtime);
 
for(var i = 1; i < 10; i++){
date.setMinutes(date.getMinutes()-5);
dtime = dd+date.format("yyyy年MM月dd日hh时mm分");
xtime = date.format("yyyyMMddhhmm")+"00";
var n = 10-i;
$("#load-image"+n).attr('timetext',dtime);
$("#load-image"+n).attr('src',root+'/'+type+'/'+xtime+'/finish.png');
}
 
$("#load-image"+d).addClass('load-image');
$("#load-image"+10).removeClass('load-image');
$('span[id ^= "zhjc-sapn"]').css({'background-color':'#FAFAFA'});
$('#zhjc-sapn10').css({'background-color':'#C5C7C6'});
$("li[attribute = 'removecls']").removeClass("activeli");
$(thiz).addClass('activeli');
d = 10;
}

$(".zhjc-span").click(function(){
$('span[id ^= "zhjc-sapn"]').css({'background-color':'#FAFAFA'});
$(this).css({'background-color':'#C5C7C6'});
var i = $(this).attr("attribute");
$("#load-image"+d).addClass('load-image');
$("#load-image"+i).removeClass('load-image');
$('#timetext').html($("#load-image"+i).attr('timetext'));
d = i;
});
$("#wind").click(function(){changeImg('wind',this);});
$("#visi").click(function(){changeImg('visi',this);});
$("#temp").click(function(){changeImg('temp',this);});
$("#rain").click(function(){changeImg('rain',this);});
$("#fog").click(function(){changeImg('fog',this);});
$("#haze").click(function(){changeImg('haze',this);});

$("#lightning").click(function(){changeImg('lightning',this);});

function exe(){
if(x >= parseInt(11)){
x = parseInt(1);
}
$('#zhjc-sapn'+x).click();
x=x+1;
}
nIntervId = window.setInterval(exe, 1000);  

});