期权记-ETF期权开户导航 期权记是专业的50ETF300ETF期权开户投资交易导航

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,我们将及时处理。

微信扫码关注

更新实时通知

作者:期权小韭菜 分类:网页教程 浏览:
请先 登录 再评论,若不是会员请先 注册