JAVASCRIPT初级阶段之万年历

来源：互联网发布：手机错别字检查软件编辑：程序博客网时间：2024/06/06 20:11

不少人喜欢JAVASCRIPT，因为，他在网页里，发挥着无比强大的功效，让原本一潭死水般的页面生动活泼。来看看这些代码，希望对你有用。

<script language=javascript>
function settab()
{
var tab=document.getElementById('tab1');
//alert(se1.options[se1.selectedIndex].text)
var se1se11=se1.options[se1.selectedIndex].text;
var se2se21=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=" ";
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=" ";
tab.rows[6].cells[i].innerHTML=" ";
}
while(weekend<lastday)//循环到月末
{
for(var lin2=0;lin2<7;lin2++)
{
if(weekend+lin2<lastday)//数字小于等于当前月的最后一天
tab.rows[lines+1].cells[lin2].innerHTML=weekend+1+lin2;
else
tab.rows[lines+1].cells[lin2].innerHTML=" ";
}
weekend+=7;//周末再加7天
lines+=1;//循环一次加一行
}
lastline="";
//var tab=document.getElementById('tab1');
var today=new Date();
var todaytoday1=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>
<td><font color=red>日</font></td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td><font color=red>六</font></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>
<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>