Javascript-simple calendar implementation and Date object syntax introduction (with drawing) _ javascript tips-js tutorial

It is mainly used for Date objects. First, let's recall the parameters and methods of the Date object. The Code is as follows. If you are interested, refer Knowledge point:

It is mainly used for Date objects. (The following content is from the Network)

Syntax for creating a Date object:
Var myDate = new Date ()
The Date object automatically saves the current Date and time as its initial value.
The following five parameters are supported:
New Date ("month dd, yyyy hh: mm: ss ");
New Date ("month dd, yyyy ");
New Date (yyyy, mth, dd, hh, mm, ss );
New Date (yyyy, mth, dd );
New Date (MS );

Note: In the last form, the parameter represents the number of milliseconds that differ between the creation time and the GMT time of January 1, January 1, 1970.

Parameter descriptionAs follows:

Month: represents the name of a month in English, from January to December.

Mth: an integer representing the month, from (January 1, January) to 11 (January 1, December)

Dd: the day of a month, from 1 to 31.

Yyyy: The Year in four-digit format.

Hh: hours, from 0 (midnight) to 23)

Mm: The number of minutes, an integer from 0 to 59.

Ss: number of seconds, an integer from 0 to 59

Ms: Number of milliseconds, an integer greater than or equal to 0

Date object method:

GetDate () returns a day (1 ~ 31 ).
GetDay () returns a day of a week from the Date object (0 ~ 6 ).
GetMonth () returns the month from the Date object (0 ~ 11 ).
GetFullYear () returns the year from the Date object in four digits.
Use the getFullYear () method instead of getYear.
GetHours () returns the hour of the Date object (0 ~ 23 ).
GetMinutes () returns the minute of the Date object (0 ~ 59 ).
GetSeconds () returns the number of seconds of the Date object (0 ~ 59 ).
GetMilliseconds () returns the millisecond (0 ~) of the Date object ~ 999 ).
GetTime () returns the number of milliseconds since January 1, January 1, 1970.
GetTimezoneOffset () returns the minute difference between the local time and Greenwich Mean Time (GMT.
GetUTCDate () returns the Day (1 ~ 31 ).
GetUTCDay () returns the day of the week (0 ~ 6 ).
GetUTCMonth () returns the month (0 ~ 11 ).
GetUTCFullYear () returns the four-digit year from the Date object based on the universal time.
GetUTCHours () returns the hour of the Date object based on the Universal Time (0 ~ 23 ).
GetUTCMinutes () returns the minute of the Date object based on the Universal Time (0 ~ 59 ).
GetUTCSeconds () returns the second of the Date object based on the Universal Time (0 ~ 59 ).
GetUTCMilliseconds () returns the millisecond (0 ~ 999 ).
Parse () returns the number of milliseconds from midnight, January 1, January 1, 1970 to the specified date (string.
SetDate () sets a day of the month in the Date object (1 ~ 31 ).
SetMonth () sets the month (0 ~) in the Date object ~ 11 ).
SetFullYear () sets the year (four digits) in the Date object ).
Use the setFullYear () method instead of setYear.
SetHours () sets the hour (0 ~) in the Date object ~ 23 ).
SetMinutes () sets the minute (0 ~ 59 ).
SetSeconds () sets the second (0 ~) in the Date object ~ 59 ).
SetMilliseconds () sets the millisecond (0 ~) in the Date object ~ 999 ).
SetTime () sets the Date object in milliseconds.
SetUTCDate () sets the day of the month in the Date object based on the Universal Time (1 ~ 31 ).
SetUTCMonth () sets the month (0 ~ 11 ).
SetUTCFullYear () sets the year (four digits) in the Date object based on the universal time ).
SetUTCHours () sets the hour (0 ~ 23 ).
SetUTCMinutes () sets the minute (0 ~ 59 ).
SetUTCSeconds () sets the second (0 ~) in the Date object based on the universal time ~ 59 ).
SetUTCMilliseconds () sets the millisecond (0 ~ 999 ).
ToSource () returns the source code of the object.
ToString () converts a Date object to a string.
ToTimeString () converts the time part of the Date object to a string.
ToDateString () converts the Date part of the Date object to a string.
Use the toUTCString () method instead of toGMTString. 1 3
ToUTCString () converts a Date object to a string based on the universal time.
ToLocaleString () converts a Date object to a string based on the local time format.
ToLocaleTimeString () converts the time part of the Date object to a string based on the local time format.
ToLocaleDateString () converts the Date part of the Date object to a string based on the local time format.
UTC () returns the number of milliseconds from January 1, January 1, 1997 to the specified date based on the universal time.
ValueOf () returns the original value of the Date object.
Var objDate = new Date ([arguments list]);

Simple calendar implementation:

Effect:

Code:

The Code is as follows:

Test value:

Last month
Next month
Last year
Next year
Today

Script

Var Calendar = function (year, monthNum, parent ){
This. year = year;
This. parent = parent;
This. monthNum = monthNum-1;
Function isLeapYear (y ){
Return (y> 0 )&&! (Y % 4) & (y % 100) |! (Y % 400 ));
}
This. numDays = [31, isLeapYear (this. year )? 29:28, 31,30, 31,30, 31,31, 30,31, 30,31] [this. monthNum];
This. weekDays = ["day", "one", "two", "three", "four", "five", "Six"];
This. nowDate = new Date;
This. init ();
}

Calendar. prototype = {
SetMonthNum: function (monthNum ){
This. monthNum = monthNum-1;
},
GetMonthNum: function (){
Return this. monthNum + 1;
},
SetYearNum: function (year ){
This. year = year;
},
GetYearNum: function (){
Return this. year;
},
Init: function (){
This. setup (this. parent );
},
Reflesh: function (){
This. setup (this. parent );
},
Setup: function (id ){
Var date = this. nowDate;
Var cal = document. getElementById (id );
Cal. innerHTML = "";
Var calDiv = document. createElement ("p ");
Var tab = document. createElement ("table ");
Cal. appendChild (calDiv );
CalDiv. innerHTML = this. getSummary ();
Cal. appendChild (tab );
CalDiv. className = "detail"
This. thead = document. createElement ("thead ");
This. tbody = document. createElement ("tbody ");
This. tfoot = document. createElement ("tfoot ");
This. tr = document. createElement ("tr ");
This. td = document. createElement ("td ");

Tab. appendChild (this. thead );
Tab. appendChild (this. tbody );
This. setThead ();
This. create ();

},
SetThead: function (){
Var day = this. weekDays;
Var tr = this. tr. cloneNode (true );
This. thead. appendChild (tr );
For (var I = 0; I <7; I ++ ){
Var td = this. td. cloneNode (true );
Tr. appendChild (td );
Td. innerHTML = day [I];
}
},
Create: function (){
Var day = new Date (this. year, this. monthNum, 1 );
Var tr = this. tr. cloneNode (true );
Var dayCount = this. numDays;
Var that = this;

That. tbody. appendChild (tr );
For (var j = 0; j Var td = that. td. cloneNode (true );
Tr. appendChild (td );
Td. innerHTML = "";
}
For (var I = 1; I <= dayCount; I ++ ){
If (j + I) % 7-1 = 0 ){
Tr = that. tr. cloneNode (true );
That. tbody. appendChild (tr );
}
Var td = that. td. cloneNode (true );
Var s = I;
If (I = that. nowDate. getDate ()){
S = "" + I + "";
}
Td. innerHTML = s;
Td. style. cursor = "pointer ";
Td. onclick = function (){
Document. getElementById ("calendar_value"). value = (that. getYearNum () + "/" + that. getMonthNum () + "/" + this. innerHTML)
}
Td. onmouseover = function (){
This. style. background = "# fff ";
This. style. color = "#033"
}
Td. onmouseout = function (){
This. style. background = "";
This. style. color = "# fff"
}
Tr. appendChild (td );
}
},
GetSummary: function (){
Var date = this. nowDate;
Return this. year + "year" + (this. monthNum + 1) + "month" + date. getDate () + "day ";
}
}
Var cal = new Calendar (maid, "calendar ");
Cal. init ();

Document. getElementById ("cal_prev"). onclick = function (){
Cal. monthNum --;
If (cal. getMonthNum () <1 ){
Cal. setMonthNum (12 );
Cal. year --;
}
Cal. reflesh ();
}
Document. getElementById ("cal_next"). onclick = function (){
Cal. monthNum ++
If (cal. getMonthNum ()> 12 ){
Cal. setMonthNum (1 );
Cal. year ++;
}
Cal. reflesh ();
}
Document. getElementById ("cal_today"). onclick = function (){
Cal. setYearNum (new Date). getFullYear ());
Cal. setMonthNum (new Date). getMonth () + 1)
Cal. reflesh ();
}
Document. getElementById ("cal_preyear"). onclick = function (){
Cal. setYearNum (cal. getYearNum ()-1 );
Cal. reflesh ();
}
Document. getElementById ("cal_nextyear"). onclick = function (){
Cal. setYearNum (cal. getYearNum () + 1 );
Cal. reflesh ();
}
Script

Summary:
The above code is not annotated, so it is a little urgent to write. I will try again later, but many functions are not implemented.