var ul = document.getElementById("dateList");
var iNow = 0;
canClick(iNow);
document.getElementById("next").onclick = function () {
canClick(++iNow);
}
document.getElementById("prev").onclick = function () {
canClick(--iNow);
}
function canClick(n) {
var date = new Date();
var today = date.getDate();//1.得到今天是几号
date.setMonth(date.getMonth()+n,1);// 2.每月1号
var week = date.getDay();// 3.1号是周几
date.setMonth(date.getMonth() + 1, 0); // 下个月0号=这个月最后一天
var allDay = date.getDate(); // 4..这个月最后一天是几号=总天数
document.getElementsByTagName('h4')[0].innerHTML = date.getFullYear()+'年'+(date.getMonth()+1)+'月';
ul.innerHTML="";
//1号是星期几就要插入几个空的li
for (var i = 0; i < week; i++) {
ul.innerHTML += "<li></li>";
}
// 插入allDay个带日期的li
for (var j = 1; j <= allDay; j++) {
if (n === 0) {
if (j === today) {
ul.innerHTML += "<li class='red'>" + j + "</li>";
} else if ((j + week) % 7 === 0||(j + week) % 7 === 1) {
ul.innerHTML += "<li class='sun'>" + j + "</li>";
}
else if (j < today) {
ul.innerHTML += "<li class='ccc'>" + j + "</li>";
}
else {
ul.innerHTML += "<li>" + j + "</li>";
}
} else if (n < 0) {
if ((j + week) % 7 === 0||(j + week) % 7 === 1) {
ul.innerHTML += "<li class='sun'>" + j + "</li>";
}else{
ul.innerHTML += "<li class='ccc'>" + j + "</li>";
}
}else{
if ((j + week) % 7 === 0||(j + week) % 7 === 1) {
ul.innerHTML += "<li class='sun'>" + j + "</li>";
}else{
ul.innerHTML += "<li>" + j + "</li>";
}
}
}
}
<div id="calendar">
<h4>2013年10月</h4>
<a href="javascript:;" class="a1" id="prev">上月</a>
<a href="javascript:;" class="a2" id="next">下月</a>
<ul class="week">
<li>日</li>
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
<li>五</li>
<li>六</li>
</ul>
<ul class="dateList" id="dateList">
</ul>
</div>
*{margin:0;padding:0}
#calendar{width:210px;margin:100px auto; overflow:hidden;border:1px solid #000; padding:20px; position:relative}
#calendar h4{ text-align:center; margin-bottom:10px}
#calendar .a1{ position:absolute;top:20px;left:20px;}
#calendar .a2{ position:absolute;top:20px;right:20px;}
#calendar .week{height:30px; line-height:20px;border-bottom:1px solid #000; margin-bottom:10px}
#calendar .week li{ float:left;width:30px;height:30px; text-align:center; list-style:none;}
#calendar .dateList{ overflow:hidden; clear:both}
#calendar .dateList li{float:left;width:30px;height:30px; text-align:center; line-height:30px;list-style:none;}
#calendar .dateList .ccc{ color:#ccc;}
#calendar .dateList .red{ background:#F90; color:#fff;}
#calendar .dateList .sun{ color:#f00;}
.clickColor{
width:100px;
height:100px;
background:#f00;
}
在这里插入图片描述