預備知識：
1.
一三五七八十臘，三一天永不差。四六九冬三十天，平年二月二十八。
四年一閏,百年不閏,四百年再閏。(臘指十一月，冬指十二月)
2.
一月大二月小，三月大四月小，五月大六月小，七月大八月小，九月大十月小，
十一月大十二月小。平年二月二十八。(月份大三十一天，月份小三十天)
實現效果：
![在這裏插入圖片描述]()
實現代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>calendar-日曆</title>
<script src="jquery-1.11.3.js"></script>
<style>
*{
margin:0;
padding:0;
}
#calendar{
color:white;
font-size: 10px;
width: 150px;
height: 135px;
background-color: #0F375F;
border: 1px transparent solid;
margin-left: 20px;
text-align: center;
}
#calendar-top{
width: 150px;
height: 15px;
font-weight: bold;
text-align: center;
border-bottom: 1px black solid;
}
#left-btn{
float: left;
margin-left:15px;
color: red;
cursor:pointer;
}
#right-btn{
float: right;
margin-right: 15px;
color: red;
cursor:pointer;
}
#calendar-week,#calendar-day{
padding-left: 15px;
}
#calendar-week>span,.day>span{
display: block;
float:left;
width: 15px;
height: 15px;
line-height: 15px;
border: 1px transparent solid;
text-align: center;
}
</style>
</head>
<body>
<div id="calendar">
<div id="calendar-top">
<span id="left-btn"><</span>
<span id="date"></span>
<span id="right-btn">></span>
</div>
<div id="calendar-week">
<span>日</span>
<span>一</span>
<span>二</span>
<span>三</span>
<span>四</span>
<span>五</span>
<span>六</span>
</div>
<div id="calendar-day">
</div>
</div>
<script type="text/javascript">
var leap_year_month_day = [31,29,31,30,31,30,31,31,30,31,30,31];
var common_year_month_day = [31,28,31,30,31,30,31,31,30,31,30,31];
var dt = new Date();
var year = dt.getFullYear();
var month = dt.getMonth() + 1;
var day = dt.getDate();
function isLeapYear(year){
if (year%4 ==0 && year%100 !=0 || year%400 ==0)
return true;
else
return false;
}
function theMonthFirstDayWeek(year,month){
var dt = new Date(year,month-1,1);
return dt.getDay()
}
function theMonthTotalDay(year,month){
if(month-1 < 0){
--year;
month = 12
}
var is_Leap_Year = isLeapYear(year);
var total_day;
if(is_Leap_Year){
total_day = leap_year_month_day[month-1];
}
else{
total_day = common_year_month_day[month-1];
}
return total_day;
}
function calendarDisplay(year,month){
var the_day = new Date(year,month-1);
$("#calendar-day").empty();
html ="";
for(i=0;i<6;i++){
html += "<div class='day'>";
for(j=0;j<7;j++)
html +="<span></span>";
html +="</div>";
}
$("#calendar-day").append(html);
console.log($("#calendar-day"))
var first_day_week = theMonthFirstDayWeek(year,month);
var month_total_day = theMonthTotalDay(year,month);
today_index = dt.getDate() + first_day_week -1;
$day_span = $(".day").children();
console.log($day_span);
pre_month_tab_number = first_day_week;
next_month_tab_number = 42 - month_total_day - first_day_week;
next_fill_index = month_total_day + first_day_week
console.log(pre_month_tab_number);
console.log(next_month_tab_number);
var pre_month_day = theMonthTotalDay(year,month-1);
console.log(pre_month_day);
for(i=first_day_week -1;i>=0;i--){
var node = document.createTextNode(pre_month_day);
console.log(pre_month_day);
$($day_span[i]).append(pre_month_day--).css({
"color": "#708090",
"background-color": "",
});
}
for(i=1;i<=month_total_day;i++){
var node = document.createTextNode(i);
$day_span[first_day_week].appendChild(node);
first_day_week++;
}
for(i=1;i<=next_month_tab_number;i++){
var node = document.createTextNode(pre_month_day);
console.log(pre_month_day);
$($day_span[next_fill_index++]).append(i).css({
"color": "#708090",
"background-color": "",
});
}
if(the_day.getFullYear()===dt.getFullYear() && the_day.getMonth()===dt.getMonth()){
day = dt.getDate();
$($day_span[today_index]).css(
{
"background-color":"#14C8D4"
}
);
}else{
day = the_day.getDate();
console.log("the_day.getFullYear:" + the_day.getFullYear()+"#year"+year);
}
if(month<10){
if(day<10)
date = year + "/" +"0" + month + "/" + "0" + day;
else
date = year + "/" +"0" + month + "/" + day;
}
else if(day<10)
date = year + "/" + month + "/" + "0" + day;
else
date = year + "/" + month + "/" + day;
$("#date").html(date);
}
$(function(){
calendarDisplay(year,month);
$("#left-btn").bind("click", function(){
--month;
if(month<=0){
--year;
month = 12
}
if(month<10)
date = year + "/" +"0" + month + "/" + "01";
else
date = year + "/" + month + "/" + "01";
$("#date").html(date);
calendarDisplay(year,month);
});
$("#right-btn").bind("click", function(){
++month;
if(month>12){
++year;
month = 1;
}
if(month<10)
date = year + "/" +"0" + month + "/" + "01";
else
date = year + "/" + month + "/" + "01";
$("#date").html(date);
calendarDisplay(year,month);
});
})
</script>
</body>
</html>
