Home > Developer > JavaScript
A simple JavaScript-based drop-down box interaction is an example of the previous study of the interface prototype.
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 strict // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> demonstration of dynamic date Association </title>
<SCRIPT type = "text/JavaScript">
VaR oyears, omonths, odays, isleapyear;
VaR Iy, Im, ID;
Window. onload = function (){
Initdate ();
}
Function initdate (){
Isleapyear = false;
Oyears = Document. getelementbyid ('ears'); // obtain the select
Omonths = Document. getelementbyid ('months'); // obtain the SELECT statement of month.
Odays = Document. getelementbyid ('days '); // obtain the SELECT statement of day.
Inityears (); // year of initialization
// Set three select onchange events
Oyears. onchange = chgyear;
Omonths. onchange = chgmonth;
Odays. onchange = chgday;
}
Function inityears (){
Oyears. Length = 1;
VaR cYear = new date (). getyear ();
For (VAR I = cYear-20; I <= cYear; I ++) // cycle from the first 20 years of the current year, you can change the cycle interval on your own
{
VaR o = New Option (I. tostring (), I. tostring ());
Oyears. Add (O );
}
}
Function chgyear (){
Try
{
Isleapyear = false;
VaR year = parseint (this. Options [This. selectedindex]. Value); // obtain the selected year
// Judge whether it is a leap year. Baidu doesn't know the formula.
If (Year % 4 = 0) isleapyear = true;
If (Year % 100 = 0 & year % 400! = 0) isleapyear = false;
If (Year % 100 = 0 & year % 400 = 0) isleapyear = true;
Initmonths (); // in order to reflect the effect of association, the year is not selected and the month is initialized once.
}
Catch (e ){;}
}
Function initmonths (){
Omonths. Length = 1;
For (VAR I = 1; I <13; I ++) // The month is 1 ~ December
{
VaR o = New Option (I. tostring (), I. tostring ());
Omonths. Add (O );
}
}
Function chgmonth (){
Try
{
VaR month = This. Options [This. selectedindex]. value;
If (month! = '')
{
VaR days;
If (month. Replace (/(1 | 3 | 5 | 7 | 8 | 10 | 12)/ig, '') ='') // you can check whether a month is large.
Days = 31;
Else if (month. Replace (/(4 | 6 | 9 | 11)/ig, '') ='') // you can determine whether a month is used.
Days = 30;
Else if (month = '2' & isleapyear) // determines if it is a leap month when it is January 1, February.
Days = 29;
Else
Days = 28;
Initdays (days );
}
}
Catch (e ){;}
}
Function initdays (days ){
Odays. Length = 1;
For (VAR I = 1; I <= parseint (days); I ++) // display the number of days in a loop
{
VaR o = New Option (I. tostring (), I. tostring ());
Odays. Add (O );
}
}
Function chgday (){
// Call this function when the date is changed
Try
{
VaR year = oyears. Options [oyears. selectedindex]. value;
VaR month = omonths. Options [omonths. selectedindex]. value;
VaR day = This. Options [This. selectedindex]. value;
Alert ('you have selected '+ year + 'Year' + month + 'month' + day + 'day ');
}
Catch (e ){;}
}
</SCRIPT>
</Head>
<Body>
<Div>
<Select id = "years">
<Option value = ""> select year </option>
</SELECT>
<Select id = "months">
<Option value = ""> select month </option>
</SELECT>
<Select id = "days">
<Option value = ""> select day </option>
</SELECT>
</Div>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
