小鹏要的

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>calendar</title>
<style type="text/css">
html,body{ font-size:12px; font-family:"Courier New", Courier, monospace; margin:0px; padding:0px;}
#calendar{margin:50px;width:150px;font-size:12px;}
#calendar table{ border-collapse:collapse;}
#calendar table td{ height:20px; width:20px; border:1px solid #ff6600; text-align:center;}
#calendar .calendarTitle table .threetd{ width:62px;}
#calendar .calendarTitle table .twotd{ width:41px;}
#calendar .calendarTitle table td{ border-bottom:0px;}
.classOver{ background:#000000; color:#FFFFFF;}
.yearContainer{background:#ffffff;border:1px solid #ff6600;position:absolute;width:62px;}
.yearContainer ul{list-style:none;margin:0px;padding:0px;}
.yearContainer ul li{height:18px;line-height:18px;display:block;text-align:center;}
.monthContainer{background:#ffffff;border:1px solid #ff6600;position:absolute;width:41px;}
.monthContainer ul{list-style:none;margin:0px;padding:0px;}
.monthContainer ul li{height:18px;line-height:18px;display:block;text-align:center;}
a{ text-decoration:none; color:#990000;}
</style>
</head>

解决方案 »

  1.   

    <body>
    <script type="text/javascript">
     var titleTable="<div id=\"calendar\"><div class=\"calendarTitle\">";
     titleTable+="<table width=\"0%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\"><tr><td>";
     titleTable+="<a href=\"javascript:void(0)\" onclick=\"SloppyJs.calendar.getNewTime('b')\"  onfocus=\"this.blur()\" title='上月'><</a></td>";
     titleTable+="<td class=\"threetd\" id=\"currentYear\" onclick=\"SloppyJs.calendar.writeDivString('currentYear','yeartype')\"> </td>";
     titleTable+="<td class=\"twotd\" id=\"currentMonth\" onclick=\"SloppyJs.calendar.writeDivString('currentMonth','monthtype')\"> </td>";
     titleTable+="<td><a href=\"javascript:void(0)\" onclick=\"SloppyJs.calendar.getNewTime('n')\" onfocus=\"this.blur()\" title='下月'>></a></td></tr></table></div>";
     var SloppyJs={};
     (function(){
      SloppyJs.calendar={
       getDateString:function(y,m){
        var DayArray=[];
        for(var i=0;i<42;i++) DayArray[i]=" ";
        for(var i=0;i<new Date(y,m,0).getDate();i++)DayArray[i+new Date(y,m-1,1).getDay()]=i+1;
        return DayArray;
       },
       getConString:function(y,m){
        var DStr="<table width=\"0%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\"><tr>";
        var DateArray=["SUN","MON","TUE","WED","THU","FRI","SAT"];
        for(var i=0;i<7;i++){
         DStr+="<td>"+DateArray[i]+"</td>";
        }
        DStr+="</tr>";
        for(var i=0;i<6;i++){
         DStr+="<tr>";
         for(var j=0;j<7;j++){
          var CS=new Date().getDate()==this.getDateString(y,m)[i*7+j]?"classOver":"";
          if(this.getDateString(y,m)[i*7+j]==" "){
           DStr+="<td class='"+CS+"' id='dateNum"+(i*7+j)+"' >"+this.getDateString(y,m)[i*7+j]+"</td>";
          }else{
           DStr+="<td class='"+CS+"' id='dateNum"+(i*7+j)+"' onclick=\"SloppyJs.calendar.alertClick(event)\">"+this.getDateString(y,m)[i*7+j]+"</td>";
          }
         }
         DStr+="</tr>";
        }
        DStr+="</tabe>";
        return DStr;
       },
       rewriteConString:function(y,m){
        var TArray=this.getDateString(y,m);
        var len=TArray.length;
        for(var i=0;i<len;i++){
         document.getElementById('dateNum'+i).innerHTML=TArray[i];
         document.getElementById('dateNum'+i).className="";
         if(new Date().getYear()==y&&new Date().getMonth()+1==m&&new Date().getDate()==TArray[i]){
          document.getElementById('dateNum'+i).className="classOver";
                     }
        }
       },
       getNewTime:function(action){
        var YearNO=document.getElementById('currentYear').innerHTML;
        var MonthNO=document.getElementById('currentMonth').innerHTML;
        if(action=="b"){
         if(MonthNO=="1"){
          MonthNO=13;
          YearNO=YearNO-1;
          }
         document.getElementById('currentMonth').innerHTML=MonthNO-1;
         document.getElementById('currentYear').innerHTML=YearNO;
         this.rewriteConString(YearNO,MonthNO-1);
        }
        if(action=="n"){
         if(MonthNO=="12"){
          MonthNO=0;
          YearNO=YearNO-(-1);
          }
         document.getElementById('currentYear').innerHTML=YearNO;
         document.getElementById('currentMonth').innerHTML=MonthNO-(-1);
         this.rewriteConString(YearNO,MonthNO-(-1));
        }
       },
       
      

  2.   

    writeDivString:function(){
        var _element=document.getElementById(arguments[0]);
        _element.style.position="relative";
        var _value=_element.innerHTML;
        //year
        if(arguments[1]=="yeartype"){
         var _containerid="yeardiv";
         if(document.getElementById(_containerid)){
          var _c=document.getElementById(_containerid);
          document.body.removeChild(_c);
         }
         if(document.getElementById("monthdiv")){
          var _cc=document.getElementById("monthdiv");
          document.body.removeChild(_cc);
         }
         var _container=document.createElement("div");
         _container.setAttribute("id",_containerid);
         _container.className="yearContainer";
         var _ul=document.createElement("ul");
         for(var i=0;i<15;i++){
          var _li=document.createElement("li");
          var _text=document.createTextNode(_value-7+i);
          _li.appendChild(_text);
          _ul.appendChild(_li);
         }
         _container.appendChild(_ul);
         _container.style.top=_element.offsetTop+20+"px";
         _container.style.left=_element.offsetLeft+"px";
         document.body.appendChild(_container);
         var _ali=document.getElementById(_containerid).getElementsByTagName("li");
         for(var j=0;j<_ali.length;j++){
          _ali[j].onmouseover=function(){
           this.style.background="#ff0000";
           this.style.color="#FFFFFF";
           this.style.cursor="pointer";
          };
          _ali[j].onmouseout=function(){
           this.style.background="#ffffff";
           this.style.color="#000000";
          };
          _ali[j].onclick=function(){
           document.getElementById("yeardiv").style.display="none";
           _element.innerHTML=this.innerHTML;
           var _alii=document.getElementById(_containerid).getElementsByTagName("li");
           for(var k=0;k<_alii.length;k++){
            _ul.removeChild(_alii[k]);
           }
           _container.removeChild(_ul);
           document.body.removeChild(_container);
           _element.style.position="";
           var _y=document.getElementById('currentYear').innerHTML;
           var _m=document.getElementById('currentMonth').innerHTML;
           SloppyJs.calendar.rewriteConString(_y,_m);
          };
         }
         _container.onmouseout=function(){
          this.style.display="none";
          _element.style.position="";
         };
         _container.onmouseover=function(){
          this.style.display="";
         };
        }
        //month    if(arguments[1]=="monthtype"){
         var _containerid="monthdiv";
         if(document.getElementById(_containerid)){
          var _c=document.getElementById(_containerid);
          document.body.removeChild(_c);
         }
         if(document.getElementById("yeardiv")){
          var _cc=document.getElementById("yeardiv");
          document.body.removeChild(_cc);
         }
         var _container=document.createElement("div");
         _container.setAttribute("id",_containerid);
         _container.className="monthContainer";
         var _ul=document.createElement("ul");
         for(var i=0;i<12;i++){
          var _li=document.createElement("li");
          var _text=document.createTextNode(i+1);
          _li.appendChild(_text);
          _ul.appendChild(_li);
         }
         _container.appendChild(_ul);
         _container.style.top=_element.offsetTop+20+"px";
         _container.style.left=_element.offsetLeft+"px";
         document.body.appendChild(_container);
         var _ali=document.getElementById(_containerid).getElementsByTagName("li");
         for(var l=0;l<_ali.length;l++){
          _ali[l].onmouseover=function(){
           this.style.background="#ff0000";
           this.style.color="#FFFFFF";
           this.style.cursor="pointer";
          };
          _ali[l].onmouseout=function(){
           this.style.background="#ffffff";
           this.style.color="#000000";
          };
          _ali[l].onclick=function(){
           document.getElementById(_containerid).style.display="none";
           _element.innerHTML=this.innerHTML;
           var _alii=document.getElementById(_containerid).getElementsByTagName("li");
           for(var k=0;k<_alii.length;k++){
            _ul.removeChild(_alii[k]);
           }
           _container.removeChild(_ul);
           document.body.removeChild(_container);
           _element.style.position="";
           var _y=document.getElementById('currentYear').innerHTML;
           var _m=document.getElementById('currentMonth').innerHTML;
           SloppyJs.calendar.rewriteConString(_y,_m);
          };
         }
         _container.onmouseout=function(){
          this.style.display="none";
          _element.style.position="";
         };
         _container.onmouseover=function(){
          this.style.display="";
         };    }
       },
       alertClick:function(e){
        var e=e||event;
        var targets=e.target||event.srcElement;
        alert(targets.innerHTML);
       }
      };
     })();
     function writeCalendar(){
      document.write(titleTable);
      var _todayYear=document.getElementById('currentYear').innerHTML=new Date().getFullYear();
      var _todayMonth=document.getElementById('currentMonth').innerHTML=new Date().getMonth()+1;
      var _calendarStr=SloppyJs.calendar.getConString(_todayYear,_todayMonth);
      document.write(_calendarStr+"</div>");
     };
     writeCalendar();
    </script></body>