python万年历面向对象化_原生JS面向对象方法实现万年历

###面向对象的方法实现万年历

实现思路：

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