自己动手写javascript日历

<html>
<head>
</head>
<body>
<script>
var tempDate;
var curDate;
var dec=0;

var arry=new Array(6);
function fillArry()
{

 var temp=new Date();
 tempDate=temp.getDate();
 curDate=temp;
 temp.setMonth(temp.getMonth()+dec);
 var txt=document.createTextNode(temp.getYear()+"年"+(temp.getMonth()+1)+"月");
 titleid.appendChild(txt);
 var s,e;
 var dmon=temp.getMonth();
 r=1;
 temp.setDate(1);
 for(i=0;i<6;i++)
 {
  arry[i]=new Array(7);
  for(k=0;k<7;)
  {
   temp.setDate(r);
   if(temp.getMonth()>dmon)
    break;
   var tday=temp.getDay();
   if(tday>(k))
    k=tday;
   
   arry[i][k]=r++;
   if(r>31)
    break;
   k++;
  }
 
 }
 for(i=0;i<6;i++)
 {
  
  for(k=0;k<7;k++)
  {
   if(arry[i][k]==undefined)
    arry[i][k]="0";
  }

 }
}

function empty(row)
{
 var ret=true;
 for(o=0;o<7;o++)
 {
  if(arry[row][o]!="0")
  {
   ret=false;
   break;
  }
 }
 return ret;
}
function incMonth()

 dec++;
 show();
}
function decMonth()
{
 dec--;
 show();
}
</script>
<script>
function showCalaNodes()
{
 fillArry();
 
 for(i=0;i<6;i++)
 {
  var em=empty(i);
  if(!em) 
  {
   var tr=document.createElement("TR");
   tr.align="center";
   calid.appendChild(tr);
   for(k=0;k<7;k++)
   {
    var val=arry[i][k];
    var td=document.createElement("td");
    //if(k==0)
    // td.bgColor="#00ccff";
    td.width="14%";
    tr.appendChild(td);
    if(val!="0")
    {     
     if(val==tempDate)
      td.bgColor="#00ddff";
     var a=document.createElement("A");
     td.appendChild(a);
     a.href="news.jsp";
     var txt=document.createTextNode(val);
     switch(k)
     {
      case 0 :     
      var font=document.createElement("FONT");
      font.color="#ff0000";      
      a.appendChild(font);
      font.appendChild(txt);      
     break;
     case 6 :      
       font=document.createElement("FONT");
       font.color="blue";
       a.appendChild(font);
       font.appendChild(txt);      
      break;
     default :
     a.appendChild(txt);
      break;
    }
   }
  } 
 }
}
}

function show()

 while(calid.hasChildNodes())
 {
  calid.removeChild(calid.childNodes(0));
 }

 while(titleid.hasChildNodes())
 {
  titleid.removeChild(titleid.childNodes(0));
 }
 showCalaNodes();
}

</script>
<table width="30%">
 <tr bgcolor="#ff9900">
 <td align="center"><a href="#" onclick="decMonth();">&lt;&lt;</a></td> 
 <td colspan="5" align="center" id="titleid"></td>
 <td align="center">
 <a href="#" onclick="incMonth();">
 &gt;&gt;</a></td>
 </tr>
<tr align="center" bgcolor="#CCCCCC">
 <td width=14%>日</td> 
 <td width=14%>一</td>
 <td width=14%>二</td>
 <td width=14%>三</td>
 <td width=14%>四</td>
 <td width=14%>五</td>
 <td width=14%>六</td>
</tr>
<tr>
  <td colspan=7><table width=100%  cellspacing=3 cellpadding=1>
<tbody id="calid"></tbody></table></td>
 
</tr> 
<Script>
showCalaNodes();
</script>
 
</table>

</body>
</html>

你可能感兴趣的:(自己动手写javascript日历)