一、HTML
<a href="#" id="calendar_btn" title="日历">日历</a>
<div class="calendar">
<div class="title">
<h1 class="green" id="calendar_title">MONTH</h1>
<h2 class="green" id="calendar_year">year</h2>
<a href="" id="prev">Prev Month</a>
<a href="" id="next">Next Month</a>
</div>
<div class="body">
<div class="green body_list">
<ul>
<li>日</li>
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
<li>五</li>
<li>六</li>
</ul>
</div>
<div class="drakgrey body_list">
<ul id="days"></ul>
</div>
</div>
</div>
二、CSS
/*显示日历按钮*/
#calendar_btn{
font-size:0 ;
background: url("../images/calendar1.png");
background-size: cover;
width: 50px;
height: 50px;
display: inline-block;
position: relative;
left: -19%;
}
/*日历窗口*/
.calendar{
width: 450px;
height: 350px;
background: rgba(255,255,255,.8);
box-shadow: 0 1px 1px rgba(0,0,0,.1);
position: absolute;
right: 0;
display: none;
z-index:100;
}
.calendar .title{
height: 70px;
border-bottom:1px solid rgba(0,0,0,0.1);
text-align:center;
position:relative;
}
.calendar #calendar_title{
font-size: 25px;
padding:14px 0 0 0;
line-height: 1;
}
.calendar #calendar_year{
font-size: 15px;
font-weight:normal ;
line-height: 1;
}
.calendar .title a{
text-indent: -99999px;
position: absolute;
width: 60px;
height: 70px;
background: no-repeat 50% 50%;
top: 0;
}
.calendar .title #prev{
background-image: url(../images/prev.png);
left: 0;
}.calendar .title #next{
background-image: url(../images/next.png);
right: 0;
}
.calendar .body_list ul{
width: 100%;
font-weight:bold ;
font-size: 14px;
}
div.calendar .body_list ul li{
width: 14.28%;
height: 36px;
line-height: 36px;
display: block;
float: left;
margin-right: 0;
}
.calendar .green{
color:#6ac13c;
}
/*日期被选中字体显示红色*/
.calendar .green_box{
background-color: #e9f8df;
border: 1px solid #6ac13c;
}
.calendar .lingthgrey{
color:#a8a8a8;
}
.calendar .drakgrey{
color:#565656;
}
/*双休日日期字体显示红色*/
.calendar .lingthred{
color:#DE8C9E;
}
.calendar .drakred{
color:#F40C33;
}
.calendar .white{
color:#fff;
}
.calendar .white_box{
border:1px solid #fff;
background:rgba(0,0,0,.5);;
}
JavaScript
//闰年每月几天
var sp_month=[31,29,31,30,31,30,31,31,30,31,30,31];
//非闰年每月几天
var normal_month=[31,28,31,30,31,30,31,31,30,31,30,31];
var month_name=["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"];
//获取当天
var now=new Date();
//获取今年
var now_year=now.getFullYear();
//获取今月
var now_month=now.getMonth();
//获取今日
var now_day=now.getDate();
//判断是否为闰年,返回当月天数
function isSp_month(year,month){
if((year%4==0)||(year%400==0)&&(year%100!=0)){
return sp_month[month];
}else{
return normal_month[month];
}
}
//获取当月第一天是星期几
function get_firstDay(month,year){
var first=new Date(year,month,1);
return (first.getDay());
}
function refreshDate(){
var str="";
//获取当月天数
var currMonth_days=isSp_month(now_year,now_month);
//获取当月第一天
var firstDay=get_firstDay(now_month,now_year);
var li_class="";
for (var i= 0;i<firstDay;i++){
str+="<li></li>";
}
for (var j=1;j<=currMonth_days;j++){
//判断当月日期是否是今天之前
if(now_year==now.getFullYear()&&now_month==now.getMonth()&&j<now_day
||now_year==now.getFullYear()&&now_month<now.getMonth()
||now_year<now.getFullYear()){
li_class=" class='lingthgrey'";
}
//判断当月日期是否是今天
else if(now_year==now.getFullYear()
&&now_month==now.getMonth()&&j==now_day){
li_class=" class='white white_box'"
}
//其余是今天之后
else{
li_class=" class='drakgrey'"
}
//创建日期
str+="<li"+li_class+">"+j+"</li>";
}
//放入当月日期
$("#days").html(str);
//放入当月月份
$("#calendar_title").html(month_name[now_month]);
//放入今年
$("#calendar_year").html(now_year);
//当天之前双休日淡红
$("#days li").each(function(index){
if($(this).attr("class")=="lingthgrey"){
if(index%7==0) {
$(this).attr("class", "lingthred");
$($("#days li")[index-1]).attr("class", "lingthred");
}
}
//当天是双休日深红
else if($(this).attr("class")=="white white_box"){
if((index)%7==0||(index+1)%7==0) {
$(this).attr("class", "drakred white_box");
}
}
//当天之后的双休日深红
else{
if((index)%7==0||(index+1)%7==0) {
$(this).attr("class", "drakred");
}
}
})
}
function day_click(){
$("#calendar_li .calendar .body #days li").click(function(){
$("#calendar_li .calendar .body #days li").removeClass("green_box");
$(this).addClass("green_box");
});
}
//显示当前日期日历页方法
refreshDate();
//当前日期日历点击几号显示绿边框
day_click();
//按左箭头显示上一个月
$("#prev").click(function(e){
e.preventDefault();
now_month--;
//防止点击过快导致now_month<0
if(now_month<=0){
now_month=11;
now_year--;
}
//显示上一个月日期日历
refreshDate();
//上一个月日期日历点击几号显示绿边框
day_click()
});
//按右箭头显示下一个月
$("#next").click(function(e){
e.preventDefault();
now_month++;
if(now_month>11){
now_month=0;
now_year++;
}
//显示下一个月日期日历
refreshDate();
//下一个月日期日历点击几号显示绿边框
day_click()
});
$("#calendar_btn").click(function(e){
e.preventDefault();
});
$("#calendar_li").mouseover(function(){
$(".calendar").css("display","block");
});
$("#calendar_li").mouseout(function(){
$(".calendar").css("display","none");
});