0.效果预览

简易

只实现了日历最基础的功能，当前日期红色显示，可通过上方的左右按钮查看上一月或下一月的日期。

1.HTML部分

2.CSS部分

#cldFrame{

position: relative;

width: 440px;

margin: 50px auto;

}

#cldBody{

margin: 10px;

position: absolute;

width: 420px;

}

#top{

position: relative;

height: 60px;

text-align: center;

line-height: 60px;

}

#topDate{

font-size: 30px;

}

.curDate{

color: red;

font-weight: bold;

}

table{

background-color: #f7f7f7;

}

#week td{

font-size: 15px;

}

td{

height: 60px;

width: 60px;

text-align: center;

font-family: Simsun;

font-size: 20px;

}

#left, #right{

position: absolute;

width: 60px;

height: 60px;

}

#left{left: 0px;}

#right{right: 0px;}

#left:hover, #right:hover{

background-color: rgba(30, 30, 30, 0.2);

}

Html+Css

当前显示月份和日期下面将在JS中添加。

3.JS部分及原理讲解

先介绍两个常用的和时间有关的函数，相信大多数人都接触过~

①判断某年是否是闰年

/*判断某年是否是闰年*/

function isLeap(year) {

if((year%4==0 && year%100!=0) || year%400==0){

return true;

}

else{

return false;

}

}

二月大概是十二个月份中最不安分的一个月。

②判断某年某月某日是星期几

var monthDay = [31,0,31,30,31,30,31,31,30,31,30,31];

在这之前用数组存放每个月有多少天，我这里将二月的天数设置成了0，之后再决定是加28还是29。

/*判断某年某月某日是星期几，默认日为1号*/

function whatDay(year, month, day=1) {

var sum = 0;

sum += (year-1)*365+Math.floor((year-1)/4)-Math.floor((year-1)/100)+Math.floor((year-1)/400)+day;

for(var i=0; i

sum += monthDay[i];

}

if(month > 2){

if(isLeap(year)){

sum += 29;

}

else{

sum += 28;

}

}

return sum%7; //余数为0代表那天是周日，为1代表是周一，以此类推

}

这个函数是为了判断某年某月的1号是星期几而设定的，实际上可以不设置day这个参数，加上了day这个变量，允许使用者在查某日的日期是星期几时也能调用这个函数。

③日历添加部分

根据当前日期决定日历显示哪个月的日期，根据那月的1号是星期几决定1号的添加位置，前方用空格子填充。该月添加完后后方也用空格子补齐。

/*显示日历*/

function showCld(year, month, firstDay){

var i;

var tagClass = "";

var nowDate = new Date();

var days;//从数组里取出该月的天数

if(month == 2){

if(isLeap(year)){

days = 29;

}

else{

days = 28;

}

}

else{

days = monthDay[month-1];

}

/*当前显示月份添加至顶部*/

var topdateHtml = year + "年" + month + "月";

var topDate = document.getElementById('topDate');

topDate.innerHTML = topdateHtml;

/*添加日期部分*/

var tbodyHtml = '

';

for(i=0; i

tbodyHtml += "

";

}

var changLine = firstDay;

for(i=1; i<=days; i++){//每一个日期的填充

if(year == nowDate.getFullYear() && month == nowDate.getMonth()+1 && i == nowDate.getDate()) {

tagClass = "curDate";//当前日期对应格子

}

else{

tagClass = "isDate";//普通日期对应格子，设置class便于与空白格子区分开来

}

tbodyHtml += "

" + i + "";

changLine = (changLine+1)%7;

if(changLine == 0 && i != days){//是否换行填充的判断

tbodyHtml += "

";

}

}

if(changLine!=0){//添加结束，对该行剩余位置的空白填充

for (i=changLine; i<7; i++) {

tbodyHtml += "

";

}

}//实际上不需要填充后方，但强迫症必须整整齐齐！

tbodyHtml +="

";

var tbody = document.getElementById('tbody');

tbody.innerHTML = tbodyHtml;

}

调用后，日历就可以完整显示了~

var curDate = new Date();

var curYear = curDate.getFullYear();

var curMonth = curDate.getMonth() + 1;

showCld(curYear,curMonth,whatDay(curYear,curMonth));

④下一月与上一月

function nextMonth(){

var topStr = document.getElementById("topDate").innerHTML;

var pattern = /\d+/g;

var listTemp = topStr.match(pattern);

var year = Number(listTemp[0]);

var month = Number(listTemp[1]);

var nextMonth = month+1;

if(nextMonth > 12){

nextMonth = 1;

year++;

}

document.getElementById('topDate').innerHTML = '';

showCld(year, nextMonth, whatDay(year, nextMonth));

}

function preMonth(){

var topStr = document.getElementById("topDate").innerHTML;

var pattern = /\d+/g;

var listTemp = topStr.match(pattern);

var year = Number(listTemp[0]);

var month = Number(listTemp[1]);

var preMonth = month-1;

if(preMonth < 1){

preMonth = 12;

year--;

}

document.getElementById('topDate').innerHTML = '';

showCld(year, preMonth, whatDay(year, preMonth));

}

两者没多大差别，别忘了要绑定到按钮上：

document.getElementById('right').onclick = function(){

nextMonth();

}

document.getElementById('left').onclick = function(){

preMonth();

}

更多有趣的功能等待着你去添加~