物件~時間篇_日曆的實現

eternalshallow發表於2017-12-14
物件

今天淺談一下用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>
複製程式碼

相關文章