JS的初级阶段,万年历

<script language=javascript>
function settab()
{
 var tab=document.getElementById('tab1');
 //alert(se1.options[se1.selectedIndex].text)
 var se11=se1.options[se1.selectedIndex].text;
 var se21=se2.options[se2.selectedIndex].text;//下拉列表中的日期
 //alert(se11+","+se21)
 var lastday=new Date(se11,se21,0).getDate();//所选择月的天数
 var firstday=new Date(se11,se21-1,1).getDay();//选择月的第一天是星期几
 //alert(lastday+","+firstday)
 var weekend;//每周的最后一天的日期
 var lines;//第几行,相对于表格,星期为第零行
 //第一行日期
 for(var lin1=0;lin1<7;lin1++)
 {
  if(lin1<firstday)
   tab.rows[1].cells[lin1].innerHTML="&nbsp;";
  else
   if(lin1==0||lin1==6)
    tab.rows[1].cells[lin1].innerHTML="<font color=red>"+(lin1-firstday+1)+"</font>";
   else
    tab.rows[1].cells[lin1].innerHTML=lin1-firstday+1;
  //alert(lin1+","+firstday)
  weekend=lin1-firstday+1;
  lines=1;//第一行
 }
 //将最后2行值空之后再添加数据,以免遗留上一个月的数据,二行相对于非闰年的二月份
 for(var i=0;i<7;i++)
 {
  tab.rows[5].cells[i].innerHTML="&nbsp;";
  tab.rows[6].cells[i].innerHTML="&nbsp;";
 }
 while(weekend<lastday)//循环到月末
 {
  for(var lin2=0;lin2<7;lin2++)
  {
   if(weekend+lin2<lastday)//数字小于等于当前月的最后一天
   {
    if(lin2==0||lin2==6)
     tab.rows[lines+1].cells[lin2].innerHTML="<font  color=red>"+(weekend+1+lin2)+"</font>";
    else
     tab.rows[lines+1].cells[lin2].innerHTML=weekend+1+lin2;
   }
    
   else
    tab.rows[lines+1].cells[lin2].innerHTML="&nbsp;";  
  }
  weekend+=7;//周末再加7天  
  lines+=1;//循环一次加一行

 }
 lastline="";
 //var tab=document.getElementById('tab1');
 var today=new Date();
 var today1=today.getDate();
 //如果选中的是本月,就要遍历,查找今天并设置为超链接格式
 if(se1.selectedIndex==today.getYear()-1900&&se2.selectedIndex==today.getMonth())
 {
 for(var i=1;i<7;i++)
 {
  for(var j=0;j<7;j++)
  {
   if(tab.rows[i].cells[j].innerHTML==today1)
   {
    tab.rows[i].cells[j].innerHTML="<a href=# onClick='alerttoday()'>"+ today1 +"</a>"; 
    //alert(tab.rows[i].cells[j].innerHTML)
   }   
  }
 } 
 }
}
function setsel()
{
 //var se1=document.getElementById('se1');
 //var se2=document.getElementById('se2');
 //document.all.se2.options.length=12; 
 for(var i=1900;i<2100;i++)
 {
  se1.options.add(new Option(i,i-1900));
 }
 for(var m=1;m<13;m++)
 {
  se2.options.add(new Option(m,m));
 }
 var today=new Date();//当前年月
 se1.selectedIndex=today.getYear()-1900;
 se2.selectedIndex=today.getMonth();//月份获取是0---11,与其索引相符
 settab()

}
onload=setsel
function monup()//下一月

 if(se2.selectedIndex!=11)
  se2.selectedIndex+=1
 //alert(se2.selectedIndex)
 settab()
}
function mondown()//上一月Line 71

 if(se2.selectedIndex!=0)
  se2.selectedIndex-=1
 //alert(se2.selectedIndex)
 settab()
}
function gettoday()//跳转到今天
{
 var tab=document.getElementById('tab1');
 var today=new Date();
 se1.selectedIndex=today.getYear()-1900;
 se2.selectedIndex=today.getMonth();
 settab();
}
function alerttoday()//今天的alert
{
 var today=new Date();
 alert('今天是'+today.getYear()+'年'+today.getMonth()+'月'+today.getDate()+'日');//Line119
}

</script>

<body>
<br><br>
<table border=0 id=tab1 align=center>
<tr align=center>
<td><font color=red>日</font></td><td>一</td><td>二</td><td>三</td><td>四</td><td>五

</td><td><font color=red>六</font></td>
</tr>
<tr align=center>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr align=center>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr  align=center>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
</table>
<br><br>
<select id='se1' onChange="settab()" align=center></select>
<select id='se2' onchange="settab()"></select>

<input id=btndown type=button onclick="mondown()" value=上一月>
<input id=btnup type=button onclick="monup()" value=下一月>
<input id=btntoday type=button onclick="gettoday()" value=今天>
</body>

Lad.li

posted @ 2009-03-01 21:42  silverPerson  阅读(205)  评论(0编辑  收藏  举报