A simple calendar for the application of date objects in JavaScript implements _javascript techniques

Front.

As a common application of the date object in JavaScript, the simple calendar is widely used, this article will explain the realization of the simple calendar in detail.

Effect Demo

HTML description
Use the two input of type=number as the input control for the year and month, so that you have the adjustment button in the Advanced browser
Arrange the week in order from Sunday to Monday

<div class= "box" >  

CSS Description
for an implementation of a simple calendar, first determine that the class= "Day" div in the calendar is arranged in a floating manner. This allows all sibling div to follow the moving effect by changing the position of the first day 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 ' Microsoft Ya-hei ';
 Text-align:center
}
. control{
 Overflow:hidden
}
. con-in{
 height:50px;
 Float:left;
 width:100px;
 Text-align:center;
 font:20px/50px "Microsoft Ya Hei";
}

JS Description
A total of 5 implementations of the JS logic for the simple calendar:
"1" need to obtain the number of days of the month, get the first day of the month, the 30th day, the 31st day is the week a few
"2" according to the first day of the month, Change the Margin-left value of the first day, move the first day to the corresponding position; because of the floating relationship, the rest of the day will also be moved to the corresponding position
"3" to hide the extra days according to the number of days of the month; Of course, before hiding, show the days that might be hidden in other months
"4" If the month 30th is Sunday, a new row will be taken. Then move it to the first line by changing the margin value for the 30th day (if the 31st may be a new row, do similar processing)
"5" After loading the page, get the current year and month, display the month calendar, when the change year or month, get the changed value, update calendar  

Prepare: Get current style function Getcss (obj,style) {if (window.getComputedStyle) {return getComputedStyle (obj) [style];
return Obj.currentstyle[style];
 //Implementation One: Gets the number of days of the month, and the first, 30th, and 31st days of the month is the day of the week function Get_data (year,month) {var result = {};
 var d = new Date (); If it is February if (month = 2) {//If it is a leap year if (year% 4 = 0 && Year%!== 0) | |-year% = = 0) {result.days = 29
 ;
 If it is excepting}else{result.days = 28; //If 4th, 6, 9, November}else if (month = 4 | | month = 6 | | Month = 9 | |
 Month = {result.days = 30;
 }else{result.days = 31;
 The 31st day of the month is the week Result.day31week = D.getday (D.setfullyear (year,month-1,31));
 The first day of the month is the week Result.day1week = D.getday (D.setfullyear (year,month-1,1)); 
 if (month!= 2) {//The 30th day of the month is the week Result.day30week = D.getday (D.setfullyear (year,month-1,30));
return result; //Realize two: Based on the first day of the month X, set the margin-left= width of the first day *x to correspond to the correct week position function Move_day1 (year,month) {var week1 = Get_data (year)
 month). Day1week; Day1.style.marginLeft = Week1%7*parseint (Getcss (day1, ' WIDTH ') + ' px '; I//Implementation three: Hides the extra number of days based on the number of days of the month. Of course, first show the number of days hidden in other months function hide_days (year,month) {//restore the number of days that other months may be hidden for (var i = i<31; i++) {DAYBOX.CHILDREN[I].S
 Tyle.display = ' block ';
 }//Hide extra days of the month var day = Get_data (year,month).
 for (var i = days;i<31;i++) {daybox.children[i].style.display = ' none ';

}
}; Implementation of four: if the month 30th or 31st is Sunday, will be a new row, by setting margin-top the new line of the day to move to the first line function move_day30 (year,month) {//If the month 30th is Sunday 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 '; //If the month 31st is Sunday if (Get_data (year,month). Day31week = = 0) {Day31.style.marginTop = parseint (Getcss (day31, ' height ')) * (-
 5) + ' px ';
 }else{Day31.style.marginTop = ' 0 '; }//Implementation five: When the page is loaded, get the month before and the month, display the calendar of the year, and when the changes are years or months, get the changed year and month, update the month calendar 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 | | >2100) {year = Conyear.value=new Date (). getFullYear ();
 } if (Month<1 | | month >) {month = Conmonth.value=new Date (). getmonth () + 1;
 } move_day1 (Year,month);
 Hide_days (Year,month);
Move_day30 (Year,month);
 }

SOURCE Demo

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.