<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>日历</title>
<style>
*{
margin: 0;
padding: 0;
}
.table span{
float: left;
width: 80px;
height: 30px;
line-height: 30px;
/*border:1px solid #cdcdcd;*/
/*border-width:1px 0 0px 1px;*/
margin: 0 1px 1px 0px;
text-align: center;
background: #fff;
}
.table1 span{
float: left;
width: 80px;
height: 30px;
line-height: 30px;
/*border:1px solid #cdcdcd;*/
/*border-width:1px 0 0px 1px;*/
margin: 0 1px 1px 0px;
_margin-bottom:0;
text-align: center;
background: #fff;
}
#rili{
width: 567px;
padding-left:1px;
padding-top: 1px;
*padding-bottom:1px;
_padding-bottom:0px;
background: #cdcdcd;
overflow: hidden;
margin:0 auto;
}
.table .haha{
background: #e5e5e5;
}
.table .red,.table1 .red{
color:red;
}
.div1{
text-align: center;
background: #fff;
margin-bottom: 1px;
margin-right: 1px;
}
</style>
</head>
<body>
<div id="rili">
<div class="div1">
<button id="btn1"><<</button>
<span id="year_month"></span>
<button id="btn2">>></button>
</div>
<div class="table1">
<span>一</span>
<span>二</span>
<span>三</span>
<span>四</span>
<span>五</span>
<span class="red">六</span>
<span class="red">日</span>
</div>
<div class="table">
</div>
</div>
<script src="js/jquery-1.10.1.min.js"></script>
<script>
var dayfist;
var date=new Date();
var year=date.getFullYear();
var month=date.getMonth();
var riqi=date.getDate();
var monthDay;
function firstday(year,month){
dayfist=new Date(year,month,1).getDay();
monthDay=new Date(year,month+1,0).getDate();
day(monthDay,dayfist);
}
firstday(year,month);
function day(monthDay,dayfist){
html=year+"年"+(month+1)+"月";
$("#year_month").html(html);
$(".table").html("");
if(dayfist>0){
dayfist-=1;
}else{
dayfist=6;
}
var sumdate=monthDay+dayfist;
var sumdate1;
sumdate1=sumdate-sumdate%7+7;
if(sumdate%7==0){
sumdate1-=7;
}
var haha=1;
for(var i=0;i<sumdate1;i++){
if(i>=dayfist){
if(i<sumdate){
if(i%7==6 || i%7==5){
$("<span>").html(i-dayfist+1).appendTo($(".table ")).attr("class","red");
}
else{
$("<span>").html(i-dayfist+1).appendTo($(".table "));
}
}
else{
if(i%7==6 || i%7==5){
$("<span>").html(haha).appendTo($(".table")).attr("class","red haha");
haha++;
}
else{
$("<span>").html(haha).appendTo($(".table ")).attr("class","haha");
haha++;
}
}
}else{
$("<span>").html("").appendTo($(".table"));
// console.log("haha");
}
}
}
$("#btn1").click(function(){
month--;
if(month<0){
year--;
month=11;
}
firstday(year,month);
})
$("#btn2").click(function(){
month++;
if(month>11){
year++;
month=0;
}
firstday(year,month);
})
</script>
</body>
</html>
原文：http://www.cnblogs.com/leimeng/p/5195130.html