javascript-Simple Calendar Implementation and Date object syntax Introduction (drawings) _javascript tips

Knowledge Points:

is primarily used for date objects. (The following information is from the network)

to create the syntax for a Date object:
var mydate=new Date ()
The Date object automatically saves the current date and time as its initial value.
The following 5 kinds of parameter form are:
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 to create and the difference between GMT time January 1, 1970.

the meaning of the parameterAs follows:

Month: Month name in English, from January to December

MTH: Month by integer, from (January) to 11 (December)

DD: Represents the day ordinal of one months, from 1 to 31

YYYY: four-digit year

HH: Hours, from 0 (midnight) to 23 (11 o'clock in the evening)

MM: Number of minutes, integers from 0 to 59

SS: Number of seconds, integers from 0 to 59

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

method of Date object:

GetDate () returns one day of one months (1 ~ 31) from the Date object.
Getday () returns one day of the week from the Date object (0 ~ 6).
GetMonth () returns the month (0 ~ 11) from the Date object.
getFullYear () returns the year with a four-digit number from the Date object.
GetYear () Please use the getFullYear () method instead.
GetHours () returns the hour of the date object (0 ~ 23).
Getminutes () returns the minute (0 ~ 59) of the Date object.
Getseconds () returns the number of seconds (0 ~ 59) of the Date object.
Getmilliseconds () returns the milliseconds (0 ~ 999) of the Date object.
GetTime () returns the number of milliseconds since January 1, 1970.
getTimezoneOffset () returns the minute difference between local time and Greenwich Mean Time (GMT).
getUTCDate () Returns the day of the month from the Date object (1 ~ 31) according to the world.
getUTCDay () Returns the day of the week (0 ~ 6) from the Date object according to the world.
getUTCMonth () returns the month (0 ~ 11) from the Date object according to the world.
getUTCFullYear () returns a four-digit year from the Date object based on the world.
getUTCHours () returns the hour (0 ~ 23) of the date object according to the universal.
getUTCMinutes () returns the minute (0 ~ 59) of the date object according to the universal.
getUTCSeconds () returns the second (0 ~ 59) of the date object according to the universal.
getUTCMilliseconds () returns the millisecond (0 ~ 999) of the date object according to the universal.
Parse () returns the number of milliseconds from midnight January 1, 1970 to the specified date (string).
Setdate () Sets the day of the month in the Date object (1 ~ 31).
Setmonth () sets the month (0 ~ 11) in the Date object.
setFullYear () sets the year (four digits) in the Date object.
Setyear () Please use the setFullYear () method instead.
Sethours () Sets the hour in the Date object (0 ~ 23).
Setminutes () Sets the minutes in the Date object (0 ~ 59).
Setseconds () Sets the seconds in the Date object (0 ~ 59).
Setmilliseconds () Sets the milliseconds in the Date object (0 ~ 999).
SetTime () Sets the Date object in milliseconds.
setUTCDate () Sets the day of the month in the Date object according to the world (1 ~ 31).
setUTCMonth () sets the month (0 ~ 11) in the date object according to the world.
setUTCFullYear () sets the year (four digits) in the Date object based on the world.
setUTCHours () sets the hour (0 ~ 23) in the date object according to the world.
setUTCMinutes () sets the minute (0 ~ 59) of the date object according to the world.
setUTCSeconds () sets the second (0 ~ 59) of the Date object according to the world.
setUTCMilliseconds () sets the millisecond (0 ~ 999) in the Date object according to the world.
Tosource () returns the source code for the object.
ToString () Converts the Date object to a string.
toTimeString () Converts the time portion of the Date object to a string.
toDateString () Converts the date part of a Date object to a string.
toGMTString () Please use the toutcstring () method instead. 1 3
toUTCString () Converts a Date object to a string based on the universal.
toLocaleString () Converts the Date object to a string based on the local time format.
toLocaleTimeString () Converts the time portion of a Date object to a string, based on the local time format.
toLocaleDateString () Converts the date part of a Date object to a string, based on the local time format.
UTC () returns the number of milliseconds from January 1, 1997 to a specified date based on the universal.
ValueOf () returns the original value of the Date object.
var objdate=new Date ([arguments list]);

Simple Calendar implementation:

Effect:

Code:

Copy Code code as follows:

<style>
#calendar {
font-size:12px;
}
#calendar tbody td{
Background: #033;
Color: #fff;
Text-align:center;
padding:2px;
}
. detail{
Text-align:center;
}
</style>
Test value: <input id= "Calendar_value" name= "" type= "text"/><br
<button id= "Cal_prev" > Last month </button>
<button id= "Cal_next" > next month </button>
<button id= "Cal_preyear" > Previous year </button>
<button id= "Cal_nextyear" > next year </button>
<button id= "Cal_today" > Today </button>
<div id= "Calendar" style= "Position:absolute;" ></div>

<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 ("div");
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<day.getday (); 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= "<font color= ' Red ' >" +i+ "</font>";
}
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 (2013,5, "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 commented, write a little anxious. Later, many features are not implemented.