js隨筆—日曆的簡單實現（無css）
阿新 • • 發佈：2018-12-05
有關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'><</span><em id='cal_top_date'></em><span style='float: right;' id='cal_top_next'>></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'><</span><em id='cal_top_date'></em><span style='float: right;' id='cal_top_next'>></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);
}
}