js随笔—日历的简单实现（无css）

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_40780805/article/details/84823418

有关js实现日历的列子网上一抹多，我是根据js制作日历的思路方法来实现的js逻辑代码，因为只是学习js实现日历的原理，所以实例为纯js，示例图如下（囧）：

---

第一步，html

<table id="cal_show" border="1"></table>

不能再多了，这样已经不少了

第二步，js

分析：

• 日历表不易变的部分：日历头（即“<2018年12月5日>”和“日一二三四五六”）

//初始化日历表（设置表头）
var setCalendarTop=function(){
	var cal_show=document.getElementById("cal_show");//获取日历table容器
	cal_show.innerHTML="<tr><th colspan='7'><div class='cal_top'><span style='float: left;' id='cal_top_pre'>&lt;</span><em id='cal_top_date'></em><span style='float: right;' id='cal_top_next'>&gt;</span></div></th></tr>";
	cal_show.innerHTML+="<tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr>";
}

• 打印当前月日期：

1.显示表头日期

//显示表头日期
var setTopDate=function(year,month,today){
	var cal_top_mid=document.getElementById("cal_top_mid");
	cal_top_mid.innerHTML=year+"年"+month+"月"+today+"日";
}

2.获得当前月的第一天是星期几（第一天开始前有多少个空格）

//返回指定年月的第一天是星期几
var firstWeek = function(year,month){
    var d = new Date();
    d.setYear(year);
    d.setMonth(month-1);
    d.setDate(1);
    return d.getDay();
}

3.获得当前月有多少天（如果是二月需判断是否是闰年）

//闰年判断
var isLeapYear=function(year){
	if(year%400===0||(year%4===0&&year%100!==0)){
		return true;
	}
	return false;
}

//返回指定年月的天数
var monthDays=function(year,month){
	switch(month){
	case 1: return 31;
	case 2: return isLeapYear(year)?28:29;
	case 3: return 31;
	case 4: return 30;
	case 5: return 31;
	case 6: return 30;
	case 7: return 31;
	case 8: return 31;
	case 9: return 30;
	case 10: return 31;
	case 11: return 30;
	case 12: return 31;
	}
}

4.根据2和3确定日历表的行数

//日历表行数
var getCalRow=function(days,firstday){
	return Math.ceil((days+firstday)/7);//向上取整
}

5.开始打印日历表，以两个for循环输出，循环第一行与最后一行的空格需用到if判断（第一行根据第1步获得的星期确定，最后一行根据第2步获得的的当前月天数确定）

//显示日历表
var showCalendar=function(year,month,today){
	setTopDate(year,month,today);//显示表头日期
	var firstday=firstWeek(year,month);//得到指定年月的第一天是星期几{0:日,1:一,2:二,3:三,4:四,5:五,6:六}
	var days=monthDays(year,month);//得到指定年月的天数
	var row_num=getCalRow(days,firstday);//日历表行数
	var cal_show=document.getElementById("cal_show");//获取日历table容器
	var day_count=1;//初始化第一天
	for(var i=0;i<row_num;i++){
		var tr=null;
		for(var j=0;j<7;j++){
			if(day_count<=days){
				//每一行开始前创建好tr标签以及class属性
				if(j===0){
					tr=document.createElement("tr");
					tr.setAttribute("class","cal_row");
				}
				//第一行
				if(i===0){
					if(j<firstday){
						tr.innerHTML+="<td></td>";
						continue;
					}else{
						if(today!=null&&today===day_count){
							tr.innerHTML+="<td style='color:red'>"+day_count+"</td>";
						}else{
							tr.innerHTML+="<td>"+day_count+"</td>";
						}
					}
				//第二行以及之后
				}else{
					if(today!=null&&today===day_count){
						tr.innerHTML+="<td style='color:red'>"+day_count+"</td>";
					}else{
						tr.innerHTML+="<td>"+day_count+"</td>";
					}
				}
				day_count++;
			//最后一行空格
			}else{
				tr.innerHTML+="<td></td>";
			}
		}
		cal_show.appendChild(tr);
	}
}

6.页面加载时显示日历

//加载网页后自动加载日历
		setCalendarTop();//设置日历表头
		var date = new Date();//该date可供后面修改以查找上一月和下一月
		var year = date.getFullYear();//getYear一些浏览器2018返回为118,应用getFullYear
		var month = date.getMonth() + 1;//得到的月份是从0开始的
		var today = date.getDate();
		showCalendar(year, month, today);
//查找上一月日历
//...
//查找下一月日历
//...

7.在切换月份之前应先将原日历表中的数据清空

//清空日历数据
var emptyCalendar=function(){
	var cal_show=document.getElementById("cal_show");
	var cal_row=cal_show.childNodes;
	var n=cal_row.length;//因为在for循环中cal_row.length是变化的，所以应在循环外确定循环次数
	for(var i=2;i<n;i++){
		cal_show.removeChild(cal_row[2]);
	}
}

8.上一月事件（放在第6步之后）

//查找上一月日历
document.getElementById("cal_top_pre").onclick=function(){
		emptyCalendar();//先清空日历表
		date.setMonth(date.getMonth()-1);//date为全局变量
		month=date.getMonth()+1;//month为全局变量
		if(month==12){
			date.setYear(year-1);//year为全局变量
			year=date.getFullYear();
		}
		showCalendar(year,month,today);//today为全局变量
	}
//查找下一月日历

9.下一月事件（放在第6或8步之后）

//查找下一月日历
		document.getElementById("cal_top_next").onclick = function() {
			emptyCalendar();//先清空日历表
			date.setMonth(date.getMonth() + 1);
			month = date.getMonth() + 1;
			if (month == 12) {
				date.setYear(year + 1);
				year = date.getFullYear();
			}
			showCalendar(year, month, today);
		}

代码整合：

$(document).ready(function() {
		//加载网页后自动加载日历
		setCalendarTop();//设置日历表头
		var date = new Date();//该date可供后面修改以查找上一月和下一月
		var year = date.getFullYear();//getYear一些浏览器2018返回为118,应用getFullYear
		var month = date.getMonth() + 1;//得到的月份是从0开始的
		var today = date.getDate();
		showCalendar(year, month, today);
		//上一月事件
		document.getElementById("cal_top_pre").onclick = function() {
			emptyCalendar();//先清空日历表
			date.setMonth(date.getMonth() - 1);
			month = date.getMonth() + 1;
			if (month == 12) {
				date.setYear(year - 1);
				year = date.getFullYear();
			}
			showCalendar(year, month, today);
		}
		//下一月事件
		document.getElementById("cal_top_next").onclick = function() {
			emptyCalendar();//先清空日历表
			date.setMonth(date.getMonth() + 1);
			month = date.getMonth() + 1;
			if (month == 12) {
				date.setYear(year + 1);
				year = date.getFullYear();
			}
			showCalendar(year, month, today);
		}
	});

//初始化日历表（设置表头）
var setCalendarTop = function() {
	var cal_show = document.getElementById("cal_show");//获取日历table容器
	cal_show.innerHTML = "<tr><th colspan='7'><div class='cal_top'><span style='float: left;' id='cal_top_pre'>&lt;</span><em id='cal_top_date'></em><span style='float: right;' id='cal_top_next'>&gt;</span></div></th></tr>";
	cal_show.innerHTML += "<tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr>";
}
//显示表头日期
var setTopDate = function(year, month, today) {
	var cal_top_mid = document.getElementById("cal_top_date");
	cal_top_mid.innerHTML = year + "年" + month + "月" + today + "日";
}
//闰年判断
var isLeapYear = function(year) {
	if (year % 400 === 0 || (year % 4 === 0 && year % 100 !== 0)) {
		return true;
	}
	return false;
}
//返回指定年月的第一天是星期几
var firstWeek = function(year,month){
    var d = new Date();
    d.setYear(year);
    d.setMonth(month-1);
    d.setDate(1);
    return d.getDay();
}
//返回指定年月的天数
var monthDays=function(year,month){
	switch(month){
	case 1: return 31;
	case 2: return isLeapYear(year)?28:29;
	case 3: return 31;
	case 4: return 30;
	case 5: return 31;
	case 6: return 30;
	case 7: return 31;
	case 8: return 31;
	case 9: return 30;
	case 10: return 31;
	case 11: return 30;
	case 12: return 31;
	}
}
//清空日历数据
var emptyCalendar=function(){
	var cal_show=document.getElementById("cal_show");
	var cal_row=cal_show.childNodes;
	var n=cal_row.length;
	for(var i=2;i<n;i++){
		cal_show.removeChild(cal_row[2]);
	}
}
//日历表行数
var getCalRow=function(days,firstday){
	return Math.ceil((days+firstday)/7);//向上取整
}
//显示日历表
var showCalendar=function(year,month,today){
	setTopDate(year,month,today);//显示表头日期
	var firstday=firstWeek(year,month);//得到指定年月的第一天是星期几{0:日,1:一,2:二,3:三,4:四,5:五,6:六}
	var days=monthDays(year,month);//得到指定年月的天数
	var row_num=getCalRow(days,firstday);//日历表行数
	var cal_show=document.getElementById("cal_show");//获取日历table容器
	var day_count=1;//初始化第一天
	for(var i=0;i<row_num;i++){
		var tr=null;
		for(var j=0;j<7;j++){
			if(day_count<=days){
				//每一行开始前创建好tr标签以及class属性
				if(j===0){
					tr=document.createElement("tr");
					tr.setAttribute("class","cal_row");
				}
				//第一行
				if(i===0){
					if(j<firstday){
						tr.innerHTML+="<td></td>";
						continue;
					}else{
						if(today!=null&&today===day_count){
							tr.innerHTML+="<td style='color:red'>"+day_count+"</td>";
						}else{
							tr.innerHTML+="<td>"+day_count+"</td>";
						}
					}
				//第二行以及之后
				}else{
					if(today!=null&&today===day_count){
						tr.innerHTML+="<td style='color:red'>"+day_count+"</td>";
					}else{
						tr.innerHTML+="<td>"+day_count+"</td>";
					}
				}
				day_count++;
			}else{
				tr.innerHTML+="<td></td>";
			}
		}
		cal_show.appendChild(tr);
	}
}