JS簡易日曆實現
阿新 • • 發佈：2018-12-31
效果圖
實現點
01.表格行數問題
首先得知道這個表格有多少行多少列，列數是已經確定的，從星期天（日曆上第1列是星期天）到星期六一共7列
getDay()方法了，該方法返回陣列[0-6]中的一個數字，0代表星期天，1代表星期一，2代表星期二，以此類推。
並不是每個月都是31天，所以我們得建立一個包含12個月份的陣列，每個元素代表每個月份所包含的天數。但是2月份比較特殊，閏年的2月份有29天，平年的2月份只有28天
firstday = new Date(y, m, 1), //獲取當月的第一天
02列印日曆表格
表格本身是一個二維陣列，所以讓for大師出來跑兩個迴圈
html
<!DOCTYPE html>
<html>
<head>
<title>js實現簡易日曆</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/calendar.css">
<script src="js/lib.js"></script>
<script src="js/main.js"></script css部分
@charset='utf-8';
* js部分
/*
日曆事件，可發揮
*/
function bindEvent(){
var prevMonth = document.getElementById("prevMonth");
var toPrevMonth = function(){
var date = dateObj.getDate();
dateObj.setDate(new Date(date.getFullYear(), date.getMonth() - 1, 1));
showCalendarData();
};
addEvent(prevMonth, 'click', toPrevMonth);
var toNextMonth = function(){
var date = dateObj.getDate();
dateObj.setDate(new Date(date.getFullYear(), date.getMonth() + 1, 1));
showCalendarData();
}
var nextMonth = document.getElementById("nextMonth");
addEvent(nextMonth, 'click', toNextMonth);
}
// getElementById()
// getElementsByTagName()
function showCalendarData(){
var odate = dateObj.getDate();
var titlestr = getDateStr(odate,'title');
console.log(titlestr);
var calendarTitle = document.getElementById('calendarTitle');
calendarTitle.innerText = titlestr;
// con
var calendarTable = document.getElementById('calendarTable');
var tds = calendarTable.getElementsByTagName('td');
var _firstDay = new Date(odate.getFullYear(), odate.getMonth(), 1); // 當前月第一天
for(var i = 0,len= tds.length; i<len;i++) {
var _thisDay = new Date(odate.getFullYear(),
odate.getMonth(),
i + 1 - _firstDay.getDay());
var _thisDayStr = getDateStr(_thisDay,'YYYYMMDD');
var item = tds[i];
item.innerText = _thisDay.getDate();
item.setAttribute('data', _thisDayStr);
// 當前天
if(_thisDayStr == getDateStr(odate,'YYYYMMDD')) {
item.className ='cur-day';
}else if(_thisDayStr.substr(0, 6)
== getDateStr(_firstDay,'YYYYMMDD').substr(0, 6)) {
item.className ='cur-mounth';
}else{
item.className ='other-mounth';
}
}
// console.log(_thisDayStr.substr(0,6));
}
// renderHtml()
function renderHtml(){
var calendar = document.getElementById('calendar');
var calendar_top = document.createElement('div');
var calendar_con = document.createElement('div');
calendar_top.className='calendar-title-box';
calendar_top.innerHTML='<span class="prev-month" id="prevMonth"></span>'
+'<span class="calendar-title" id="calendarTitle"></span>'
+'<span class="next-month" id="nextMonth"></span>';
// 表格區
calendar_con.className='calendar-body-box';
var _th ='<tr>'
+'<th>日</th>'
+'<th>一</th>'
+'<th>二</th>'
+'<th>三</th>'
+'<th>四</th>'
+'<th>五</th>'
+'<th>六</th>'
+'</tr>';
var _tbody ='';
for(var i=0;i<6;i++){
_tbody+='<tr>'
+'<td></td>'
+'<td></td>'
+'<td></td>'
+'<td></td>'
+'<td></td>'
+'<td></td>'
+'<td></td>'
+'</tr>';
};
calendar_con.innerHTML='<table class="calendar-table" id="calendarTable">'
+_th+_tbody+'</table>';
calendar.appendChild(calendar_top);
calendar.appendChild(calendar_con);
}