<div class="calendar">
<div class="title">
<span class="green" id="calendar-year">Year</span>
<span class="green" id="calendar-title">Month</span>
<a style="text-decoration:none;font-size: 20px;" href="" id="pre"><</a>
<a style="text-decoration:none;font-size: 20px;" href="" id="next">></a>
</div>
<div class="body">
<div class="body-list">
<!--使用无序列表标签显示星期-->
<ul>
<li>日</li>
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
<li>五</li>
<li>六</li>
</ul>
</div>
<!--使用无序列表标签显示日期，日期使用JavaScript动态获取，然后使用innerHTML设置<ul>标签之间的HTML-->
<div class="darkgrey body-list">
<ul id="days">
</ul>
</div>
</div>
</div>script中
var month_olypic = [31,29,31,30,31,30,31,31,30,31,30,31];//正常年份12个月对应的天数
var month_normal = [31,28,31,30,31,30,31,31,30,31,30,31];//闰年中12个月对应的天数
var month_name =["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"];//定义要显示的月份数组
//获取以上各个部分的id
var holder = document.getElementById("days");
var prev = document.getElementById("prev");//上个月份的超链接id
var next = document.getElementById("next");//下个月份的超链接id
var ctitle = document.getElementById("calendar-title");
var cyear = document.getElementById("calendar-year");
//获取当天的年月日
var my_date = new Date();
var my_year = my_date.getFullYear();//获取年份
var my_month = my_date.getMonth(); //获取月份，下标从0开始
var my_day = my_date.getDate();//获取当前日期
//根据年月获取当月第一天是周几
function dayStart(month,year){
var tmpDate = new Date(year, month, 1);
return (tmpDate.getDay());
}
//根据年份判断某月有多少天，主要是区分闰年
function daysMonth(month, year){
var tmp1 = year % 4;
var tmp2 = year % 100;
var tmp3 = year % 400;
if((tmp1 == 0 && tmp2 != 0) || (tmp3 == 0)){
return (month_olypic[month]);//闰年
}else{
return (month_normal[month]);//非闰年
}
}
function refreshDate(){
var str = "";
//计算当月的天数和每月第一天都是周几
var totalDay = daysMonth(my_month,my_year);
var firstDay = dayStart(my_month, my_year);
//添加每个月前面的空白部分，即若某个月的第一天是从周三开始，则前面的周一，周二需要空出来
for(var i = 0; i < firstDay; i++){
str += "<li>"+"</li>";
}
//从一号开始添加到totalDay（每个月的总天数），并为pre，next和当天添加样式
var myclass;
for(var i = 1; i <= totalDay; i++){
//如果是已经过去的日期，则用浅灰色显示
if((my_year < my_date.getFullYear())||(my_year == my_date.getFullYear() &&
my_month < my_date.getMonth()) || (my_year == my_date.getFullYear() &&
my_month == my_date.getMonth() && i < my_day)){
myclass = " class='lightgrey'";
}
//如果正好是今天，则用绿色显示
else if(my_year == my_date.getFullYear() && my_month == my_date.getMonth() && i == my_day){
myclass = "class = 'green greenbox'";
}
//将来的日期用深灰色显示
else{
myclass = "class = 'darkgrey'";
}
str += "<li "+myclass+">"+i+"</li>";
}
holder.innerHTML = str;//为日期的列表标签设置HTML；
ctitle.innerHTML = month_name[my_month];//设置当前显示的月份
cyear.innerHTML = my_year;//设置当前显示的年份
}
refreshDate();//显示日期，更新界面
//上个月的点击事件
pre.onclick = function(e){
e.preventDefault();
my_month--;
if(my_month < 0){
my_year--;
my_month = 11;
}
refreshDate();//更新界面
}
//下个月的点击事件
next.onclick = function(e){
e.preventDefault();
my_month++;
if(my_month > 11){
my_month = 0;
my_year++;
}
refreshDate();//更新界面
}css
/*设置整个页面的显示样式*/
.calendar{
margin: 45px;
width: 450px;
height: 270px;
background: white;
box-shadow: 0px 1px 1px rgba(0,0,0,.1);
}
/*标题的显示样式*/
.title{
height: 40px;
line-height: 40px;
border-bottom: 1px solid rgba(0,0,0,.1);
position: relative;
text-align: center;
}
/*标题中的月份显示样式*/
#calendar-title{
font-size: 15px;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
padding: 14px 0 0 0;
}
/*标题中的年份显示样式*/
#calendar-year{
font-size: 25px;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
}
/*上个月的超链接显示样式*/
#pre{
position: absolute;
top: 0px;
left: 0px;
background: url(image/pre.png) no-repeat 50% 50%;
/*没规定大小时，图片显示 0X0*/
width: 60px;
height: 70px;
}
/*下个月的超链接显示样式*/
#next{
position: absolute;
top: 0px;
right: 0px;
background: url(image/next.png) no-repeat 50% 50%;
width: 60px;
height: 70px;
}
.body-list ul{
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
width: 100%;
box-sizing: border-box;
}
.body-list ul li{
list-style: none;
display: block;
width: 14.28%;
float: left;
/*规定行高，垂直居中*/
height: 36px;
line-height: 36px;
box-sizing: border-box;
text-align: center;
}
/*类选择器：设置所有class属性为green的标签的样式*/
.green{
color:aqua;
}
/*设置已经过去的日期颜色*/
.lightgrey{
color:#a8a8a8;
}
/*设置将来的日期颜色*/
.darkgrey{
color:#565656;
}
/*日期当天用绿色背景绿色文字加以显示*/
.greenbox{
color: aqua;
}
#days .lightgrey:nth-of-type(9){ color: red; }
#days .lightgrey:nth-of-type(2){ color: red; }
#days .lightgrey:nth-of-type(18){ color: red; }
#days .lightgrey:nth-of-type(26){ color: red; }
#days .lightgrey:nth-of-type(25){ color: #11C043; }
#days .lightgrey:nth-of-type(1){ color: #11C043; }
#days .lightgrey:nth-of-type(5){ color: #11C043; }
#days .lightgrey:nth-of-type(15){ color: #11C043; }
#days .lightgrey:nth-of-type(12){ color: #11C043; }
#days .lightgrey:nth-of-type(29){ color: #11C043; }
#days .lightgrey:nth-of-type(8){ color: #11C043; }
