Calendar: javascript calendar

Source: Internet
Author: User

Txer: javascript calendar


<HTML>
<Head>
<Title> txer: javascript calendar </title>
<! --
========================================================== ==========
=
= Author: tianxueer@gmail.com, 2007 =
=
========================================================== ==========
// -->
<Meta http-equiv = Content-Type content = "text/html; charset = gb2312">
<Style type = "text/CSS">
A: link {text-Decoration: none; color: Black}
A: hover {text-Decoration: underline; color: Red}
A: active {text-Decoration: none ;}
A: visited {text-Decoration: none; color: Black}

/* The first table (displays the year and month input boxes and the previous and next buttons )*/
Table. One
{
Border-collapse: Separate;
Border-Spacing: 1px 1px;
Font-family: verdana;
Color: # 9db34e; // The text color of table 1;
Text-align: center;
Font-size: 10pt;
Width: 176px;
Border: 1px solid # a6fe8a;
Cursor: default;
Text-align: center;
Background-color: # a6fe8a; // background color of table 1;
}

/* Second table (display day, and day ,....)*/
Table. Two
{
Border-collapse: Separate;
Border-Spacing: 1px 1px;
Font-family: verdana;
Color: # 9db34e; // The text color of table 1;
Text-align: center;
Font-size: 10pt;
Width: 176px;
Border: 1px solid # a6fe8a;
Cursor: default;
Text-align: center;
Background-color: # a6fe8a; // background color of table 2;
Color: #000000; // The text color of table 2;
Border-bottom: none;
}

/* Third (display date) Table */
Table. Three
{
Border-collapse: Separate;
Border-Spacing: 1px 1px;
Font-family: verdana;
Color: # 9db34e; // The text color of table 1;
Text-align: center;
Font-size: 10pt;
Width: 176px;
Border: 1px solid # a6fe8a;
Cursor: default;
Text-align: center;
Border-top: none;
Color: #000000; // The text color of table 3;
Font-size: 8pt;
Background-color: # ffffff; // background color of table 3;
Cursor: default;
}


/* Define the input style of the input year/month */
Input. shuru
{
Border: 0px;
Background-color: # a6fe8a;
Font-size: 10pt;
Text-align: center;
Font-family: verdana;
Color: # 9db34e;
}

/* Define the buttons of the previous year and next year */
Input. anniu
{
Border: 0px;
Background-color: # a6fe8a;
Font-size: 10pt;
Text-align: center;
Font-family: verdana;
Color: # 9db34e;

Width: 16px;
Font-size: 7pt;
Align: center;
Size: 6;
}

</Style>
</Head>
<Body>

<SCRIPT type = "text/JavaScript">

VaR out = "<Div id = 'did1' style =/" position: relative; Z-index: 0; visibility: Visible/"> ";
Out + = "<form> <Table class = 'one' id = 'one'> <tbody> ";
Out + = "<tr> ";
Out + = "<TD> <input type = 'button 'class = 'anniu' style =/" cursor: pointer/"onclick = 'change (1) 'title = 'previous year' onmouseover =/"this. style. color = 'black'/"onmouseout =/" this. style. color = ''/" onfocus =/"Blur ()/" value = '<'> </TD> ";
Out + = "<TD> <input type = 'button 'class = 'anniu' style =/" cursor: pointer/"onclick = 'change (2) 'title = 'last February 'onmouseover =/"this. style. color = 'black'/"onmouseout =/" this. style. color = ''/" onfocus =/"Blur ()/" value = '<'> </TD> ";
Out + = "<TD> <input class = 'shuru 'Type = 'text' id = 'Year' size = 3 onkeydown =/" If (event. keycode = 13) {set (); this. style. borderbottom = ''; blur () ;}/" onblur =/"set (); this. style. borderbottom = ''/" onfocus =/"this. style. borderbottom = '1px solid # ffd700 '/"> year </TD> ";
Out + = "<TD> <input class = 'shuru 'Type = 'text' id = 'month' size = 1 onkeydown =/" If (event. keycode = 13) {set (); this. style. borderbottom = ''; blur () ;}/" onblur =/"set (); this. style. borderbottom = ''/" onfocus =/"this. style. borderbottom = '1px solid # ffd700 '/"> month </TD> ";
Out + = "<TD> <input type = 'button 'class = 'anniu' style =/" cursor: pointer/"onclick = 'change (3) 'title = 'Next month 'onmouseover =/"this. style. color = 'black'/"onmouseout =/" this. style. color = ''/" onfocus =/"Blur ()/" value = '> </TD> ";
Out + = "<TD> <input type = 'button 'class = 'anniu' style =/" cursor: pointer/"onclick = 'change (4) 'title = 'Next year' onmouseover =/"this. style. color = 'black'/"onmouseout =/" this. style. color = ''/" onfocus =/"Blur ()/" value = '> </TD> ";
Out + = "</tr> </tbody> </table> <Table class = 'two' id = 'two'> <tbody> ";
Out + = "<TD style =/" color: # ff0000/"> day </TD> <TD> 1 </TD> <TD> 2 </TD> <TD> 3 </TD> <TD> 4 </ TD> <TD> 5 </TD> <TD style =/"color: # ff0000/"> 6 </TD>"; // specifies the background color of day and day;
Out + = "</tr> </tbody> </table> <Table class = 'three 'Id = 'three'> <tbody> ";
For (I = 0; I <6; I ++)
{
Out + = "<tr id = 't" + I + "'> <TD> & nbsp; </TD> <TD> & nbsp; </TD> <TD> & nbsp; </TD> <TD> & nbsp; </TD> </tr> "; // Add & nbsp; here because: if not, there is no firstchild of TD, document cannot be used later. getelementbyid (TR ). childnodes [J]. firstchild. nodevalue, which is a place in the Dom that is prone to mistakes.
}
Out + = "</tbody> </table> </form> ";
Out + = "</div> ";

Document. Write (out );

VaR year = Document. getelementbyid ('Year ');
VaR month = Document. getelementbyid ('month ');

VaR length;
VaR length_month;
// Form_data, form_year, form_month is used only for the first time to enter the page, followed by year. Value, month. value, where year is the text element year, month is the same
// Obtain the date of the current day
VaR form_date = new date ();
VaR form_month = form_date.getmonth () + 1;
VaR form_year = form_date.getfullyear ();
VaR form_today = form_date.getdate ();
VaR tmp_year; // set ();
VaR tmp_month;

// Enter the date of today in the year and month text
Year. value = form_year;
Month. value = form_month;

Tmp_year = form_year;
Tmp_month = form_month;


// When you click the last year or last month
Function Change (N)
{
Switch (N)
{
Case 1:
If (Year. value = 1)
Year. value = 9999;
Else
-- Year. value;
Break;

Case 2:
If (month. value = 1)
Month. value = 12;
Else
-- Month. value;
Break;
Case 3:
If (month. value = 12)
Month. value = 1;
Else
+ + Month. value;
Break;
Case 4:
If (Year. value = 9999)
Year. value = 1;
Else
+ + Year. value;
Break;
}
Set (); // change data and then display
}

Function show ()
{

// Get the number of days in the current month
VaR length_month = flength_month ();

// Obtain the day of the week on the first day of the current month.
VaR first = new date (year. Value, month. Value-1, 1 );
VaR first_day = first. getday ();

VaR date_num = 1;

For (I = 0; I <6; I ++)
{
For (j = 0; j <7; j ++)
{
Tr = 'T' + I;
If (I = 0) & (j <first_day) // blank before the first day
{
Document. getelementbyid (TR). childnodes [J]. firstchild. nodevalue = "";
Document. getelementbyid (TR). childnodes [J]. style. backgroundcolor = "# a6fe8a"; // the background color of the Region with no date is displayed;
Document. getelementbyid (TR). childnodes [J]. style. cursor = "";
}
Else if (date_num <= length_month) // Date
{

If (Year. value = form_year) & (month. value = form_month) & (date_num = form_today) // day
{
Document. getelementbyid (TR). childnodes [J]. style. backgroundcolor = "#8fe111"; // the background color of the day of the region is displayed on the date;
Document. getelementbyid (TR). childnodes [J]. style. color = "# ffffff"
Document. getelementbyid (TR). childnodes [J]. Title = "today ";
}
Else // other normal dates
{
Document. getelementbyid (TR). childnodes [J]. style. backgroundcolor = "# a6fe8a"; // The date display area contains the background color of the date;
Document. getelementbyid (TR). childnodes [J]. style. color = "#333333"
}


Document. getelementbyid (TR). childnodes [J]. style. cursor = "Pointer ";
Document. getelementbyid (TR). childnodes [J]. firstchild. nodevalue = date_num; // display date
Date_num ++;
}
Else
{
Document. getelementbyid (TR ). childnodes [J]. firstchild. nodevalue = ""; // The content after the date is blank. If there are 31 in the previous month, but this month does not, 31 will be cleared.
Document. getelementbyid (TR). childnodes [J]. style. backgroundcolor = "# a6fe8a"; // the background color of the Region with no date is displayed;
Document. getelementbyid (TR). childnodes [J]. style. cursor = "";
}
If (I = 5 & J = 6)
{
Document. getelementbyid (TR). childnodes [J]. firstchild. nodevalue = "T"; // click here and return to today
Document. getelementbyid (TR). childnodes [J]. style. cursor = "Pointer ";
Document. getelementbyid (TR). childnodes [J]. Title = "today is:" + form_year + "year" + form_month + "month" + form_today + "day ";
}

}
}

}

// When Manually changing the input text of the year and month, first determine whether or not it has changed (because it may have changed for half a day, and finally it has changed back to the original value)
Function set ()
{
If (Year. value> = 1 & year. value <= 9999 & month. value <= 12 & month. value> = 1) // If the input is correct
{
If (tmp_year! = Year. Value | tmp_month! = Month. Value) // If the year and month are changed, display it again.
{
Tmp_year = year. value;
Tmp_month = month. value;
}
Show ();
}
Else // If the input is incorrect, the previous value is returned.
{
Year. value = tmp_year;
Month. value = tmp_month;
}
}

// Add a mouse stroke for TD to change the color
For (I = 0; I <6; I ++)
{
T = 'T' + I;
N = Document. getelementbyid (t );
For (j = n. firstchild; J! = NULL; j = J. nextsibling)
{
J. onmouseover = function () {c = This. style. backgroundcolor; this. style. backgroundcolor = '# ff33ff' ;}; // specifies the background color of the area in which the cursor is displayed;
J. onmouseout = function () {This. style. backgroundcolor = C ;};
If (I = 5) & (J. nextsibling = NULL) // returns today (go to today !) Button
J. onclick = function () {year. value = form_year; month. value = form_month; Set ();};
}
}

Function flength_month () // used to obtain the maximum number of days per month
{
Length = new array (, 31, 31); // Date list of each month
Length [1] = (Year. Value % 4 = 0) & (Year. Value % 100! = 0) | (Year. Value % 400 = 0 ))? 29:28; // determine the number of days on January 1, February
Return length [month. Value-1];
}

Show ();

</SCRIPT>


</Body>

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.