原生JS實現日曆封裝
1.結構部分:注意日曆結構至少是7行7列，我這裏用的是7行7列
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table>
<thead>
<tr>
<th colspan="2">
<span class="left">«</span>
</th>
<th colspan="3">
<span class="time"></span>
</th>
<th colspan="2"><span class="right">»</span>
</th>
</tr>
<tr>
<th>日</th>
<th>一</th>
<th>二</th>
<th>三</th>
<th>四</th>
<th>五</th>
<th>六</th>
</tr>
</thead>
<tbody class="main">
</tbody>
</table>
</body>
</html>
2.樣式部分
<style>
table{
width: 320px;
background: #333;
color: #fff
}
td,th{
text-align: center;
height: 30px;
}
</style>
3.功能部分
var oTime = document.querySelector(".time")//頭部年月標題顯示
var oMain = document.querySelector(".main")//主體日曆數字顯示
var leftBtn = document.querySelector(".left");//點擊左邊的按鈕，月份減少
var rightBtn = document.querySelector(".right");//點擊右邊的按鈕，月份增加
var time = new Date();//獲取當前系統時間
leftBtn.onclick = function() {
time.setMonth(time.getMonth() - 1);
getPrevDays(time);
getCurrentDays(time);
minHead(time);
mainList(time, getPrevDays(time), getCurrentDays(time));
}
rightBtn.onclick = function() {
time.setMonth(time.getMonth() + 1);
getPrevDays(time);
getCurrentDays(time);
minHead(time);
mainList(time, getPrevDays(time), getCurrentDays(time));
}
function minHead(time) {
oTime.innerText = time.getFullYear() + "年" + (time.getMonth() + 1) + "月"
}
function mainList(time, prevDays, currentDays) {
var beforeCount = prevDays.length + currentDays.length;
var cellList = document.querySelectorAll("td");
for(var i = 0; i < prevDays.length; i++) {//上一個月所佔格子
cellList[i].innerHTML = "<font color='red'>" + prevDays[i] + "</font>"
}
for(var i = 0; i < currentDays.length; i++) {//當前月所佔格子
if(currentDays[i] == time.getDate()) {//當天日期高亮顯示
cellList[i + prevDays.length].innerHTML = "<font color='blue'>" + currentDays[i] + "</font>";
} else {//當月日期白色突出
cellList[i + prevDays.length].innerHTML = "<font color='white'>" + currentDays[i] + "</font>";
}
}
for(var i = 1; i <= (42 - beforeCount); i++) {//下個月所佔格子
cellList[i + beforeCount - 1].innerHTML = "<font color='red'>" + i + "</font>"
}
}
function createCells() {
for(var i = 0; i < 6; i++) {//6行
var oTr = document.createElement("tr");
for(var j = 0; j < 7; j++) {//7列
var oTd = document.createElement("td");
oTr.appendChild(oTd);
}
oMain.appendChild(oTr);
}
}
function getPrevDays(time) { //獲得上一個在本月所佔的天數
var time = new Date(time);//拷貝一份時間，避免時間修改發生衝突
var list = [];//上一個月所佔的天數
time.setDate(1); //設置成當月1號，便於查看是星期幾；
var day = time.getDay() == 0 ? 7 : time.getDay();//如果是0，說明數字第一行需要空出來放上一個月的時間
//獲取上一個月的天數
time.setDate(0);//系統自動計算到上一個月的最後一天
var maxDay = time.getDate();//得到上一個月的最後一天時間
for(var i = maxDay; i > (maxDay - day); i--) {
//根據maxDay和day之間的關係，把上一個月的時間放到list中
list.push(i);
}
list.reverse();//日期升序排列
return list;
}
function getCurrentDays(time) { //獲取當前月的天數
var time = new Date(time);//拷貝時間，原因同上
time.setDate(1); //確保不會出現跨越現象 如果當前時間是1月31號就會出現跨越到三月份的事情
var list = [];
//下面代碼是爲了獲取上一個月的天數
time.setMonth(time.getMonth() + 1) //修改時間到下一個月
time.setDate(0); //修改時間日期是0
var maxDay = time.getDate();
//獲取到上一個月的日期並放到數組中
for(var i = 1; i <= maxDay; i++) {
list.push(i);
}
return list;
}
createCells();//創建6行7列表格
getPrevDays(time);//獲取上一個月在當前月所佔的格子數
getCurrentDays(time);//獲取當前月所佔的格子數
minHead(time);//顯示頭部標題
mainList(time, getPrevDays(time), getCurrentDays(time));//顯示主題日曆