select实现三级联动的日期年月日选择效果
算法的实质就是确定某年某月到底有多少天，然后对多余的天数进行删除或者对少的天数进行添加
1、闰年
年分为闰年和平年，平年有365天，闰年有366天。闰年的2月比平年多一天
闰年的定义是(可被4整除)且((不可被100整除)或(可被400整除))的年份
口诀是：四年一闰，百年不闰，四百年再闰
2、大小月
一年有12个月，其中4、6、9、11月每月有30天；如果是闰年，2月有29天，否则 ，2月有28天。1、3、5、7、8、10、12月每月有31天
3、增减情况
考虑特殊情况，如果先选择31日，再选择2月，则发生错误。所以，选择年份时，月份和天数自动置为默认值'月'和'日'，天数的范围重置为'31'
选择月份时，天数自动置为默认值'日'，天数的范围根据计算显示相应天数
此时，天数可能为28、29、30、31四种情况
4、结果显示
每次年、月、日的点击事件，都判断年份、月份和天数是否都已经设置为非默认值。如果是的，则显示最终结果，并计算星期值；如果不是，则什么都不执行
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> select{ font:20px/40px '宋体'; } option{width: 100px;} </style> </head> <body> <div id="box"> <select name="sel1" id="sel1"> <option value="year">年</option> <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">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="sel2" id="sel2"> <option value="month">月</option> <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="sel3" id="sel3"> <option value="day">日</option> <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><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option></select> <span id="result"></span> </div> <script> //生成日期 function creatDate(){ //生成1900年-2100年 for(var i = 1900; i<=2100;i++){ var option = document.createElement('option'); option.setAttribute('value',i); option.innerHTML = i; sel1.appendChild(option); } //生成1月-12月 for(var i = 1; i <=12; i++){ var option = document.createElement('option'); option.setAttribute('value',i); option.innerHTML = i; sel2.appendChild(option); } //生成1日—31日 for(var i = 1; i <=31; i++){ var option = document.createElement('option'); option.setAttribute('value',i); option.innerHTML = i; sel3.appendChild(option); } } creatDate(); //保存某年某月的天数 var days; //年份点击 sel1.onclick = function(){ //月份显示默认值 sel2.options[0].selected = true; //天数显示默认值 sel3.options[0].selected = true; } //月份点击 sel2.onclick = function(){ //天数显示默认值 sel3.options[0].selected = true; //计算天数的显示范围 //如果是2月 if(sel2.value == 2){ //如果是闰年 if((sel1.value % 4 === 0 && sel1.value % 100 !== 0) || sel1.value % 400 === 0){ days = 29; //如果是平年 }else{ days = 28; } //如果是第4、6、9、11月 }else if(sel2.value == 4 || sel2.value == 6 ||sel2.value == 9 ||sel2.value == 11){ days = 30; }else{ days = 31; } //增加或删除天数 //如果是28天，则删除29、30、31天(即使他们不存在也不报错) if(days == 28){ sel3.remove(31); sel3.remove(30); sel3.remove(29); } //如果是29天 if(days == 29){ sel3.remove(31); sel3.remove(30); //如果第29天不存在，则添加第29天 if(!sel3.options[29]){ sel3.add(new Option('29','29'),undefined) } } //如果是30天 if(days == 30){ sel3.remove(31); //如果第29天不存在，则添加第29天 if(!sel3.options[29]){ sel3.add(new Option('29','29'),undefined) } //如果第30天不存在，则添加第30天 if(!sel3.options[30]){ sel3.add(new Option('30','30'),undefined) } } //如果是31天 if(days == 31){ //如果第29天不存在，则添加第29天 if(!sel3.options[29]){ sel3.add(new Option('29','29'),undefined) } //如果第30天不存在，则添加第30天 if(!sel3.options[30]){ sel3.add(new Option('30','30'),undefined) } //如果第31天不存在，则添加第31天 if(!sel3.options[31]){ sel3.add(new Option('31','31'),undefined) } } } //结果显示 box.onclick = function(){ //当年、月、日都已经为设置值时 if(sel1.value !='year' && sel2.value != 'month' && sel3.value !='day'){ var day = new Date(sel1.value,sel2.value-1,sel3.value).getDay(); result.innerHTML = sel1.value + '年' + sel2.value + '月' + sel3.value + '日' + '星期' + changDay(day); }else{ result.innerHTML = ''; } } //星期格式切换 function changDay(num){ switch(num){ case 0: return '日'; case 1: return '一'; case 2: return '二'; case 3: return '三'; case 4: return '四'; case 5: return '五'; case 6: return '六'; } } </script> </body> </html> 
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知