2018-08-25
用javascript写日历
这是刚开始学习js基础时做的一个小小的日历案例,只是完成了简单的日历功能,可以输出指定年月的日历。
canlendar.png上面的输入框表示输入年份和月份,下面输出对应的日历。
写日历可以概括为以下思路:
1. 计算某月的天数
2. 计算指定年份某月1号距1900-1-1有多少天(只要找一个1月1日星期一的年份都可以实现计算)
3. 计算某月第一天是星期几
4. 正确处理换行的位置
首先封装函数,计算闰年平年
/*平年闰年*/
function isRn(year) {
return year % 4 === 0 && year % 100 !== 0 || year % 400 === 0;
}
计算某年某月有多少天,这里用的switch循环结构:
function calcMonthDays(year, month) {
var days;
switch (month) {
case 2:
days = isRn(year) ? 29 : 28;
break;
case 4:
case 6:
case 9:
case 11:
days = 30;
break;
default:
days = 31;
}
return days;
}
计算某年某月1号距1900-1-1有多少天的函数:
function calTotalDays(year, month) {
var allDays = 1;
for (var i = 1; i < month; i++) {
allDays += calcMonthDays(year, i);
}
for (var i = 1900; i < year; i++) {
allDays += isRn(i) ? 366 : 365;
}
return allDays;
}
计算星期:
function calcWeekDays(year, month) {
//计算距离1900-1-1有多少天
var _totalDays = calTotalDays(year, month);
//计算该月的第一天是星期几
var _weekday = _totalDays % 7;
return _weekday;
}
打印日历:
function prMonthCalendar(year, month) {
var _weekday = calcWeekDays(year, month);
var canlendar = "日\t一\t二\t三\t四\t五\t六\n";
for (var i = 0; i < _weekday; i++) {
//打印空格
canlendar += " \t";
}
var _days = calcMonthDays(year, month);
for (var i = 1; i <= _days; i++) {
canlendar += i + "\t";
if ((_weekday + i) % 7 === 0)
canlendar += "\n";//换行
}
console.log(canlendar);
}
在这基础上可以打印出指定年份的12个月的日历,只需在打印的时候加个for循环,如下:
for (var i = 1; i <= 12; i++) {//从一月份打印到12月
console.log(prMonthCalendar(2018, i));//调用打印日历的函数,指定年份2018
}