JS实现时间菜单的动态显示(已处理平年和闰年)
2008-03-05 17:23
926 查看
<script type="text/javascript">
function check(){
var year = document.getElementById("year2").value;
var month = document.getElementById("month2").value;
checkMonth(month,year);
}
function checkYear(yearValue){
if((yearValue%4==0&&yearValue%100!=0)||yearValue%400==0)
return true;
else
return false;
}
function checkMonth(monthValue,yearValue){
var middleMonth = [4,6,9,11];
var february = 2;
var monthDay = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31];
var seconDay = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30];
var thirdDay = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29];
var smallDay = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28];
if(february == monthValue){
if(checkYear(yearValue)){
setOptions(thirdDay);
}
else{
setOptions(smallDay);
}
}
else{
if(monthValue==4||monthValue==6||monthValue==9||monthValue==11){
setOptions(seconDay);
}
else{
setOptions(monthDay);
}
}
}
function setOptions(daysOfMonth){
var day = document.getElementById("day2");
day.length=1;
for(var i=0;i<daysOfMonth.length;i++)
day[i] = new Option(daysOfMonth[i],daysOfMonth[i]);
}
</script>
//以下测试JS代码的HTML文档:
<script language="javascript" src="showData.js"></script>
<body>
<select name="year2" id="year2">
<option value="1900">1900</option>
<option value="1901">1901</option>
<option value="1902">1902</option>
<option value="1903">1903</option>
<option value="1904">1904</option>
<option value="1905">1905</option>
<option value="1906">1906</option>
<option value="1907">1907</option>
<option value="1908">1908</option>
<option value="1909">1909</option>
<option value="1910">1910</option>
<option value="1911">1911</option>
<option value="1912">1912</option>
<option value="1913">1913</option>
<option value="1914">1914</option>
<option value="1915">1915</option>
<option value="1916">1916</option>
<option value="1917">1917</option>
<option value="1918">1918</option>
<option value="1919">1919</option>
<option value="1920">1920</option>
<option value="1921">1921</option>
<option value="1922">1922</option>
<option value="1923">1923</option>
<option value="1924">1924</option>
<option value="1925">1925</option>
<option value="1926">1926</option>
<option value="1927">1927</option>
<option value="1928">1928</option>
<option value="1929">1929</option>
<option value="1930">1930</option>
<option value="1931">1931</option>
<option value="1932">1932</option>
<option value="1933">1933</option>
<option value="1934">1934</option>
<option value="1935">1935</option>
<option value="1936">1936</option>
<option value="1937">1937</option>
<option value="1938">1938</option>
<option value="1939">1939</option>
<option value="1940">1940</option>
<option value="1941">1941</option>
<option value="1942">1942</option>
<option value="1943">1943</option>
<option value="1944">1944</option>
<option value="1945">1945</option>
<option value="1946">1946</option>
<option value="1947">1947</option>
<option value="1948">1948</option>
<option value="1949">1949</option>
<option value="1950">1950</option>
<option value="1951">1951</option>
<option value="1952">1952</option>
<option value="1953">1953</option>
<option value="1954">1954</option>
<option value="1955">1955</option>
<option value="1956">1956</option>
<option value="1957">1957</option>
<option value="1958">1958</option>
<option value="1959">1959</option>
<option value="1960">1960</option>
<option value="1961">1961</option>
<option value="1962">1962</option>
<option value="1963">1963</option>
<option value="1964">1964</option>
<option value="1965">1965</option>
<option value="1966">1966</option>
<option value="1967">1967</option>
<option value="1968">1968</option>
<option value="1969">1969</option>
<option value="1970" selected>1970</option>
<option value="1971">1971</option>
<option value="1972">1972</option>
<option value="1973">1973</option>
<option value="1974">1974</option>
<option value="1975">1975</option>
<option value="1976">1976</option>
<option value="1977">1977</option>
<option value="1978">1978</option>
<option value="1979">1979</option>
<option value="1980">1980</option>
<option value="1981">1981</option>
<option value="1982">1982</option>
<option value="1983">1983</option>
<option value="1984">1984</option>
<option value="1985">1985</option>
<option value="1986">1986</option>
<option value="1987">1987</option>
<option value="1988">1988</option>
<option value="1989">1989</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
<option value="2027">2027</option>
<option value="2028">2028</option>
<option value="2029">2029</option>
<option value="2030">2030</option>
<option value="2031">2031</option>
<option value="2032">2032</option>
<option value="2033">2033</option>
<option value="2034">2034</option>
<option value="2035">2035</option>
<option value="2036">2036</option>
<option value="2037">2037</option>
<option value="2038">2038</option>
<option value="2039">2039</option>
<option value="2040">2040</option>
<option value="2041">2041</option>
<option value="2042">2042</option>
<option value="2043">2043</option>
<option value="2044">2044</option>
<option value="2045">2045</option>
<option value="2046">2046</option>
<option value="2047">2047</option>
<option value="2048">2048</option>
<option value="2049">2049</option>
<option value="2050">2050</option>
<option value="2051">2051</option>
<option value="2052">2052</option>
<option value="2053">2053</option>
<option value="2054">2054</option>
<option value="2055">2055</option>
<option value="2056">2056</option>
<option value="2057">2057</option>
<option value="2058">2058</option>
<option value="2059">2059</option>
<option value="2060">2060</option>
<option value="2061">2061</option>
<option value="2062">2062</option>
<option value="2063">2063</option>
<option value="2064">2064</option>
<option value="2065">2065</option>
<option value="2066">2066</option>
<option value="2067">2067</option>
<option value="2068">2068</option>
<option value="2069">2069</option>
<option value="2070">2070</option>
<option value="2071">2071</option>
<option value="2072">2072</option>
<option value="2073">2073</option>
<option value="2074">2074</option>
<option value="2075">2075</option>
<option value="2076">2076</option>
<option value="2077">2077</option>
<option value="2078">2078</option>
<option value="2079">2079</option>
<option value="2080">2080</option>
<option value="2081">2081</option>
<option value="2082">2082</option>
<option value="2083">2083</option>
<option value="2084">2084</option>
<option value="2085">2085</option>
<option value="2086">2086</option>
<option value="2087">2087</option>
<option value="2088">2088</option>
<option value="2089">2089</option>
<option value="2090">2090</option>
<option value="2091">2091</option>
<option value="2092">2092</option>
<option value="2093">2093</option>
<option value="2094">2094</option>
<option value="2095">2095</option>
<option value="2096">2096</option>
<option value="2097">2097</option>
<option value="2098">2098</option>
<option value="2099">2099</option>
<option value="2100">2100</option>
</select>年
<select name="month2" id="month2" onblur="check();">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>月
<select name="day2" id="day2">
<option value="1">1</option>
</select>日
<br>
<input type="button" value="测试选择的日期" onClick="alertDay();"/>
</body>
<script language="javascript">
function alertDay(){
var day = document.getElementById("day2").value;
var month = document.getElementById("month2").value;
var year = document.getElementById("year2").value;
alert("您选择的日期是:"+year+"年"+month+"月"+day+"日");
}
</script>
function check(){
var year = document.getElementById("year2").value;
var month = document.getElementById("month2").value;
checkMonth(month,year);
}
function checkYear(yearValue){
if((yearValue%4==0&&yearValue%100!=0)||yearValue%400==0)
return true;
else
return false;
}
function checkMonth(monthValue,yearValue){
var middleMonth = [4,6,9,11];
var february = 2;
var monthDay = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31];
var seconDay = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30];
var thirdDay = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29];
var smallDay = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28];
if(february == monthValue){
if(checkYear(yearValue)){
setOptions(thirdDay);
}
else{
setOptions(smallDay);
}
}
else{
if(monthValue==4||monthValue==6||monthValue==9||monthValue==11){
setOptions(seconDay);
}
else{
setOptions(monthDay);
}
}
}
function setOptions(daysOfMonth){
var day = document.getElementById("day2");
day.length=1;
for(var i=0;i<daysOfMonth.length;i++)
day[i] = new Option(daysOfMonth[i],daysOfMonth[i]);
}
</script>
//以下测试JS代码的HTML文档:
<script language="javascript" src="showData.js"></script>
<body>
<select name="year2" id="year2">
<option value="1900">1900</option>
<option value="1901">1901</option>
<option value="1902">1902</option>
<option value="1903">1903</option>
<option value="1904">1904</option>
<option value="1905">1905</option>
<option value="1906">1906</option>
<option value="1907">1907</option>
<option value="1908">1908</option>
<option value="1909">1909</option>
<option value="1910">1910</option>
<option value="1911">1911</option>
<option value="1912">1912</option>
<option value="1913">1913</option>
<option value="1914">1914</option>
<option value="1915">1915</option>
<option value="1916">1916</option>
<option value="1917">1917</option>
<option value="1918">1918</option>
<option value="1919">1919</option>
<option value="1920">1920</option>
<option value="1921">1921</option>
<option value="1922">1922</option>
<option value="1923">1923</option>
<option value="1924">1924</option>
<option value="1925">1925</option>
<option value="1926">1926</option>
<option value="1927">1927</option>
<option value="1928">1928</option>
<option value="1929">1929</option>
<option value="1930">1930</option>
<option value="1931">1931</option>
<option value="1932">1932</option>
<option value="1933">1933</option>
<option value="1934">1934</option>
<option value="1935">1935</option>
<option value="1936">1936</option>
<option value="1937">1937</option>
<option value="1938">1938</option>
<option value="1939">1939</option>
<option value="1940">1940</option>
<option value="1941">1941</option>
<option value="1942">1942</option>
<option value="1943">1943</option>
<option value="1944">1944</option>
<option value="1945">1945</option>
<option value="1946">1946</option>
<option value="1947">1947</option>
<option value="1948">1948</option>
<option value="1949">1949</option>
<option value="1950">1950</option>
<option value="1951">1951</option>
<option value="1952">1952</option>
<option value="1953">1953</option>
<option value="1954">1954</option>
<option value="1955">1955</option>
<option value="1956">1956</option>
<option value="1957">1957</option>
<option value="1958">1958</option>
<option value="1959">1959</option>
<option value="1960">1960</option>
<option value="1961">1961</option>
<option value="1962">1962</option>
<option value="1963">1963</option>
<option value="1964">1964</option>
<option value="1965">1965</option>
<option value="1966">1966</option>
<option value="1967">1967</option>
<option value="1968">1968</option>
<option value="1969">1969</option>
<option value="1970" selected>1970</option>
<option value="1971">1971</option>
<option value="1972">1972</option>
<option value="1973">1973</option>
<option value="1974">1974</option>
<option value="1975">1975</option>
<option value="1976">1976</option>
<option value="1977">1977</option>
<option value="1978">1978</option>
<option value="1979">1979</option>
<option value="1980">1980</option>
<option value="1981">1981</option>
<option value="1982">1982</option>
<option value="1983">1983</option>
<option value="1984">1984</option>
<option value="1985">1985</option>
<option value="1986">1986</option>
<option value="1987">1987</option>
<option value="1988">1988</option>
<option value="1989">1989</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
<option value="2027">2027</option>
<option value="2028">2028</option>
<option value="2029">2029</option>
<option value="2030">2030</option>
<option value="2031">2031</option>
<option value="2032">2032</option>
<option value="2033">2033</option>
<option value="2034">2034</option>
<option value="2035">2035</option>
<option value="2036">2036</option>
<option value="2037">2037</option>
<option value="2038">2038</option>
<option value="2039">2039</option>
<option value="2040">2040</option>
<option value="2041">2041</option>
<option value="2042">2042</option>
<option value="2043">2043</option>
<option value="2044">2044</option>
<option value="2045">2045</option>
<option value="2046">2046</option>
<option value="2047">2047</option>
<option value="2048">2048</option>
<option value="2049">2049</option>
<option value="2050">2050</option>
<option value="2051">2051</option>
<option value="2052">2052</option>
<option value="2053">2053</option>
<option value="2054">2054</option>
<option value="2055">2055</option>
<option value="2056">2056</option>
<option value="2057">2057</option>
<option value="2058">2058</option>
<option value="2059">2059</option>
<option value="2060">2060</option>
<option value="2061">2061</option>
<option value="2062">2062</option>
<option value="2063">2063</option>
<option value="2064">2064</option>
<option value="2065">2065</option>
<option value="2066">2066</option>
<option value="2067">2067</option>
<option value="2068">2068</option>
<option value="2069">2069</option>
<option value="2070">2070</option>
<option value="2071">2071</option>
<option value="2072">2072</option>
<option value="2073">2073</option>
<option value="2074">2074</option>
<option value="2075">2075</option>
<option value="2076">2076</option>
<option value="2077">2077</option>
<option value="2078">2078</option>
<option value="2079">2079</option>
<option value="2080">2080</option>
<option value="2081">2081</option>
<option value="2082">2082</option>
<option value="2083">2083</option>
<option value="2084">2084</option>
<option value="2085">2085</option>
<option value="2086">2086</option>
<option value="2087">2087</option>
<option value="2088">2088</option>
<option value="2089">2089</option>
<option value="2090">2090</option>
<option value="2091">2091</option>
<option value="2092">2092</option>
<option value="2093">2093</option>
<option value="2094">2094</option>
<option value="2095">2095</option>
<option value="2096">2096</option>
<option value="2097">2097</option>
<option value="2098">2098</option>
<option value="2099">2099</option>
<option value="2100">2100</option>
</select>年
<select name="month2" id="month2" onblur="check();">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>月
<select name="day2" id="day2">
<option value="1">1</option>
</select>日
<br>
<input type="button" value="测试选择的日期" onClick="alertDay();"/>
</body>
<script language="javascript">
function alertDay(){
var day = document.getElementById("day2").value;
var month = document.getElementById("month2").value;
var year = document.getElementById("year2").value;
alert("您选择的日期是:"+year+"年"+month+"月"+day+"日");
}
</script>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JS实现动态显示当前时间
- 纯js实现动态时间显示
- html+js实现动态显示本地时间
- JS实现动态显示当前时间
- 纯JS实现动态时间显示代码
- js 实现页面动态显示时间
- 中信-js对象的使用（实现的显示时间动态变化）
- JS实现HTML页面中动态显示当前时间完整示例
- js实现动态时间显示
- js实现时间的显示，且动态刷新
- 纯JS实现动态时间显示代码
- html+js实现动态显示本地时间
- 天易01----js实现定时关闭网页并动态显示时间
- js实现动态获取系统时间，显示到页面上
- js实现动态获取系统时间，显示到页面上
- JS实现日期时间动态显示的方法
- js实现简单的隐藏导航菜单动态显示
- js实现 页面显示系统时间（中文显示星期）、动态倒计时页面跳转
- js实现动态显示时间(setInterval())
- 纯JS实现动态时间显示