需求:实现文字显示在图片上和切换选项卡,显示不同的文字;效果如下图:
代码实现:
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);});
if(x >= parseInt(11)){
x = parseInt(1);
}
$('#zhjc-sapn'+x).click();
x=x+1;
}
nIntervId = window.setInterval(exe, 1000);
});