文档章节

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

没有更多内容

加载失败,请刷新页面

加载更多

下一页

OSChina 周日乱弹 —— 种族不同,禁止交往

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @小小编辑:推荐歌曲《苏菲小姐》- 鱼果 《苏菲小姐》- 鱼果 手机党少年们想听歌,请使劲儿戳(这里) @貓夏:下大雨 正是睡觉的好时候 临睡前...

小小编辑
今天
211
6
Python 搭建简单服务器

Python动态服务器网页(需要使用WSGI接口),基本实现步骤如下: 1.等待客户端的链接,服务器会收到一个http协议的请求数据报 2.利用正则表达式对这个请求数据报进行解析(请求方式、提取出文...

代码打碟手
今天
1
0
Confluence 6 删除垃圾内容

属性(profile)垃圾 属性垃圾的定义为,一个垃圾用户在 Confluence 创建了用户,但是这个用户在自己的属性页面中添加了垃圾 URL。 如果你有很多垃圾用户在你的系统中创建了属性,你可以使用...

honeymose
今天
0
0
qduoj~前端~二次开发~打包docker镜像并上传到阿里云容器镜像仓库

上一篇文章https://my.oschina.net/finchxu/blog/1930017记录了怎么在本地修改前端,现在我要把我的修改添加到部署到本地的前端的docker容器中,然后打包这个容器成为一个本地镜像,然后把这...

虚拟世界的懒猫
今天
1
0
UML中 的各种符号含义

Class Notation A class notation consists of three parts: Class Name The name of the class appears in the first partition. Class Attributes Attributes are shown in the second par......

hutaishi
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部