HTML年月日的JS实现
HTML年月日的JS实现
文质斌彬 发表于2年前
HTML年月日的JS实现
  • 发表于 2年前
  • 阅读 19
  • 收藏 0
  • 点赞 0
  • 评论 0

新睿云服务器60天免费使用,快来体验!>>>   

摘要: 初学者的一个JS编程小作业,欢迎各位大神指点一二。。比如代码风格之类的

这两天在学J2EE,接触到了HTML,所以做了个小作业。基本思路就是用document对象找节点添加子节点,然后根据年月确定日的长度。自认为要注意两个细节,一是函数的抽取,二是会出现年份改变而不改变月份的情况,所以我在年月标签都添加了onchange()方法。

<head>
<script type="text/javascript">
 /*
  年份: 1900年 到今天

  月份: 1~12

  日: 根据每月算出对应的天数(包含有闰年)

  */
 function makeYM() {

  createOptions(1900, 2016, "year");
  createOptions(1, 12, "month");
 }

 function showDay() {

  var yearNode = document.getElementById("year");
  var year = parseInt(yearNode.value);
  var monthNode = document.getElementById("month");
  var month = parseInt(monthNode.value);
  var day = getDayByYM(year, month);
  createOptions(1, day, "day");
 }

 function createOptions(start, end, nodeID) {
  
  var node = document.getElementById(nodeID);
  node.options.length = 1;
  for (var index = start; index < end + 1; index++) {
   var option = document.createElement("option");
   option.innerHTML = index;
   option.value = index;
   node.appendChild(option);
  }

 }

 function getDayByYM(year, month) {
  
  switch (month) {
  case 1:
  case 3:
  case 5:
  case 7:
  case 8:
  case 10:
  case 12:
   var day = 31;
   break;
  case 4:
  case 6:
  case 9:
  case 11:
   var day = 30;
   break;
  case 2:
   if (year % 400 == 0 || (year % 100 != 0 && year % 4 == 0)) {
    var day = 29;
   } else {
    var day = 28;
   }
   break;
  default:
//   alert("请选择月份");
   break;
  }
  return day;
 }
</script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>年月日的选择</title>
</head>

<body onload="makeYM()">

 年<select id="year" onchange="showDay()">
  <option>年</option>
 </select>

月<select id="month" onchange="showDay()">
  <option>月</option>
 </select>

日<select id="day">
  <option>日</option>
 </select>
</body>

  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 0
博文 11
码字总数 5241
×
文质斌彬
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: