文档章节

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界的笑话
05/10
0
0
一篇文章吃透iOS、JS的时间日期(Date, Calendar, Locale, TimeZone)

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

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

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

谢思华
2014/05/12
0
2
ECSHOP广告时间更加精确到时分秒

首先这是一个很生僻的问题,只是近日有人问到此类问题。所以写了出来。 原问题好像是问“ECSHOP广告位的上线时间能不能具体到某个小时?” 大家都知道,ECSHOP后台里,碰到选择时间的地方默认...

Android1989
2014/08/14
0
0
My97DatePicker设置日期年月日时分秒格式

My97DatePicker设置日期年月日时分秒格式技术 maybe yes 发表于2015-01-07 18:49 原文链接 : http://blog.lmlphp.com/archives/57 来自 : LMLPHP后院 前端 JavaScript 日期插件 My97DatePick...

hosser
2015/03/19
0
2

没有更多内容

加载失败,请刷新页面

加载更多

nginx的简单使用:负载均衡

nginx:反向代理的服务器;用户发送请求到nginx,nginx把请求发送给真正的服务器,等待服务器处理完数据并返回,再把数据发送给用户。 nginx作为一个反向代理服务器,能缓存我们项目的静态文...

osliang
34分钟前
2
0
网站title标题被改并被百度网址安全中心提醒的解决办法

国庆假日期间我们Sine安全接到众多网站站长求助网站标题被改导致在百度搜索中百度安全中心提醒被拦截,导致网站正常用户无法浏览网站被跳转到一些菠菜du博网站,而且很明显的一个特征就是在百...

网站安全
36分钟前
1
0
JDK版本与major.minor version的对照关系

其实,只需要记住jdk6对于major.minor version 50即可,其他版本自行计算即可。 ---------------------

码代码的小司机
38分钟前
1
0
C++基础教程面向对象学习笔记及心得感悟[图]

C++基础教程面向对象学习笔记及心得感悟[图] 使用友元函数重载算术运算符: C ++中一些最常用的运算符是算术运算符 - 即加号运算符(+),减运算符( - ),乘法运算符(*)和除法运算符(/...

原创小博客
47分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部