|
国之瑰宝网站http://szgzgb.com/确实有一些特点,例如,Ionize CMS框架的首个中文网站、使用多达5种幻灯图片显示技术、首创同一页面的多张图片即位放大等等。这里介绍的是它的另一个首创,中景万年历http://szgzgb.com/themes/zjtz/wnl/wnl200.html支持12个时柱的相关技术。
一般的万年历代码大同小异,但功能都差不多:只提供年柱、月柱、日柱,均没有提供时柱。原因可能有二,一是时柱不好计算,二是只提供一天中的某一时柱似乎没意思。笔者受http://www.360doc.com/content/11/0827/23/541740_143797306.shtml的启发,使中景万年历同时支持当天的12个时柱,相关技术如下:
修改其引用的chinese_calendar.js文件,修改显示详细日期资料的函数function mOvr(v)
1、在变量初始化尾部增加:
var szn=" 甲乙丙丁戊己庚辛壬癸甲乙丙丁戊己庚辛壬癸".indexOf(cld[d].cDay.substr(0,1))*2-2;
var szs="";
for(i=0;i<12;i++){
var n =(szn + i)%10;
szs +=Gan[n]+Zhi[i]+" ";
}
2、在显示串尾部增加当天的12个时柱:
s= '<TABLE WIDTH="130" BORDER=0 CELLPADDING="2" CELLSPACING=0 BGCOLOR="#000066" style="opacity:0.8; -moz-opacity:0.8; filter:Alpha(opacity=80)"><TR><TD>' +
'<TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=0><TR><TD ALIGN="right"><FONT COLOR="#ffffff" STYLE="font-size:9pt;">'+
cld[d].sYear+' 年 '+cld[d].sMonth+' 月 '+cld[d].sDay+' 日<br>星期'+cld[d].week+'<br>'+
'<font color="violet">农历'+(cld[d].isLeap?'闰 ':' ')+cld[d].lMonth+' 月 '+cld[d].lDay+' 日</font><br>'+
'<font color="yellow">'+cld[d].cYear+'年 '+cld[d].cMonth+'月 '+cld[d].cDay + '日'+szs+'</font>'+
'</FONT></TD></TR></TABLE>'+ festival +'</TD></TR></TABLE>';
整个函数结果代码如下:
function mOvr(v) {
var s,festival;
var sObj=document.getElementById('SD'+ v);
var d=sObj.innerHTML-1;
var szn=" 甲乙丙丁戊己庚辛壬癸甲乙丙丁戊己庚辛壬癸".indexOf(cld[d].cDay.substr(0,1))*2-2;
var szs="";
for(i=0;i<12;i++){
var n =(szn + i)%10;
szs +=Gan[n]+Zhi[i]+" ";
}
if(sObj.innerHTML!='') {
sObj.style.cursor = 's-resize';
if(cld[d].solarTerms == '' && cld[d].solarFestival == '' && cld[d].lunarFestival == '')
festival = '';
else
festival = '<TABLE WIDTH=100% BORDER=0 CELLPADDING=2 CELLSPACING=0 BGCOLOR="#CCFFCC"><TR><TD>'+
'<FONT COLOR="#000000" STYLE="font-size:9pt;">'+cld[d].solarTerms + ' ' + cld[d].solarFestival + ' ' + cld[d].lunarFestival + '</FONT></TD>'+
'</TR></TABLE>';
s= '<TABLE WIDTH="130" BORDER=0 CELLPADDING="2" CELLSPACING=0 BGCOLOR="#000066" style="opacity:0.8; -moz-opacity:0.8; filter:Alpha(opacity=80)"><TR><TD>' +
'<TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=0><TR><TD ALIGN="right"><FONT COLOR="#ffffff" STYLE="font-size:9pt;">'+
cld[d].sYear+' 年 '+cld[d].sMonth+' 月 '+cld[d].sDay+' 日<br>星期'+cld[d].week+'<br>'+
'<font color="violet">农历'+(cld[d].isLeap?'闰 ':' ')+cld[d].lMonth+' 月 '+cld[d].lDay+' 日</font><br>'+
'<font color="yellow">'+cld[d].cYear+'年 '+cld[d].cMonth+'月 '+cld[d].cDay + '日'+szs+'</font>'+
'</FONT></TD></TR></TABLE>'+ festival +'</TD></TR></TABLE>';
document.getElementById("detail").innerHTML = s;
if (snow == 0) {
dStyle.left = x+offsetx-(width/2);
dStyle.top = y+offsety;
dStyle.visibility = "visible";
snow = 1;
}
}
}
|
|