高手请进 ？这个日历是如何实现的？？？？？

1、这个日历是一个新的window。其中的日期数字是采用某种颜色的图片，在上面再加上程序计算的数字显示而成。
2、点击某个日期，发生的事情是执行TC()函数，里面又有SetDate()函数。注意da参数是document.all。
  ===========      Good Luck!     ===========
原代码如下：
<html>
<head>
<style>
.pop{ FONT-FAMILY: 宋体, "Arial"; FONT-SIZE: 9pt;color="#000000"}
.hdr {BORDER-RIGHT: black 0px solid; BORDER-TOP: black 0px solid; BACKGROUND: #016E89; BORDER-LEFT: black 0px solid; COLOR: #000000; 
BORDER-BOTTOM: black 0px solid}
.hdrA {BORDER-RIGHT: black 0px solid; BORDER-TOP: black 0px solid; BACKGROUND: #016E89; BORDER-LEFT: black 0px solid; CURSOR: hand; COLOR: 
#ffffff; BORDER-BOTTOM: black 0px solid}
.ndt {WIDTH: 19px; POSITION: absolute; HEIGHT: 19px}
.bdt {WIDTH: 19px; POSITION: absolute; HEIGHT: 19px}
.dt {WIDTH: 19px; CURSOR: hand; POSITION: absolute; HEIGHT: 19px}
.sdt {WIDTH: 19px; POSITION: absolute; HEIGHT: 19px}
</style>
</head>
<body text="#000000" vLink="#990000" aLink="#990000" link="#990000" bgColor="#ffffff" onload="DoLoad()">
<basefont face="Arial,Helvetica,Geneva,Swiss,Sans Serif">
<table style="BACKGROUND: white; BORDER-BOTTOM: black solid 2px; BORDER-LEFT: black solid 2px; BORDER-RIGHT: black solid 2px; BORDER-TOP: black solid 2px; FONT: 8pt arial" cellSpacing="0" cellPadding="0" border="0">
  <tr><td height="20">
    <table style="FONT: 8pt arial" height="20" cellSpacing="0" cellPadding="0" border="0">
      <tr><td class="hdrA" id="PrevDiv" width="16"><img id="Prev" onclick="PC();" alt="Show Previous Month" src="/images/elements/calendar/prev.gif" width="20" height="21" ></td>
        <td class="hdr" align="middle" width="104"><span id="YearTitle"></span>&nbsp;.&nbsp;<span id="MonthTitle"></span></td>
        <td class="hdrA" id="NextDiv" width="16"><img id="Next" onclick="NC();" alt="Show Next Month" src="/images/elements/calendar/next.gif" width="20" height="21" ></td></tr>
    </table></td></tr>
  <tr><td>
    <table cellSpacing="0" cellPadding="0" border="0">
      <tr><td><img id="WeekImg" src="/images/elements/calendar/week0.gif" WIDTH="141" HEIGHT="20"></td></tr>
      <tr><td style="POSITION: relative" align="middle"><img class="sdt" id="SelDate" style="DISPLAY: none" src="/images/elements/calendar/seldate.gif" WIDTH="19" HEIGHT="19"> 
         <img id="MonthImg" style="LEFT: 0px; POSITION: relative; TOP: 0px" src="/images/elements/calendar/blank.gif" width="142" height="121">         
            <div id="BKIMG1"><img src="/images/elements/calendar/date.gif" WIDTH="19" HEIGHT="19"><img src="/images/elements/calendar/date.gif" WIDTH="19" HEIGHT="19"><img src="/images/elements/calendar/date.gif" WIDTH="19" HEIGHT="19"><img src="/images/elements/calendar/date.gif" WIDTH="19" HEIGHT="19"><img src="/images/elements/calendar/date.gif" WIDTH="19" HEIGHT="19"><img src="/images/elements/calendar/date.gif" WIDTH="19" HEIGHT="19">         
            <img src="/images/elements/calendar/date.gif" WIDTH="19" HEIGHT="19"><img src="/images/elements/calendar/date.gif" WIDTH="19" HEIGHT="19"><img src="/images/elements/calendar/date.gif" WIDTH="19" HEIGHT="19"><img src="/images/elements/calendar/date.gif" WIDTH="19" HEIGHT="19"><img src="/images/elements/calendar/date.gif" WIDTH="19" HEIGHT="19"><img src="/images/elements/calendar/date.gif" WIDTH="19" HEIGHT="19">         
            <img src="/images/elements/calendar/date.gif" WIDTH="19" HEIGHT="19"><img src="/images/elements/calendar/date.gif" WIDTH="19" HEIGHT="19"><img src="/images/elements/calendar/date.gif" WIDTH="19" HEIGHT="19"><img src="/images/elements/calendar/date.gif" WIDTH="19" HEIGHT="19"><img src="/images/elements/calendar/date.gif" WIDTH="19" HEIGHT="19"><img src="/images/elements/calendar/date.gif" WIDTH="19" HEIGHT="19">         
            <img src="/images/elements/calendar/date.gif" WIDTH="19" HEIGHT="19"><img src="/images/elements/calendar/date.gif" WIDTH="19" HEIGHT="19"><img src="/images/elements/calendar/date.gif" WIDTH="19" HEIGHT="19"><img src="/images/elements/calendar/date.gif" WIDTH="19" HEIGHT="19"><img src="/images/elements/calendar/date.gif" WIDTH="19" HEIGHT="19"><img src="/images/elements/calendar/date.gif" WIDTH="19" HEIGHT="19">         
            <img src="/images/elements/calendar/date.gif" WIDTH="19" HEIGHT="19"><img src="/images/elements/calendar/date.gif" WIDTH="19" HEIGHT="19"><img src="/images/elements/calendar/date.gif" WIDTH="19" HEIGHT="19"><img src="/images/elements/calendar/date.gif" WIDTH="19" HEIGHT="19"><img src="/images/elements/calendar/date.gif" WIDTH="19" HEIGHT="19"><img src="/images/elements/calendar/date.gif" WIDTH="19" HEIGHT="19">         
            <img src="/images/elements/calendar/date.gif" WIDTH="19" HEIGHT="19"><img src="/images/elements/calendar/date.gif" WIDTH="19" HEIGHT="19"><img src="/images/elements/calendar/date.gif" WIDTH="19" HEIGHT="19"><img src="/images/elements/calendar/date.gif" WIDTH="19" HEIGHT="19"><img src="/images/elements/calendar/date.gif" WIDTH="19" HEIGHT="19"><img src="/images/elements/calendar/date.gif" WIDTH="19" HEIGHT="19">         
            <img src="/images/elements/calendar/date.gif" WIDTH="19" HEIGHT="19"><img src="/images/elements/calendar/date.gif" WIDTH="19" HEIGHT="19"><img src="/images/elements/calendar/date.gif" WIDTH="19" HEIGHT="19"><img src="/images/elements/calendar/date.gif" WIDTH="19" HEIGHT="19"><img src="/images/elements/calendar/date.gif" WIDTH="19" HEIGHT="19"><img src="/images/elements/calendar/date.gif" WIDTH="19" HEIGHT="19">         
            </div><img class="ndt" id="Today" style="DISPLAY: none" onclick="TC()" src="/images/elements/calendar/ring.gif" WIDTH="19" HEIGHT="19"> </td></tr>        
    </table></td></tr>        
  <tr><td align="right" height="20"><a href="javascript:CC()" class="pop">关闭窗口</a></td></tr></table>        
<script>        
<!--        
var g_fCalLoaded=false;        
var da=document.all;        
var wp=window.parent;        
var cf=wp.document.all.CalFrame;        
var bdc=da.BKIMG1.children;        
var dMin;var dMax;        
var XOff=2;var YOff=1;        
var XSize=20;var YSize=20;        
var g_dC=-1;var g_mC=-1;var g_yC=-1;        
var g_dI=-1;var g_mI=-1;var g_yI=-1;        
        
function DoLoad()        
{        
for(i=0;i<7;i++)        
{        
for(j=0;j<6;j++)        
{        
var t=j*7+i;        
bdc[t].day=t+1;        
bdc[t].onclick=BC;        
bdc[t].className="dt";        
bdc[t].style.left=da.MonthImg.offsetLeft+XOff+XSize*i-1;        
bdc[t].style.top=da.MonthImg.offsetTop+YOff+YSize*j;        
}        
}        
}        
        
function TC()        
{        
if(event.srcElement.className=="dt")        
{        
var dt=new Date();        
wp.SetDate(dt.getDate(),dt.getMonth()+1,dt.getFullYear());        
cf.style.display="none";        
}        
event.cancelBubble = true;        
}        
        
function BC()        
{        
if(event.srcElement.className=="dt")        
{        
var iDay = event.srcElement.day;        
iDay-=GetDOW(1,g_mC,g_yC);        
wp.SetDate(iDay,g_mC,g_yC);        
cf.style.display="none";        
}        
event.cancelBubble=true;        
}        
        
function CC() {cf.style.display="none";}        
        
function NC()        
{        
if(g_mC==12) SetDate(g_dC,1,g_yC+1);        
else SetDate(g_dC,g_mC+1,g_yC);        
}        
        
function PC()        
{        
if(g_mC==1) SetDate(g_dC,12,g_yC-1);        
else SetDate(g_dC,g_mC-1,g_yC);        
}        
        
function SetInputDate(day,month,year) {g_dI = day;g_mI = month;g_yI = year;}        
        
function FmtTitle(str)        
{        
var r=str.charAt(0);        
for(i=1;i<str.length;i++) r=r+"&nbsp;"+str.charAt(i);        
return r;         
}        
        
function SetMinMax(min,max) {dMin=min;dMax=max;}        
        
function SetDate(day, month, year)        
{        
da.WeekImg.src="/images/elements/calendar/week"+wp.GetDowStart()+".gif";        
da.MonthImg.src="/images/elements/calendar/w"+GetDOW(1,month,year)+"d"+GetMonthCount(month,year)+".gif";        
da.MonthTitle.innerHTML=FmtTitle(rgMN[month-1]);    
da.YearTitle.innerHTML=FmtTitle(year.toString());    
var dt=new Date();        
var s,n,v,d;        
        
d="none";        
if(month==dt.getMonth()+1&&year==dt.getFullYear())        
{        
iBox=dt.getDate()+GetDOW(1,dt.getMonth()+1,dt.getFullYear())-1;        
if(ValidDate(dt.getDate(),dt.getMonth()+1,dt.getFullYear())) n="dt";        
else n="bdt";        
da.Today.className=n;        
        
da.Today.style.left=bdc[iBox].style.left;        
da.Today.style.top=bdc[iBox].style.top;        
d="block";        
}        
da.Today.style.display=d;        
        
d="none";        
if(-1!=g_dI&&month==g_mI&&year==g_yI)        
{        
iBox=g_dI+GetDOW(1,g_mI,g_yI)-1;        
da.SelDate.style.left=bdc[iBox].style.left;        
da.SelDate.style.top=bdc[iBox].style.top;        
d="block";        
}        
da.SelDate.style.display=d;        
        
if( year<dMin.getFullYear() || (year==dMin.getFullYear()&&month<=(dMin.getMonth()+1)) ) {n="hdr";v="hidden";}        
else {n="hdrA";v="visible";}        
da.PrevDiv.className=n;        
da.Prev.style.visibility=v;        
        
if( year>dMax.getFullYear() || (year==dMax.getFullYear()&&month>=(dMax.getMonth()+1)) ) {n="hdr";v="hidden";}        
else {n="hdrA";v="visible";}        
da.NextDiv.className=n;        
da.Next.style.visibility=v;        
        
var i=0;        
var iMin=GetDOW(1,month,year);        
var iMax=GetMonthCount(month,year)+GetDOW(1,month,year);        
        
for(;i<iMin;i++) {bdc[i].src="/images/elements/calendar/nodate.gif";bdc[i].className="ndt";}        
if( year<dMin.getFullYear() || (year==dMin.getFullYear()&&month<(dMin.getMonth()+1)) || year>dMax.getFullYear() || (year==dMax.getFullYear()&&month>(dMax.getMonth()+1)) )        
{        
for(;i<iMax;i++) {bdc[i].src="/images/elements/calendar/baddate.gif";bdc[i].className="bdt";}        
}        
else if(month==(dMin.getMonth()+1))        
{        
iBox=dMin.getDate()+GetDOW(1,dMin.getMonth()+1,dMin.getFullYear())-1;        
for(;i<iMax;i++)        
{        
if(i<iBox) {s="/images/elements/calendar/baddate.gif";n="bdt";}        
else {s="/images/elements/calendar/date.gif";n="dt";}        
bdc[i].src=s;bdc[i].className=n;        
}        
}        
else if(month==(dMax.getMonth()+1))        
{        
iBox=dMax.getDate()+GetDOW(1,dMax.getMonth()+1,dMax.getFullYear())-1;        
for(;i<iMax;i++)        
{        
if(i<iBox+1) {s="/images/elements/calendar/date.gif";n="dt";}        
else {s="/images/elements/calendar/baddate.gif";n="bdt";}        
bdc[i].src=s;bdc[i].className=n;        
}        
}        
else        
{        
for(;i<iMax;i++) {bdc[i].src="/images/elements/calendar/date.gif";bdc[i].className="dt";}        
}        
for(;i<42;i++) {bdc[i].src="/images/elements/calendar/nodate.gif";bdc[i].className="ndt";}        
        
g_dC=day;        
g_mC=month;        
g_yC=year;        
}        
        
function ValidDate(day,month,year)        
{        
if( year<dMin.getFullYear() || (year==dMin.getFullYear()&&month<(dMin.getMonth()+1)) || (year==dMin.getFullYear()&&month==(dMin.getMonth()+1)&&day<dMin.getDate()) ) return false;        
else if( year>dMax.getFullYear() || (year==dMax.getFullYear()&&month>(dMax.getMonth()+1)) || (year==dMax.getFullYear()&&month==(dMax.getMonth()+1)&&day>dMax.getDate()) ) return false;        
else return true;        
}        
        
function GetMonthCount(month,year)        
{        
var c=rgMC[month-1];        
if((2==month)&&IsLeapYear(year)) c++;
return c;        
}        
        
function IsLeapYear(year) {return( 0==year%4 && ((year%100!=0)||(year%400==0)) );}        
        
function GetDOW(day,month,year)        
{        
var dt=new Date(year,month-1,day);
return (dt.getDay()+(7-wp.GetDowStart()))%7;        
}        function cityname(citys)
{
 return true;
}var rgMN=new Array(12);        
rgMN[0]="1";        
rgMN[1]="2";        
rgMN[2]="3";        
rgMN[3]="4";        
rgMN[4]="5";        
rgMN[5]="6";        
rgMN[6]="7";        
rgMN[7]="8";        
rgMN[8]="9";        
rgMN[9]="10";        
rgMN[10]="11";        
rgMN[11]="12";        
        
var rgMC=new Array(12);        
rgMC[0]=31;        
rgMC[1]=28;        
rgMC[2]=31;        
rgMC[3]=30;        
rgMC[4]=31;        
rgMC[5]=30;        
rgMC[6]=31;        
rgMC[7]=31;        
rgMC[8]=30;        
rgMC[9]=31;        
rgMC[10]=30;        
rgMC[11]=31;        
        
g_fCalLoaded=true;        
//-->        
</script>        
</body></html>

解决方案 »

  1.   

    to sug()　
    不能用，要报错！
      

  2.   

    //这是原代码.
    //你也可以查看它首页的原代码，找到DATE。JS，
    //在IE浏览器地址栏中输入http://www.lohoo.com/include/date.js可以下载到本地看原代码。
    <!--
    var g_MINY=1601;var g_MAXY=4500;var g_month=0;var g_day=0;var g_year=0;var g_yLow=1990;
    function GetInputDate(t,f){
      var l=t.length;
      if(0==l)return false;
      var cSp='\0';var sSp1="";var sSp2="";
      for(var i=0;i<t.length;i++){
        var c=t.charAt(i);
    if(c==' '||isdigit(c))continue;
    else if(cSp=='\0'&&(c=='/'||c=='-'||c=='.')){ cSp=c;sSp1=t.substring(i+1,l);}
    else if(c==cSp)sSp2=t.substring(i+1,l);
    else if(c!=cSp)return false;
      }
      if(0==sSp1.length)return false;
      var m;var d;var y;
      if(g_dFmt=="mmddyy"){m=atoi(t);d=atoi(sSp1);}
      else{d=atoi(t);m=atoi(sSp1);}
      if(0!=sSp2.length)y=atoi(sSp2);
      else y=DefYr(m,d);
      if(y<100){
        y=1900+y;
    while(y<g_yLow)y=y+100;}
      if(y<g_MINY||y>g_MAXY||m<1||m>12)return false;
      if(d<1||d>GetMonthCount(m,y))return false;
      g_month=m;g_day=d;g_year=y;
      return true;
    }function DefYr(m,d){
      var dt=new Date();
      var yCur=(dt.getYear()<1000)?1900+dt.getYear():dt.getYear();
      if(m-1<dt.getMonth()||(m-1==dt.getMonth()&&d<dt.getDate()))return 1+yCur;else return yCur;
    }function atoi(s){
      var t=0;
      for(var i=0;i<s.length;i++){
        var c=s.charAt(i);
    if(!isdigit(c))return t;
    else t=t*10+(c-'0');
      }
      return t;
    }function isdigit(c){
      return(c>='0'&&c<='9');
    }function GetMonthCount(m,y){
      var c=rgMC[m-1];
      if((2==m)&&IsLeapYear(y))c++;
      return c;
    }function IsLeapYear(y){
      if(0==y%4&&((y%100!=0)||(y%400==0))) return true;else return false;
    }var rgMC=new Array(12);rgMC[0]=31;rgMC[1]=28;rgMC[2]=31;rgMC[3]=30;rgMC[4]=31;rgMC[5]=30;rgMC[6]=31;rgMC[7]=31;rgMC[8]=30;
      rgMC[9]=31;rgMC[10]=30;rgMC[11]=31;
    var g_eC=null;var g_eCV="";var g_dFmt="mmddyy";var g_fnCB=null;function ShowCalendar(eP,eD,eDP,dmin,dmax,fnCB){
      var dF=document.all.CalFrame;
      var wF=window.frames.CalFrame;
      if(null==wF.g_fCalLoaded||false==wF.g_fCalLoaded){
        alert("Unable to load popup calendar.\r\nPlease reload the page.");
    return;
      }
      dtMin=new Date();
      dtMin.setDate(dtMin.getDate()+dmin);
      dtMax=new Date();
      dtMax.setDate(dtMax.getDate()+dmax);
      wF.SetMinMax(new Date(dtMin),new Date(dtMax));
      g_fnCB=fnCB;
      wF.cityname(fnCB);
      if(eD==g_eC&&"block"==dF.style.display){
        if(g_eCV!=eD.value&&GetInputDate(eD.value,g_dFmt)){
      wF.SetInputDate(g_day,g_month,g_year);
      wF.SetDate(g_day,g_month,g_year);
      g_eCV=eD.value;
        }
        else dF.style.display="none";
        }
      else{
        if(GetInputDate(eD.value,g_dFmt)){
      wF.SetInputDate(g_day,g_month,g_year);
      wF.SetDate(g_day,g_month,g_year);
    }
        else if(null!=eDP&&GetInputDate(eDP.value,g_dFmt)){
        wF.SetInputDate(g_day,g_month,g_year);
        wF.SetDate(g_day,g_month,g_year);
      }
        else{
      var dt=new Date(dtMin);
      wF.SetInputDate(-1,-1,-1);
      wF.SetDate(dt.getDate(),dt.getMonth()+1,dt.getFullYear());
    }
      var eL=0;var eT=0;var p=eP;
      while(p&&p.tagName!="BODY"){
        eT+=p.offsetTop;
    eL+=p.offsetLeft;
    p=p.offsetParent;
      }
      var eH=eP.offsetHeight;
      var dH=dF.style.pixelHeight;
      var sT=document.body.scrollTop;
      dF.style.left=eL;
      if(eT-dH>=sT&&eT+eH+dH>document.body.clientHeight+sT) dF.style.top=eT-dH;
      else dF.style.top=eT+eH;
      if("none"==dF.style.display) dF.style.display="block";g_eC=eD;g_eCV=eD.value;
      }
    }function SetDate(d,m,y){
      var ds="/";
      g_eC.focus();
      if(g_dFmt=="mmddyy") g_eC.value=m+ds+d+ds+y;
      else g_eC.value=d+ds+m+ds+y;
      g_eCV=g_eC.value;
      if(null!=g_fnCB&&""!=g_fnCB) eval(g_fnCB);
    }function GetDowStart(){return 0;}function GetDOW2(d,m,y){
      var dt=new Date(y,m-1,d);
      return(dt.getDay()+(7-GetDowStart()))%7;
    }function LoadMonths(n){
      var dt=new Date();
      var m=dt.getMonth()+1;
      var y=dt.getFullYear();
      var rg=new Array(n);
      for(i=0;i<n;i++){
        rg[i]=document.createElement("IMG");
        rg[i].src="/images/elements/calendar/w"+GetDOW2(1,m,y)+"d"+GetMonthCount(m,y)+".gif";
        m++;
    if(12<m){ m=1;y++;}
      }
    }LoadMonths(12);function chkBrowser(){
      this.ver=navigator.appVersion;
      this.dom=document.getElementById?1:0;
      this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0;
      this.ie4=(document.all && !this.dom)?1:0;
      this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0;
      this.ns4=(document.layers && !this.dom)?1:0;
      this.bVer=(this.ie5 || this.ie4 || this.ns4 || this.ns5);
      return this;
    }bVer=new chkBrowser();
    ns4 = (document.layers)? true:false;
    ie4 = (document.all)? true:false;
    function AttB(f){if(bVer.ie4)f.style.display='block';}
    function AttN(f){if(bVer.ie4)f.style.display='none';}function show(idLayer,idParent){
      cLayer=bVer.dom?document.getElementById(idLayer).style:bVer.ie4?document.all[idLayer].style:bVer.ns4?idParent?document[idParent].document[idLayer]:document[idLayer]:0;
      cLayer.display='block';
      divLinksForm=(ns4)?document.divLinks.document.divLinks:document.divLinks;
      var d=document.Wiz;
      if (idLayer=='car'){
        AttB(d.CKind);AttB(d.Ctime1);AttB(d.Ctime2);d.srch[1].status='true';
      }
      else if (idLayer=='hot'){AttB(d.Hcadt);AttB(d.Hckid);d.srch[0].status='true';}
      else{AttB(d.FcAdu);d.srch[2].status='true';/*if (idParent!='flt' && d.opts[1].checked) hide('dts','flt');*/}
    }function hide(idLayer,idParent){
      cLayer=bVer.dom?document.getElementById(idLayer).style:bVer.ie4?document.all[idLayer].style:bVer.ns4?idParent?document[idParent].document[idLayer]:document[idLayer]:0;
      var d=document.Wiz;
      if(idLayer!='flt') AttN(d.FcAdu);
      AttN(d.Hcadt);
      AttN(d.Hckid);
      AttN(d.CKind);
      AttN(d.Ctime1);
      AttN(d.Ctime2);
      cLayer.display='none'
    }
    //-->