select实现三级联动的日期年月日选择效果

时间：5年前阅读：4991

　　算法的实质就是确定某年某月到底有多少天，然后对多余的天数进行删除或者对少的天数进行添加

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

微信扫码关注

更新实时通知

select实现三级联动的日期年月日选择效果

网友评论