javascript中Date對象應用之簡易日歷實現(xiàn)
更新時間：2016年07月12日 09:13:12 作者：小火柴的藍色理想
這篇文章主要為大家詳細介紹了javascript中Date對象應用之簡易日歷實現(xiàn)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
前面的話
簡易日歷作為javascript中Date對象的常見應用，用途較廣泛，本文將詳細說明簡易日歷的實現(xiàn)思路。
效果演示
HTML說明
使用type=number的兩個input分別作為年和月的輸入控件，這樣在高級瀏覽器下自帶調(diào)節(jié)按鈕
按照周日到周一的順序進行星期的排列
<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說明
對于簡易日歷的實現(xiàn)，首先確定日歷中class="day"的div的排列方式為浮動。這樣可以通過改變第一天div的位置，來實現(xiàn)所有同級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個實現(xiàn)：
【1】需要獲取當月的天數(shù)，獲取當月第一天、第30天、第31天是周幾
【2】根據(jù)當月第一天的星期，改變第一天的margin-left值，移動第一天到對應的位置；由于浮動的關系，其余天也會跟著移動到對應的位置
【3】根據(jù)當月的天數(shù)，隱藏多余的天；當然，隱藏之前要先顯示在其他月份可能被隱藏的天
【4】如果當月30日是周日，則會新占一行。這時通過改變30日這天的margin值將其移動到第一行(若31日可能會新占一行，也做相似處理)
【5】載入頁面后，獲取當前的年和月，顯示當月日歷；當改變年或月時，獲取改變后的值，更新日歷
//準備:獲取當前樣式
function getCSS(obj,style){
if(window.getComputedStyle){
return getComputedStyle(obj)[style];
}
return obj.currentStyle[style];
}
//實現(xiàn)一：獲取當月的天數(shù)，及當月第一天、第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;
}
//實現(xiàn)二：根據(jù)當月第一天的星期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';
}
//實現(xiàn)三：根據(jù)當月的天數(shù)，來隱藏多余的天數(shù)。當然首先要先顯示在其他月份被隱藏的天數(shù)
function hide_days(year,month){
//恢復其他月份可能隱藏的天數(shù)
for(var i = 28; i<31; i++){
dayBox.children[i].style.display = 'block';
}
//隱藏當月多余的天數(shù)
var days = get_data(year,month).days;
for(var i = days;i<31;i++){
dayBox.children[i].style.display = 'none';
}
};
//實現(xiàn)四：如果當月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';
}
}
//實現(xiàn)五：當載入頁面時，獲取當前年和月，顯示當月日歷；當改變年或月時，獲取改變后的年和月，更新當月日歷
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);
}
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
最近剛接觸了uni-app,用于開發(fā)微信小程序,設計到了微信授權(quán)登錄,下面這篇文章主要給大家介紹了關于uni-app中使用手機號一鍵登錄的相關資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2023-01-01
下面小編就為大家?guī)硪黄猨s不間斷滾動的簡單實現(xiàn)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
最近小編接到這樣的項目需求，接口返回的數(shù)據(jù)中時間單位為秒，但前端顯示的時候需要更人性化的帶有單位（天，小時，分鐘，秒）的字符串；下面小編給大家?guī)韺嵗a，感興趣的朋友跟隨小編一起看看吧2019-07-07
JavaScript高級程序設計 閱讀筆記（十四） js繼承機制的實現(xiàn)
繼承是面向?qū)ο笳Z言的必備特征，即一個類能夠重用另一個類的方法和屬性。在JavaScript中繼承方式的實現(xiàn)方式主要有以下五種：對象冒充、call()、apply()、原型鏈、混合方式2012-08-08
使用js的朋友對其中for in的并不陌生吧，下面用示例為大家介紹下其具體使用方法2013-12-12
這篇文章主要介紹了基于ajax實現(xiàn)文件上傳并顯示進度條,需要的朋友可以參考下2015-08-08
原生JS實現(xiàn)圖片無縫滾動方法(附帶封裝的運動框架)
下面小編就為大家?guī)硪黄鶭S實現(xiàn)圖片無縫滾動方法(附帶封裝的運動框架)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
JavaScript函數(shù)調(diào)用經(jīng)典實例代碼
JavaScript提供了4種函數(shù)調(diào)用,一般形式的函數(shù)調(diào)用、作為對象的方法調(diào)用、使用 call 和 apply 動態(tài)調(diào)用、使用 new 間接調(diào)用,下面這篇文章主要給大家介紹了關于JavaScript函數(shù)調(diào)用的相關資料,需要的朋友可以參考下2021-12-12
本文將使用canvas實現(xiàn)粒子時鐘效果，具有一定的參考價值，下面跟著小編一起來看下吧2017-02-02
5個可以幫你理解JavaScript核心閉包和作用域的小例子
這篇文章主要介紹了5個可以幫你理解JavaScript核心閉包和作用域的小例子,本文是翻譯自國外的一篇文章,短小精悍,需要的朋友可以參考下2014-10-10