jtzmsqzr 发表于 2012-4-13 11:14:24

同时支持12个时柱的中景万年历

国之瑰宝网站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.cDay.substr(0,1))*2-2;
        var szs="";
        for(i=0;i<12;i++){
                var n =(szn + i)%10;
                szs +=Gan+Zhi+" ";
                }
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.sYear+' 年 '+cld.sMonth+' 月 '+cld.sDay+' 日<br>星期'+cld.week+'<br>'+
         '<font color="violet">农历'+(cld.isLeap?'闰 ':' ')+cld.lMonth+' 月 '+cld.lDay+' 日</font><br>'+
         '<font color="yellow">'+cld.cYear+'年 '+cld.cMonth+'月 '+cld.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.cDay.substr(0,1))*2-2;
        var szs="";
        for(i=0;i<12;i++){
                var n =(szn + i)%10;
                szs +=Gan+Zhi+" ";
                }

   if(sObj.innerHTML!='') {
      sObj.style.cursor = 's-resize';

      if(cld.solarTerms == '' && cld.solarFestival == '' && cld.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.solarTerms + ' ' + cld.solarFestival + ' ' + cld.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.sYear+' 年 '+cld.sMonth+' 月 '+cld.sDay+' 日<br>星期'+cld.week+'<br>'+
         '<font color="violet">农历'+(cld.isLeap?'闰 ':' ')+cld.lMonth+' 月 '+cld.lDay+' 日</font><br>'+
         '<font color="yellow">'+cld.cYear+'年 '+cld.cMonth+'月 '+cld.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;
      }
   }
}

sdink 发表于 2012-4-13 15:56:01

你这个咱天天都放你那个网站呢。。。。。。。。。。看一你的那个日li，然后在看一下http://site.baidu.com/list/wannianli.htm 百度的东西。。。也指不定是从那里搞来的。。。先骂你没有创新，最近感谢你的分享精神。
页: [1]
查看完整版本: 同时支持12个时柱的中景万年历