原生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