JS+HTML语言编写出生日期，年月日列表

最新推荐文章于 2024-05-05 08:03:48 发布

GjGo

最新推荐文章于 2024-05-05 08:03:48 发布

阅读量6k

点赞数 5

分类专栏： javascript 文章标签： js html 列表 javascript

本文链接：https://blog.csdn.net/weixin_45603128/article/details/104008774

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

年月日列表：要求当年和月列表发生改变时，刷新日列表
原理：
大月：31天
小月：30天
2月：闰年29天，平年28天
知识点：selec列表框的使用，通过options集合的add()方法添加列表项,或者通过select对象的appendChild()添加列表项
闰年判断：（1）能被4整除但是不能被100整除（2）能被400整除

<!doctype html>
<html>
<head>
 <meta charset="utf-8"/>
 <title>年月日列表</title>
<script>
 window.onload=function(){
 var oY=document.getElementById("year");
 var oM=document.getElementById("month");
 var oD=document.getElementById("day");
 //oY.options.add(new Option(1970));
 //oY.appendChild(new Option(1971));
 ini(oY,oM,oD);
 oY.onchange=function(){
 ref(oY,oM,oD);
 }
 oM.onchange=function(){
 ref(oY,oM,oD);
 }
 }
 //任务一：初始化年月日列表框
 function ini(y,m,d){
  for(var i=1970;i<2051;i++){
  y.appendChild(new Option(i));
  }
  for(var i=1;i<13;i++){
  m.appendChild(new Option(i));
  }
  for(var i=1;i<32;i++){
  d.appendChild(new Option(i));
  }
 }
 //任务二：当年、月列表框内容改变时，刷新日列表框
 function ref(y,m,d){
 var yv=y.value;
 var mv=m.value;
 var dv;
 switch(parseInt(mv)){
 case 1:
 case 3:
 case 5:
 case 7:
 case 8:  
 case 10:
 case 12: dv=31;break;
 case 4:
 case 6:
 case 9:
 case 11:dv=30;break;
 case 2:
  if((yv%4==0&&yv%100!=0)||(yv%400==0)){
  dv=29;
  }else{
  dv=28;
  }
  break;
 }
 d.length=0;//清空日列表
 for(var i=1;i<dv+1;i++){
  d.appendChild(new Option(i));
  }
 }
 </script>
</head>
<body>
 <label for="">出生日期：</label>
 <select name="" id="year"></select>年
 <select name="" id="month"></select>月
 <select name="" id="day"></select>日
</body>
</html>

GjGo

关注

5
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
JS+HTML语言编写出生日期，年月日列表

年月日列表：要求当年和月列表发生改变时，刷新日列表原理：大月：31天小月：30天2月：闰年29天，平年28天知识点：selec列表框的使用，通过options集合的add()方法添加列表项,或者通过select对象的appendChild()添加列表项闰年判断：（1）能被4整除但是不能被100整除（2）能被400整除<!doctype html><html>...
复制链接

扫一扫