作者：云程笔记 前端程序员 一个爱搞前端的程序员
广东广州 阴 2022年5月16日
目录
效果
前言
√代码实现
页面代码
JS代码
√代码解读
Calendar常量
Calendar库
Calendar配置
√知识衔接
日历规则
innerHTML属性
总结
效果
前言
一个简单的日历应用和Calendar函数库
√代码实现
页面代码
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>日历小应用</title>
<style type="text/css">
select {height:30px;font-size:20px;border-radius:5px}
td {width:30px;height:30px;text-align:center}
</style>
<script type="text/javascript" src="js/calendar.js"></script>
<script type="text/javascript">
window.onload = function() {
var today = new Date();
var todayDateInfo = FE.Calendar(
today.getFullYear(),
today.getMonth()+1,
today.getDate()
);
var calendar = document.getElementById("calendar");
var yearEl = document.getElementById("year");
var monthEl = document.getElementById("month");
yearEl.options[today.getFullYear()-2022].selected = "selected";
monthEl.options[today.getMonth()].selected = "selected";
calendarInitView(today.getFullYear(),today.getMonth()+1);
yearEl.onchange = function() {
var year = yearEl.selectedIndex+2022;
var month = monthEl.selectedIndex+1;
calendarInitView(year,month);
}
monthEl.onchange = function() {
var year = yearEl.selectedIndex+2022;
var month = monthEl.selectedIndex+1;
calendarInitView(year,month);
}
function calendarInitView(year,month) {
calendar.innerHTML = "";
var days = FE.Calendar.getDaysOfMonth(year,month);
var firstdayOfMonth = FE.Calendar(
year,month,1
);
var i = 0,j=firstdayOfMonth.day,date = 1;
var tempTr = null;
var tempTd = null;
do {
tempTd = document.createElement("td");
if(i%7==0) {
tempTr = document.createElement("tr");
calendar.appendChild(tempTr);
}
if(i>=j&&date<=days) {
tempTd.innerHTML = date;
date++;
}
i++;
tempTr.appendChild(tempTd);
}while(i<42);
}
}
</script>
</head>
<body>
<div style="width:200px;height:300px;border:1px solid red">
<div style="border-bottom:1px solid orange">
<select id="year">
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
</select>
<span>年</span>
<select id="month">
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<span>月</span>
</div>
<table>
<thead>
<tr>
<th>日</th>
<th>一</th>
<th>二</th>
<th>三</th>
<th>四</th>
<th>五</th>
<th>六</th>
</tr>
</thead>
<tbody id="calendar"></tbody>
</table>
</div>
</body>
</html>JS代码
js/calendar.js
(function() {
var FE = {};
FE.Constants = {
dateInfo:{
day19700101:5,
days:[31,28,31,30,31,30,31,31,30,31,30,31]
}
}
FE.Calendar = function(year,month,date) {
var startdayOfYear = year;
var startdayOfMonth = 1;
var startdayOfDate = 1;
if(FE.Calendar.config.startday) {
var temp = FE.Calendar.config.startday.split("[-]");
startdayOfYear = temp[0];
startdayOfMonth = temp[1];
startdayOfDate = temp[2];
}
return getDateInfoAfterAnotherDate.call({
"year":year,
"month":month,
"date":date
},
startdayOfYear,startdayOfMonth,startdayOfDate);
}
FE.Calendar.isRun = function(year) {
if((year%4==0&&year%100!=0)||year%400==0) {
return true;
}else {
return false;
}
}
FE.Calendar.getDaysOfMonthAfterFirstDayOfYear = function(year,month) {
var days = 0;
while(month>0) {
days+=FE.Constants.dateInfo.days[month-1];
if(FE.Calendar.isRun(year)&&month==2) {
days++;
}
month--;
}
return days;
}
FE.Calendar.getDaysOfMonth = function(year,month) {
if(FE.Calendar.isRun(year)&&month==2) {
return FE.Constants.dateInfo.days[month-1]+1;
}else {
return FE.Constants.dateInfo.days[month-1];
}
}
function getFirstDayInfoOfYear(year) {
var days = 0;
while(year>1970) {
if(FE.Calendar.isRun(year)) {
days+=366;
}else {
days+=365;
}
year--;
}
var day = (FE.Constants.dateInfo.day19700101+days)%7;
return {"days":days,"day":day};
}
function getDateInfo(year,month,date) {
var dateInfoOfYearFirstDay = getFirstDayInfoOfYear(year-1);
var days = FE.Calendar.getDaysOfMonthAfterFirstDayOfYear(year,month-1)+date;
days-=1;
var day = (dateInfoOfYearFirstDay.day+days)%7;
return {"days":dateInfoOfYearFirstDay.days+days,"day":day};
}
function getDateInfoAfterAnotherDate(year,month,date) {
var dateInfoOfAnotherDate = getDateInfo(year,month,date);
var dateInfoOfThis = getDateInfo(this.year,this.month,this.date);
var days = dateInfoOfThis.days - dateInfoOfAnotherDate.days;
var weekDays = dateInfoOfAnotherDate.day+days;
var week = weekDays%7==0?weekDays/7:(weekDays-weekDays%7)/7+1;
var day = dateInfoOfThis.day;
return {"days":days,"week":week,"day":day};
}
FE.Calendar.config = {};
window.FE = FE;
})();√代码解读
Calendar常量
Ⅰ：day19700101
该常量是1970年1月1日的星期数
Ⅱ：days
该常量是平年各月份的天数
FE.Constants = {
dateInfo:{
day19700101:5,
days:[31,28,31,30,31,30,31,31,30,31,30,31]
}
}Calendar库
Ⅰ：isRun函数
该函数是用于判断某年是否为闰年的静态方法
/*判断某年份是否为闰年*/
FE.Calendar.isRun = function(year) {
if((year%4==0&&year%100!=0)||year%400==0) {
return true;
}else {
return false;
}
}Ⅱ：getDaysOfMonth函数
该函数是用于计算某月的天数的静态函数
/*计算某月天数*/
FE.Calendar.getDaysOfMonth = function(year,month) {
if(FE.Calendar.isRun(year)&&month==2) {
return FE.Constants.dateInfo.days[month-1]+1;
}else {
return FE.Constants.dateInfo.days[month-1];
}
}Ⅲ：getDaysOfMonthAfterFirstDayOfYear函数
该函数是用于计算某月最后一天到该年第一天的天数的静态函数
/*计算某月最后一天到该年第一天的天数*/
FE.Calendar.getDaysOfMonthAfterFirstDayOfYear = function(year,month) {
var days = 0;
while(month>0) {
days+=FE.Constants.dateInfo.days[month-1];
if(FE.Calendar.isRun(year)&&month==2) {
days++;
}
month--;
}
return days;
}Ⅳ：Calendar构造器
该函数适用于构造指定日期信息的构造函数
/*构造指定日期信息*/
FE.Calendar = function(year,month,date) {
var startdayOfYear = year;
var startdayOfMonth = 1;
var startdayOfDate = 1;
if(FE.Calendar.config.startday) {
var temp = FE.Calendar.config.startday.split("[-]");
startdayOfYear = temp[0];
startdayOfMonth = temp[1];
startdayOfDate = temp[2];
}
return getDateInfoAfterAnotherDate.call({
"year":year,
"month":month,
"date":date
},
startdayOfYear,startdayOfMonth,startdayOfDate);
}Ⅴ：内部函数getFirstDayInfoOfYear
该函数是用于获取某年第一天的基本信息的内部函数
/*获取某年第一天的基本信息*/
function getFirstDayInfoOfYear(year) {
var days = 0;
while(year>1970) {
if(FE.Calendar.isRun(year)) {
days+=366;
}else {
days+=365;
}
year--;
}
var day = (FE.Constants.dateInfo.day19700101+days)%7;
return {"days":days,"day":day};
}Ⅵ：内部函数getDateInfo
该函数是用于获取某日期的基本信息的内部函数
/*获取某日期的基本信息*/
function getDateInfo(year,month,date) {
var dateInfoOfYearFirstDay = getFirstDayInfoOfYear(year-1);
var days = FE.Calendar.getDaysOfMonthAfterFirstDayOfYear(year,month-1)+date;
days-=1;
var day = (dateInfoOfYearFirstDay.day+days)%7;
return {"days":dateInfoOfYearFirstDay.days+days,"day":day};
}Ⅶ：内部函数getDateInfoAfterAnotherDate
该函数是用于获取某日期相对于另一日期的基本信息的内部函数
/*获取某日期相对于另一日期的基本信息*/
function getDateInfoAfterAnotherDate(year,month,date) {
var dateInfoOfAnotherDate = getDateInfo(year,month,date);
var dateInfoOfThis = getDateInfo(this.year,this.month,this.date);
var days = dateInfoOfThis.days - dateInfoOfAnotherDate.days;
var weekDays = dateInfoOfAnotherDate.day+days;
var week = weekDays%7==0?weekDays/7:(weekDays-weekDays%7)/7+1;
var day = dateInfoOfThis.day;
return {"days":days,"week":week,"day":day};
}Calendar配置
Ⅰ：startday配置
该配置指定一个开始日期，用于计算指定日期距离该日期的天数、指定日期的周数、以及指定日期的星期数
√知识衔接
日历规则
日历是一个计日规则，它是根据地球的公转周期而确定的，是亘古不变的规则。
innerHTML属性
使用Dom编程时，如需修改某页面中某个元素的内容，可以使用innerHTML属性获取和修改
总结
这是一个简单的案例，使用了select和table标签。
------------END------------
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
