<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>calendar</title>
<link type="text/css" href="css/calendar.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript">
//日历——————————————————————————————————————————
$(function() {
//绘制月历体——————————————————————————————————————————
for(var i=0;i<35;i++){
$("<li><span></span></li>").appendTo(".month-body").addClass("month-cell");
}
var today=new Date()
var FullYear = today.getFullYear(); //获取年份
var m = today.getMonth(); //获取月号
var month = today.getMonth()+1; //获取月份
if(month<10){
month="0"+month;
}
var date = today.getDate(); //获取日期
var day = today.getDay(); //获取星期
var monthsNum=[31,28,31,30,31,30,31,31,30,31,30,31];
var isleapyear = FullYear%4; //判断闰年
if(isleapyear==0){
monthsNum[1]=29;
}
if(day==0){
day = 7;
}
var firstDay = day-(date%7-1); //!important 计算月初星期数
if(firstDay==7){ //如果月初为七，归零
firstDay =0;
}
if(firstDay<0){ //如果月初为负，加七循环
firstDay +=7;
}
var f = firstDay;
for(var j=1;j<=monthsNum[m];j++){
$("li.month-cell span").eq(f).text(j).parent().addClass("pink");
f++;
}
$("li.month-cell span").eq(firstDay-1+date).parent().addClass("red");
$(".month-head span").text(FullYear+"年"+month+"月");
})
</script>
</head>
<body>
<div class="month-container">
<div class="month-head"><span></span></div>
<ul class="month-body">
<div class="month-cell orange"><span>日</span></div>
<div class="month-cell blue"><span>一</span></div>
<div class="month-cell blue"><span>二</span></div>
<div class="month-cell blue"><span>三</span></div>
<div class="month-cell blue"><span>四</span></div>
<div class="month-cell blue"><span>五</span></div>
<div class="month-cell blue"><span>六</span></div>
</ul>
<div class="clear"></div>
</div>
</body>
</html>
