這篇文章主要為大家詳細(xì)介紹了javascript中Date對(duì)象應(yīng)用之簡(jiǎn)易日歷實(shí)現(xiàn)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

前面的話(huà)

簡(jiǎn)易日歷作為javascript中Date對(duì)象的常見(jiàn)應(yīng)用，用途較廣泛，本文將詳細(xì)說(shuō)明簡(jiǎn)易日歷的實(shí)現(xiàn)思路。

HTML說(shuō)明

使用type=number的兩個(gè)input分別作為年和月的輸入控件，這樣在高級(jí)瀏覽器下自帶調(diào)節(jié)按鈕

按照周日到周一的順序進(jìn)行星期的排列

<div class="box">

 <header class='control'>

 <input id="conYear" class="con-in" type="number" min="1900" max="2100" step="1"/>

 <input id="conMonth" class="con-in" type="number" min="1" max="12" step="1"/>

 </header>

 <div class="DateBox">

 <header class='week'>

 <div class="week-in">周日</div>

 <div class="week-in">周一</div>

 <div class="week-in">周二</div>

 <div class="week-in">周三</div>

 <div class="week-in">周四</div>

 <div class="week-in">周五</div>

 <div class="week-in">周六</div>

 </header>

 <section class="dayBox" id='dayBox'>

 <div class="day" id="day1">1</div>

 <div class="day">2</div>

 <div class="day">3</div>

 <div class="day">4</div>

 <div class="day">5</div>

 <div class="day">6</div>

 <div class="day">7</div>

 <div class="day">8</div>

 <div class="day">9</div>

 <div class="day">10</div>

 <div class="day">11</div>

 <div class="day">12</div>

 <div class="day">13</div>

 <div class="day">14</div>

 <div class="day">15</div>

 <div class="day">16</div>

 <div class="day">17</div>

 <div class="day">18</div>

 <div class="day">19</div>

 <div class="day">20</div>

 <div class="day">21</div>

 <div class="day">22</div>

 <div class="day">23</div>

 <div class="day">24</div>

 <div class="day">25</div>

 <div class="day">26</div>

 <div class="day">27</div>

 <div class="day">28</div>

 <div class="day">29</div>

 <div class="day" id="day30">30</div>

 <div class="day" id="day31">31</div>

 </section>

 </div> 

</div>

CSS說(shuō)明

對(duì)于簡(jiǎn)易日歷的實(shí)現(xiàn)，首先確定日歷中class="day"的div的排列方式為浮動(dòng)。這樣可以通過(guò)改變第一天div的位置，來(lái)實(shí)現(xiàn)所有同級(jí)div都可以跟隨移動(dòng)的效果 

body{

 margin: 0;

}

input{

 border: none;

 padding: 0;

}

.box{

 width: 354px;

 margin: 30px auto 0; 

}

.DateBox{

 height: 300px;

 border: 2px solid black;

} 

.week{

 overflow: hidden;

 border-bottom: 1px solid black;

 line-height: 49px;

}

.week-in{

 height: 49px;

 float: left;

 width: 50px;

 text-align: center;

}

.dayBox{

 overflow: hidden;

}

.day{

 float: left;

 height: 50px;

 width: 50px;

 font:20px/50px '微軟雅黑';

 text-align: center;

}

.control{

 overflow: hidden;

}

.con-in{

 height: 50px;

 float: left;

 width: 100px;

 text-align: center;

 font: 20px/50px "微軟雅黑";

}

JS說(shuō)明

簡(jiǎn)易日歷的JS邏輯總共需要5個(gè)實(shí)現(xiàn)：

【1】需要獲取當(dāng)月的天數(shù)，獲取當(dāng)月第一天、第30天、第31天是周幾

【2】根據(jù)當(dāng)月第一天的星期，改變第一天的margin-left值，移動(dòng)第一天到對(duì)應(yīng)的位置；由于浮動(dòng)的關(guān)系，其余天也會(huì)跟著移動(dòng)到對(duì)應(yīng)的位置

【3】根據(jù)當(dāng)月的天數(shù)，隱藏多余的天；當(dāng)然，隱藏之前要先顯示在其他月份可能被隱藏的天

【4】如果當(dāng)月30日是周日，則會(huì)新占一行。這時(shí)通過(guò)改變30日這天的margin值將其移動(dòng)到第一行(若31日可能會(huì)新占一行，也做相似處理)

【5】載入頁(yè)面后，獲取當(dāng)前的年和月，顯示當(dāng)月日歷；當(dāng)改變年或月時(shí)，獲取改變后的值，更新日歷 

//準(zhǔn)備:獲取當(dāng)前樣式

function getCSS(obj,style){

 if(window.getComputedStyle){

 return getComputedStyle(obj)[style];

 }

 return obj.currentStyle[style];

}

//實(shí)現(xiàn)一：獲取當(dāng)月的天數(shù)，及當(dāng)月第一天、第30日、第31日是星期幾

function get_data(year,month){

 var result = {};

 var d = new Date();

 //如果是2月

 if(month == 2){

 //如果是閏年

 if((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0){

 result.days = 29;

 //如果是平年

 }else{

 result.days = 28;

 }

 //如果是第4、6、9、11月

 }else if(month == 4 || month == 6 ||month == 9 ||month == 11){

 result.days = 30;

 }else{

 result.days = 31;

 //當(dāng)月第31天是星期幾

 result.day31week = d.getDay(d.setFullYear(year,month-1,31));

 }

 //當(dāng)月第一天是星期幾

 result.day1week = d.getDay(d.setFullYear(year,month-1,1));

 if(month != 2){

 //當(dāng)月第30天是星期幾

 result.day30week = d.getDay(d.setFullYear(year,month-1,30)); 

 }

 return result;

}

//實(shí)現(xiàn)二：根據(jù)當(dāng)月第一天的星期x，設(shè)置第一天的margin-left=寬度*x，使其對(duì)應(yīng)到正確的星期位置上

function move_day1(year,month){

 var week1 = get_data(year,month).day1week;

 day1.style.marginLeft = week1%7*parseInt(getCSS(day1,'width'))+ 'px';

}

//實(shí)現(xiàn)三：根據(jù)當(dāng)月的天數(shù)，來(lái)隱藏多余的天數(shù)。當(dāng)然首先要先顯示在其他月份被隱藏的天數(shù)

function hide_days(year,month){

 //恢復(fù)其他月份可能隱藏的天數(shù)

 for(var i = 28; i<31; i++){

 dayBox.children[i].style.display = 'block';

 } 

 //隱藏當(dāng)月多余的天數(shù)

 var days = get_data(year,month).days;

 for(var i = days;i<31;i++){

 dayBox.children[i].style.display = 'none';

 }

};

//實(shí)現(xiàn)四：如果當(dāng)月30日或31日是星期日，則會(huì)新占一行，通過(guò)設(shè)置margin-top把新占一行的天移動(dòng)到第一行

function move_day30(year,month){

 //如果當(dāng)月30日是星期日

 if(get_data(year,month).day30week === 0){

 day30.style.marginTop = parseInt(getCSS(day30,'height')) *(-5) + 'px';

 day31.style.marginTop = parseInt(getCSS(day31,'height')) *(-5) + 'px';

 day31.style.marginLeft= getCSS(day31,'width');

 return;

 }else{

 day30.style.marginTop = day31.style.marginTop = day31.style.marginLeft ='0';

 }

 //如果當(dāng)月31日是星期日

 if(get_data(year,month).day31week === 0){

 day31.style.marginTop = parseInt(getCSS(day31,'height')) *(-5) + 'px';

 }else{

 day31.style.marginTop = '0';

 }

}

//實(shí)現(xiàn)五：當(dāng)載入頁(yè)面時(shí)，獲取當(dāng)前年和月，顯示當(dāng)月日歷；當(dāng)改變年或月時(shí)，獲取改變后的年和月，更新當(dāng)月日歷

var year= conYear.value=new Date().getFullYear();

var month= conMonth.value = new Date().getMonth() + 1;

move_day1(year,month);

hide_days(year,month);

move_day30(year,month);

conYear.onchange = conMonth.onchange = function(){

 var year = conYear.value;

 var month = conMonth.value;

 if(year<1900 || year >2100 ){

 year = conYear.value=new Date().getFullYear();

 }

 if(month<1 || month > 12){

 month = conMonth.value=new Date().getMonth() + 1;

 }

 move_day1(year,month);

 hide_days(year,month);

 move_day30(year,month);

}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助