DIV CSS 佈局教程網

前面的話

簡易日歷作為javascript中Date對象的常見應用，用途較廣泛，本文將詳細說明簡易日歷的實現思路。

效果演示

HTML說明
 使用type=number的兩個input分別作為年和月的輸入控件，這樣在高級浏覽器下自帶調節按鈕
 按照周日到周一的順序進行星期的排列

<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說明
對於簡易日歷的實現，首先確定日歷中class="day"的div的排列方式為浮動。這樣可以通過改變第一天div的位置，來實現所有同級div都可以跟隨移動的效果 

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說明
簡易日歷的JS邏輯總共需要5個實現：
【1】需要獲取當月的天數，獲取當月第一天、第30天、第31天是周幾
【2】根據當月第一天的星期，改變第一天的margin-left值，移動第一天到對應的位置；由於浮動的關系，其余天也會跟著移動到對應的位置
【3】根據當月的天數，隱藏多余的天；當然，隱藏之前要先顯示在其他月份可能被隱藏的天
【4】如果當月30日是周日，則會新占一行。這時通過改變30日這天的margin值將其移動到第一行(若31日可能會新占一行，也做相似處理)
【5】載入頁面後，獲取當前的年和月，顯示當月日歷；當改變年或月時，獲取改變後的值，更新日歷 

//准備:獲取當前樣式
function getCSS(obj,style){
 if(window.getComputedStyle){
 return getComputedStyle(obj)[style];
 }
 return obj.currentStyle[style];
}

//實現一：獲取當月的天數，及當月第一天、第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;
 //當月第31天是星期幾
 result.day31week = d.getDay(d.setFullYear(year,month-1,31));
 }
 //當月第一天是星期幾
 result.day1week = d.getDay(d.setFullYear(year,month-1,1));
 if(month != 2){
 //當月第30天是星期幾
 result.day30week = d.getDay(d.setFullYear(year,month-1,30)); 
 }
 return result;
}

//實現二：根據當月第一天的星期x，設置第一天的margin-left=寬度*x，使其對應到正確的星期位置上
function move_day1(year,month){
 var week1 = get_data(year,month).day1week;
 day1.style.marginLeft = week1%7*parseInt(getCSS(day1,'width'))+ 'px';
}

//實現三：根據當月的天數，來隱藏多余的天數。當然首先要先顯示在其他月份被隱藏的天數
function hide_days(year,month){
 //恢復其他月份可能隱藏的天數
 for(var i = 28; i<31; i++){
 dayBox.children[i].style.display = 'block';
 } 
 //隱藏當月多余的天數
 var days = get_data(year,month).days;
 for(var i = days;i<31;i++){
 dayBox.children[i].style.display = 'none';
 }
};

//實現四：如果當月30日或31日是星期日，則會新占一行，通過設置margin-top把新占一行的天移動到第一行
function move_day30(year,month){
 //如果當月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';
 }
 //如果當月31日是星期日
 if(get_data(year,month).day31week === 0){
 day31.style.marginTop = parseInt(getCSS(day31,'height')) *(-5) + 'px';
 }else{
 day31.style.marginTop = '0';
 }
}

//實現五：當載入頁面時，獲取當前年和月，顯示當月日歷；當改變年或月時，獲取改變後的年和月，更新當月日歷
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);
}

源碼演示

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。