js——年月日选择功能

html代码:

<div style="margin-top: 270px;width: 210px;height: 20px;margin-left: 580px;">
  年 <select id="year" onchange="addDay()" style="border: none;"></select>
  月 <select id="month" onchange="addDay()" style="border: none;"></select>
  日 <select id="date" onchange="" style="border: none;"></select>
</div>

js代码:

<script>
var year_slt = document.getElementById('year');
  var month_slt = document.getElementById('month');
  var day_slt = document.getElementById('date');        //提取日期
  var now = new Date();
  now_year = now.getFullYear();         //获取当前年份
  
  for(i = now_year; i >= now_year - 70; i--){              //从当前年份选近70年
    var opt_year = document.createElement('option');       //造元素
    opt_year.value = i;
    opt_year.innerText = i;   
    year_slt.appendChild(opt_year);               //赋给天数的下拉框
  }    

  for(i = 1; i <= 12; i++){
    var opt_month = document.createElement('option');  
    opt_month.value = i; 
    opt_month.innerText = i;   
    month_slt.appendChild(opt_month);  
  }    

   for(i = 1; i <= 31; i++){
    var opt_day = document.createElement('option');   
    opt_day.value = i;   
    opt_day.innerText = i;   
    day_slt.appendChild(opt_day); 
	}

// console.log(month_slt)
// day_slt.appendChild(1);
  function isRun(year){                        //判断闰年和平年,需确定二月份天数
    if((year % 4 == 0 && year % 100 !== 0) || year % 400 == 0){
         return 29;
    }else{
       return 28;
    }
   }

  function addDay(){
      day_slt.innerHTML = '';
       if(month_slt.value == 1 || month_slt.value == 3 || month_slt.value == 5 || month_slt.value == 7
		 || month_slt.value == 8 || month_slt.value == 10 || month_slt.value == 12){
	      for(var i = 1; i <= 31; i++)
	       var opt_day = document.createElement('option');
	       opt_day.value = i;     
	       opt_day.innerText = i;     
	       day_slt.appendChild(opt_day);//选出31天的月份,赋天数1~31
	    }
      }else if(month_slt.value == 4 || month_slt.value == 6 || month_slt.value == 9 || month_slt.value == 11){
		    for(var i = 1; i <= 30; i++){
		      var opt_day = document.createElement('option');     
		      opt_day.value = i;
		      opt_day.innerText = i;
		      day_slt.appendChild(opt_day);           //选出30天的月份,赋天数1~30
		    }
			} else{
	        for(var i = 1; i <= isRun(year_slt.value); i++){
		       var opt_day = document.createElement('option');    
		       opt_day.value = i;     
		       opt_day.innerText = i;     
		       day_slt.appendChild(opt_day);      //确定二月份的天数
	      }
  	   }
    }
</script>
posted @ 2021-07-12 11:34  渝思  阅读(838)  评论(0)    收藏  举报