这个日历的效果非常的简洁，本人非常的喜欢，以后会弄的到，先放在这里再说。
效果
<
>
- 日
- 一
- 二
- 三
- 四
- 五
- 六
使用方法
把下面代码加到 <head> 与</head>之间
<style type="text/css">
*{margin:0;padding:0;}
ul,li{list-style:none;}
body{font-weight:bold;font-family:" 微软雅黑 "," 新宋体 ",serif,arial;}
#calendar{width:280px;overflow:hidden;border:1px solid #dadada;position:absolute;left:50%;top:50%;margin-left:-141px;margin-top:-141px;border-radius:3px;}
.c_header{width:100%;height:60px;background-color:#83d8e7;background-image:linear-gradient(to bottom,#abe5ef,#83d8e7);position:relative;}
.c_header h1{font-size:16px;height:30px;line-height:30px;text-align:center;color:#ffffff;}
.c_header span{width:20px;height:20px;line-height:20px;color:#ffffff;text-align:center;position:absolute;top:5px;border-radius:50%;background-image:linear-gradient(to bottom,#83d8e7,#abe5ef);cursor:pointer;}
.c_header span:hover{background:#83d8e7;}
.c_header span.pre{left:10px;}
.c_header span.next{right:10px;}
.c_header ol{position:absolute;left:0;top:30px;overflow:hidden;}
.c_header ol li{float:left;color:#ffffff;width:40px;height:30px;line-height:30px;text-align:center;}
.c_body{overflow:hidden;}
.c_body li{width:38px;height:38px;line-height:38px;font-size:16px;text-align:center;float:left;border:1px solid #ffffff;color:#333;}
.c_body li.active{border:1px solid #dadada;background-color:#83d8e7;color:#fff;}
.c_body li.grey{color:#999;}
</style>
<script type="text/javascript">
window.onload=function()
{var oCal=document.getElementById("calendar");
var oTitle=oCal.getElementsByTagName("h1")[0];
var oUl=oCal.getElementsByTagName("ul")[0];
var aLi=oUl.getElementsByTagName("li");
var oPre=oCal.getElementsByTagName("span")[0];
var oNext=oCal.getElementsByTagName("span")[1];
var oNow=new Date();
var nowYear=oNow.getFullYear();
var nowMonth=oNow.getMonth();
var nowDate=oNow.getDate();
var nowDay=oNow.getDay();
var nowTime=oNow.getTime();
var tMonth=nowMonth; // 作为日历里更改的那个 Month
function createCalendar(tMonth)
{
// 根据传入的月份重新算时间
var oDate=new Date();
oDate.setMonth(tMonth);
oDate.setDate(1);
var iYear=oDate.getFullYear();
var iMonth=oDate.getMonth();
var iDay=oDate.getDay();
oTitle.innerHTML=iYear+" 年 "+(iMonth+1)+" 月 ";
// 初始化一下
for(var i=0;i<aLi.length;i++)
{aLi[i].innerHTML="";
aLi[i].style.height="40px";
aLi[i].className="";
}
var iSum=0; // 存本月天数
var bLeap=false; // 是否是闰年
if(iYear%4==0 && iYear%100!==0 || iYear%400==0) bLeap=true;
switch(iMonth+1)
{
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
iSum=31;
break;
case 4:
case 6:
case 9:
case 11:
iSum=30;
break;
case 2:
if(bLeap) iSum=29;
else iSum=28;
break;
}
for(var i=1;i<=iSum;i++)
{aLi[iDay].innerHTML=i;
iDay++;
}
for(var i=0;i<aLi.length;i++)
{if(aLi[i].innerHTML==nowDate && iYear==nowYear && iMonth==nowMonth)
{aLi[i].className="active";
}
else if((aLi[i].innerHTML<nowDate && iMonth==nowMonth && iYear==nowYear) ||
iMonth<nowMonth && iYear==nowYear ||
iYear<nowYear)
{aLi[i].className="grey";
}
}
// 把没字的格子折叠起来
for(var i=0;i<aLi.length;i++)
{if(aLi[i].innerHTML=="")
{aLi[i].style.height="0px";
}
}
}
createCalendar(tMonth);
oPre.onclick=function()
{createCalendar(--tMonth);
};
oNext.onclick=function()
{createCalendar(++tMonth);
};
};
</script>把下面代码加到 <body> 与</body>之间
<div id="calendar">
<div class="c_header">
<h1></h1>
<span class="pre"><</span>
<span class="next">></span>
<ol>
<li> 日 </li>
<li> 一 </li>
<li> 二 </li>
<li> 三 </li>
<li> 四 </li>
<li> 五 </li>
<li> 六 </li>
</ol>
</div>
<ul class="c_body">
<li></li><li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li><li></li>
</ul>
</div>