###面向對象的方法實現萬年歷
實現思路：
1.創建構造函數constructor
```
function Calender(main){
this.currentDate = new Date()
this.main = main;
}
```
2.創建日歷對象的prototype方法
```
Calender.prototype = {
constructor: Calender,
//創建主體內容區域
showMain:function(){},
//創建標題頭區域
showHeader: function(){},
//創建week標題頭
showWeek: function(){},
//創建容納日期的容器
showDate:function(){},
//封裝一個方法，待點擊切換月份時，初始化頁面
showInit: function(){}
};//對象結束
```
3.實現思路：
``` ==> 創建日歷對象的主體內容
showMain:function(){
var $t = this;//將this對象緩存到$t中,this指向Calender對象
$t.main = document.createElement("main")
document.body.appendChild($t.main);
$t.main.style.width = "600px";
$t.main.style.height = "600px";
$t.main.style.backgroundColor = "gray";
$t.main.style.margin = "50px auto";
$t.main.style.borderRadius = '15px'
}
```
``` ==> 創建標題頭區域（包含切換按鈕/年月）
showHeader: function(){
var $t = this;
//左控制鍵
var prevSpan = document.createElement('span')
$t.main.appendChild(prevSpan)
prevSpan.innerHTML = '<'
//存放年月信息
var span = document.createElement('span')
$t.main.appendChild(span)
//右控制鍵
var nextSpan = document.createElement('span')
$t.main.appendChild(nextSpan)
nextSpan.innerHTML = '>'
var allSpan = document.querySelectorAll('span')
var month = $t.currentDate.getMonth() + 1
var year = $t.currentDate.getFullYear()
//設置左邊年月信息
span.innerHTML = year + '年' + month + '月'
for(var i = 0; i < allSpan.length; i++) {
var span = allSpan[i]
//設置span的css樣式
span.style.display = 'inline-block'
span.style.width = '33.3%';
span.style.height = '100px'
span.style.color = 'white'
span.style.fontSize = '30px'
span.style.textAlign = 'center'
span.style.lineHeight = '100px'
span.id = 'index' + i
//為左右按鍵添加事件
if(i==0 || i==2) {
span.onclick = function() {
month = $t.currentDate.getMonth()
year = $t.currentDate.getFullYear()
if(this.id == 'index0') {
month--
} else if(this.id == "index2") {
month++
}
//點擊完重新設置當前月
$t.currentDate.setMonth(month)
//清空頁面
document.body.innerHTML = ''
//重新布局
$t.showInit()
}
}
};
}
```
``` ==> 創建week標題頭
showWeek: function(){
var $t = this;
//創建table標簽
var table = document.createElement('table')
$t.main.appendChild(table)
table.style.width = '100%'
//往表格里邊添加一行
var tr = table.insertRow()
var weeks = ['日','一', '二', '三', '四', '五', '六' ]
for(var i = 0; i < weeks.length; i++) {
//往tr插入列
var td = tr.insertCell()
td.style.height = '50px'
td.style.backgroundColor = 'goldenrod'
td.style.textAlign = 'center'
td.innerHTML = weeks[i]
}
},
```
```==> 創建容納日期的容器
showDate:function(){
var $t = this;
var table = document.createElement('table')
$t.main.appendChild(table)
table.style.width = '100%'
//創建一個名言標簽
var p = document.createElement("p")
$t.main.appendChild(p)
p.innerHTML = "每一天都是新的自己，怎么活，自己決定！"
p.style.fontSize = "24px";
p.style.width = "100%";
p.style.height = "60px";
p.style.lineHeight = "30px"
p.style.textAlign = "center"
p.style.color = "white"
//創建日期容器
for(var i = 0; i < 6; i++) {
//創建6行
var tr = table.insertRow()
for(var k = 0; k < 7; k++) {
//每一行7格
var td = tr.insertCell()
td.style.height = '60px'
td.style.backgroundColor = 'orange'
td.style.textAlign = 'center'
td.style.fontSize = "20px"
var dayIndex = i * 7 + k
//計算每一個格所對應的日期對象
var eachDate = getEveryDate(dayIndex)
//得到每一個日期的號數
td.innerHTML = eachDate.getDate()
//獲取當天日期的值,突出顯示當天日期
var now = new Date()
var currentDay = now.getDate()
//console.log(currentDay)
if(eachDate.getMonth() == now.getMonth() && eachDate.getDate() ===currentDay)
td.style.backgroundColor = "aquamarine"
//判斷當前月和推算出來的日期的月份是否一樣，不一樣則代表不是當前月的日期，則把日期灰色顯示
if(eachDate.getMonth() != $t.currentDate.getMonth()) {
td.style.backgroundColor = 'lightgray'
td.style.color = 'gray'
}
}
}
},
```
``` ==> 封裝一個方法，待點擊切換月份時，初始化頁面
//封裝一個方法，待點擊切換月份時，初始化頁面
showInit: function(){
var $t = this;
$t.showMain()
$t.showHeader()
$t.showWeek()
$t.showDate()
}
```
``` ==> 對象實例化和初始化頁面
//實例化一個Calender對象
var calender = new Calender()
calender.showInit()//初始化頁面
```
源代碼地址：github地址==》https://github.com/Hasyou99/Calender