对象~时间篇_日历的实现

今天浅谈一下用Date()这个对象，实现日历的方法
首先我们应该了解一下关于Date()获取日期的方法

获取当前年月日时分秒的get方法和set方法，不详细介绍，说一下组合用法
获取上个月的最后一天

var date = new Date();
 date.setDate(0);

获取当前月的最后一天

var date = new Date();
date.setMouth(date.getMouth()+1);
 date.setDate(0);

还有关于显示时分秒，月份，日的格式

function toZero(n) {
    return n<10?'0'+n:''+n;
}

20160812.jpg

下边说一下布局的准备和样式：

<style>
    #date-box{
        background: rgba(0, 0, 0, 0.78);
        color: #fff;
        font-family: "Microsoft Yi Baiti";
        width: 500px;
        height: 240px;
    }
    #date-box>div{
        position: relative;
        top: 10px;
        height: 30px;
    }
    #date-box #prev,#next{
        cursor: pointer;
        font-size: 22px;
        margin: 0 30px;
        padding:0 5px;
    }  
  #prev{float: left; }  
  #next{float: right;}    
ul{ 
       list-style: none;
     padding: 0;
    }  
  #week-list:after,#date-list:after,#prev:after,#next:after{
        display: table-cell;content: '';clear: both;    } 
   #week-list li,#date-list li{ 
       width: 14.2857%; 
       text-align: center; 
       float: left
;        padding: 5px 0; 
   }</style>


<div id="date-box">
    <div id="content-time">
        <span id="time_Year"></span>
        <span id="time_hour"></span>
    </div>
    <div>
        <span id="prev"><</span>
        <span id="next">></span>
    </div>
    <ul id="week-list">
        <li>一</li>
        <li>二</li>
        <li>三</li>
        <li>四</li> 
       <li>五</li>
        <li>六</li>
        <li>日</li>
    </ul>
    <ul id="date-list">    </ul>
</div>

关于js实现部分，注释比较详细，就不解释了

<script>
        var date = new Date();
        showTime();
        setInterval(showTime,1000);
        showDate(date);
        function showDate(date) {
//            将时间设置为对象中月的第一天
            date.setDate(1);
//            获取对象月份的第一天的是周几
            var mouth = date.getMonth();
           var week = date.getDay();
            //将周日的标记0换成7
            week = week ==0?7:week;            date.setMonth(date.getMonth()+1);
//            设置为月份的最后一天
            date.setDate(0);
//            获取对象月份的最后一天 
           var maxDate = date.getDate();
//            重新设置为当前月的第一天
//            date.setDate(1); 
           var html = '';
//            对象月份中第一天是周几，就在相应的前边留空白
            for (var i = 1 ; i < week;i++){
                html += '<li></li>'; 
           }
//             开始对象月份的编写显示
            for (var j =1 ; j <=maxDate;j++){
                html+='<li>' + j + '</li>';            } 
           var date_list = document.getElementById('date-list');
          date_list.innerHTML = html;
            var year = date.getFullYear();                         document.getElementById('time_Year').innerHTML =  year + '年' + toZero(mouth+1) +'月';        }
        document.getElementById('prev').onclick = function () {
//            设置为上个月的最后一天
            date.setDate(0); 
           showDate(date);
        }; 
       document.getElementById('next').onclick = function () {               date.setDate(32);            showDate(date);        };
        function showTime() { 
           var date = new Date();
            var hour = date.getHours();
            var minus = date.getMinutes();
            var second = date.getSeconds();            document.getElementById('time_hour').innerHTML = toZero(hour) + ':' + toZero(minus) + ':'+toZero(second);
        }
        function toZero(n) {
            return n<10?'0'+n:''+n;
        }
    </script>