文档章节

HTML年月日的JS实现

文质斌彬
 文质斌彬
发布于 2016/06/14 16:36
字数 354
阅读 23
收藏 0

这两天在学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
博文 13
码字总数 6212
作品 0
日本
程序员
私信 提问
运用js脚本语言switch实现一个求一个日期是一年中的第几天,考虑润年

运用js脚本语言实现一个求一个日期是一年中的第几天,考虑润年 我们需要在网页中弹出框输入年月日,代码如下:

IT界的笑话
2018/05/10
0
0
一篇文章吃透iOS、JS的时间日期(Date, Calendar, Locale, TimeZone)

iOS 时间相关类 NSDate - 表示一个绝对的时间点。 NSCalendar - 代表一个特定的日历,例如公历或者希伯来日历。它提供了一系列基于日期的计算,并且可以让你在"NSDate"和"NSDateComponents"对...

奶爸码农
2018/05/09
0
0
dwz使用过程中疑问(求大神帮忙看下如何解决)

一.简介 1、概述 DWZ富客户端框架(jQuery RIA framework), 是中国人自己开发的基于jQuery实现的Ajax RIA开源框架。 DWZ富客户端框架设计目标是简单实用、扩展方便、快速开发、RIA思路、轻量...

谢思华
2014/05/12
0
2
2015 上半年 JavaScript 使用统计数据

BuiltWith 团队发布了一个重要的报告:2015 上半年 JavaScript 使用统计数据。 jQuery,作为近几年 JS 开发环境中常用的 JavaScript 框架,已经传播到 200 万的新域名,有效的提高了 4% 的市...

oschina
2015/07/29
4.1K
23
怎样将时间日期显示为年月日啊 用Jquery或者JavaScript都行。。。

怎样将时间日期显示为年月日啊 用Jquery或者JavaScript都行。。。

jcinta0823
2012/05/23
2.9K
2

没有更多内容

加载失败,请刷新页面

加载更多

Cookie 显示用户上次访问的时间

import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.Cookie;import javax.servlet.http.HttpServlet;import javax.serv......

gwl_
今天
1
0
网络编程

第14天 网络编程 今日内容介绍  网络通信协议  UDP通信  TCP通信 今日学习目标  能够辨别UDP和TCP协议特点  能够说出UDP协议下两个常用类名称  能够说出TCP协议下两个常用类名称...

stars永恒
今天
1
0
二进制相关

二进制 众所周知计算机使用的是二进制,数字的二进制是如何表示的呢? 实际就是逢二进一。比如 2 用二进制就是 10。那么根据此可以推算出 5的二进制等于 10*10+1 即为 101。 在计算机中,负数以...

NotFound403
昨天
3
0
day22:

1、写一个getinterface.sh 脚本可以接受选项[i,I],完成下面任务: 1)使用格式:getinterface.sh [-i interface | -I ip] 2)当用户使用-i选项时,显示指定网卡的IP地址;当用户使用-I选项...

芬野de博客
昨天
2
0
Spring Cloud Alibaba基础教程:使用Nacos实现服务注册与发现

自Spring Cloud Alibaba发布第一个Release以来,就备受国内开发者的高度关注。虽然Spring Cloud Alibaba还没能纳入Spring Cloud的主版本管理中,但是凭借阿里中间件团队的背景,还是得到不少...

程序猿DD
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部