您的位置：首页 > Web前端 > JavaScript
一个简单的JS小日历代码

2009-10-20 13:56 513 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Calendar Page</title>

<link rel="Stylesheet" href="Calendar.css" mce_href="Calendar.css" type="text/css" />

<mce:script language="javascript" type="text/javascript"><!--
function myCalendar()

{

var today=new Date();

this.year=today.getFullYear();

this.month=today.getMonth()+1;

this.day=today.getDate();

this.showCalendar=showCalendar;

}

function showDate(year,month)

{

var myDate=new Date(year,month-1,1);

var weekDate=myDate.getDay();

var arrayLen=new Array(31,30,31,30,31,30,31,31,30,31,30,31);

arrayLen[1]=((year%400==0)||(year%4==0&&year%100!=0))?29:28;

for(i=0;i<tabDate.cells.length;i++)

{

tabDate.cells[i].innerHTML="";

}

for(i=0;i<arrayLen[month-1];i++)

{

tabDate.cells[weekDate+i].innerHTML=i+1;

}

var today=new Date();

var todayDate=today.getDate();

var todayWeek=new Date(today.getFullYear(),today.getMonth(),1).getDay()-1;

if(year==today.getFullYear()&&(month-1)==today.getMonth())

{

tabDate.cells[todayDate+todayWeek].style.color="red";

tabDate.cells[todayDate+todayWeek].style.background="#4bacff";

}

else

{

tabDate.cells[todayDate+todayWeek].style.color="#000000";

tabDate.cells[todayDate+todayWeek].style.background="#f0f7ff";

}

}

function addMonth()

{

var year=parseInt(tabTitle.cells[2].innerHTML);

var month=parseInt(tabTitle.cells[3].innerHTML);

month++;

if(month>12)

{

month=1;

year++;

tabTitle.cells[2].innerHTML=year;

}

tabTitle.cells[3].innerHTML=month;

showDate(year,month);

}

function addYear()

{

var year=parseInt(tabTitle.cells[2].innerHTML);

var month=parseInt(tabTitle.cells[3].innerHTML);

year++;

tabTitle.cells[2].innerHTML=year;

showDate(year,month);

}

function cutMonth()

{

var year=parseInt(tabTitle.cells[2].innerHTML);

var month=parseInt(tabTitle.cells[3].innerHTML);

month--;

if(month<1)

{

month=12;

year--;

tabTitle.cells[2].innerHTML=year;

}

tabTitle.cells[3].innerHTML=month;

showDate(year,month);

}

function cutYear()

{

var year=parseInt(tabTitle.cells[2].innerHTML);

var month=parseInt(tabTitle.cells[3].innerHTML);

year--;

tabTitle.cells[2].innerHTML=year;

showDate(year,month);

}

function showCalendar()

{

var year=this.year;

var month=this.month;

var day=this.day;

document.write("<table class='tabCalender' id='tabCalendar' cellpadding='0' cellspacing='0'>")

document.write("<tr><td>");

document.write("<table id='tabTitle' class='tabTitle' cellpadding='0' cellspacing='0'");

document.write("<tr><td onclick='cutYear()' style="cursor:hand" mce_style="cursor:hand"> << </td><td onclick='cutMonth()' style="cursor:hand" mce_style="cursor:hand"> < </td><td>"+year+"</td><td>"+month+"</td><td>"+day+"</td><td onclick='addMonth()' style="cursor:hand" mce_style="cursor:hand"> > </td><td onclick='addYear()' style="cursor:hand" mce_style="cursor:hand"> >> </td></tr>");

document.write("</table>");

document.write("</td></tr>");

document.write("<tr><td>");

document.write("<table id='tabWeek' class='tabWeek' cellpadding='0' cellspacing='0'>");

document.write("<tr><td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr>");

document.write("</table>");

document.write("</td></tr>");

document.write("<tr><td>");

document.write("<table id='tabDate' class='tabDate' cellpadding='0' cellspacing='0'");

for(i=0;i<6;i++)

{

document.write("<tr>");

for(j=0;j<7;j++)

{

document.write("<td></td>");

}

document.write("</tr>");

}

document.write("</table>");

document.write("</td></tr>");

document.write("</table>");

showDate(year,month);

}

// --></mce:script>

</head>

<body>

<div>

<mce:script type="text/javascript"><!--
var myDate=new myCalendar();

myDate.showCalendar();

// --></mce:script>

</div>

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签： 日历 function stylesheet table date class
相关文章推荐
新的分享
章节导航