版权声明：本文为博主原创文章，未经博主同意不得转载。

https://blog.csdn.net/wangshuxuncom/article/details/35263317

        这个功能是大学时自己使用纯JavaScript写的，没有借助Jquery，呵呵呵，看起来有点繁琐，但是在当时依稀的记得功能实现后自己好好的高兴一把了呢，从如今来看那时候的自己是多么的幼稚、多么的无知：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

	<head>

		<title>年月日三级联动（默认显示系统时间）</title>

		<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

		<script type="text/javascript">

			function removeChilds(id){

				var childs = document.getElementById(id).childNodes;//这一行代码和紧跟的以下的for循环用于清除原来日的下拉列表的select中的对节点

				for(var i=childs.length-1;i>=0;i--) {

					document.getElementById(id).removeChild(childs[i]);

				}

			}

			function setDay(){

				var yearToDate=document.getElementById("year").value;

				var monthToDate=document.getElementById("month").value;

				//alert(yearToDate+":"+monthToDate);

				var days=new Array(28,29,30,31);

				var nowDate=new Date();

				if(monthToDate==1||monthToDate==3||monthToDate==5||monthToDate==7||monthToDate==8||monthToDate==10||monthToDate==12){

					removeChilds("day");

					for( i=1; i<=days[3]; i++ ){

						if(yearToDate==nowDate.getFullYear()&&monthToDate==(nowDate.getMonth()+1)&&i==nowDate.getDate()){//假设是当前系统时间则设置默认的日

							var newOption = document.createElement("option");newOption.setAttribute("value",i);newOption.setAttribute("selected","selected");

							var textToNewOption=document.createTextNode(i);newOption.appendChild(textToNewOption);

							document.getElementById("day").appendChild(newOption);

						}else{

							var newOption = document.createElement("option");newOption.setAttribute("value",i);

							var textToNewOption=document.createTextNode(i);newOption.appendChild(textToNewOption);

							document.getElementById("day").appendChild(newOption);

						}

					}

				}

				if(monthToDate==4||monthToDate==6||monthToDate==9||monthToDate==11){

					removeChilds("day");

					for( i=1; i<=days[2]; i++ ){

						if(yearToDate==nowDate.getFullYear()&&monthToDate==(nowDate.getMonth()+1)&&i==nowDate.getDate()){//假设是当前系统时间则设置默认的日

							var newOption = document.createElement("option");newOption.setAttribute("value",i);newOption.setAttribute("selected","selected");

							var textToNewOption=document.createTextNode(i);newOption.appendChild(textToNewOption);

							document.getElementById("day").appendChild(newOption);

						}else{

							var newOption = document.createElement("option");newOption.setAttribute("value",i);

							var textToNewOption=document.createTextNode(i);newOption.appendChild(textToNewOption);

							document.getElementById("day").appendChild(newOption);

						}

					}

				}

				if(monthToDate==2){

					removeChilds("day");

					if(yearToDate%400==0||yearToDate%100!=0&&yearToDate%4==0){//闰年

						for( i=1; i<=days[1]; i++ ){

							if(yearToDate==nowDate.getFullYear()&&monthToDate==(nowDate.getMonth()+1)&&i==nowDate.getDate()){//假设是当前系统时间则设置默认的日

								var newOption = document.createElement("option");newOption.setAttribute("value",i);newOption.setAttribute("selected","selected");

								var textToNewOption=document.createTextNode(i);newOption.appendChild(textToNewOption);

								document.getElementById("day").appendChild(newOption);

							}else{

								var newOption = document.createElement("option");newOption.setAttribute("value",i);

								var textToNewOption=document.createTextNode(i);newOption.appendChild(textToNewOption);

								document.getElementById("day").appendChild(newOption);

							}

						}

					}

					else{

						for( i=1; i<=days[0]; i++ ){

							if(yearToDate==nowDate.getFullYear()&&monthToDate==(nowDate.getMonth()+1)&&i==nowDate.getDate()){//假设是当前系统时间则设置默认的日

								var newOption = document.createElement("option");newOption.setAttribute("value",i);newOption.setAttribute("selected","selected");

								var textToNewOption=document.createTextNode(i);newOption.appendChild(textToNewOption);

								document.getElementById("day").appendChild(newOption);

							}else{

								var newOption = document.createElement("option");newOption.setAttribute("value",i);

								var textToNewOption=document.createTextNode(i);newOption.appendChild(textToNewOption);

								document.getElementById("day").appendChild(newOption);

							}

						}

					}

				}

			}

			function getMonth(){

				var m;

				for(m=1;m<=12;m++) {

					if((new Date().getMonth()+1)==m){

						document.write("<option value="+m+" selected=\"selected\">"+m+"</option>");

					}else{

						document.write("<option value="+m+">"+m+"</option>");

					}

				}

			}

			function getYear(){

				var y;

				var date=new Date();

				var fullYear=date.getFullYear();

				for(y=fullYear-60;y<=fullYear;y++){

					if(y==fullYear){

						document.write("<option value="+y+" selected=\"selected\">"+y+"</option>");

					}else{

						document.write("<option value="+y+" >"+y+"</option>");

					}

				}

			}

		</script>

	</head>

	<body>

		<select name="year" id="year" onChange="setDay();"><script type="text/javascript">getYear();</script></select>年

		<select name="month" id="month" onChange="setDay()"><script type="text/javascript">getMonth();</script></select>月

		<select name="day" id="day"><script type="text/javascript">setDay();<!--起到初始化日的作用。

--></script></select>日

	</body>

</html>

时间操作（JavaScript版）—年月日三级联动（默认显示系统时间）的更多相关文章

  1. JS实现年月日三级联动+省市区三级联动+国家省市三级联动

    开篇随笔:最近项目需要用到关于年月日三级联动以及省市区三级联动下拉选择的功能,于是乎网上搜了一些做法,觉得有一些只是给出了小的案例或者只有单纯的js还不完整,却很难找到详细的具体数据(baidu搜索都 ...

  2. 利用select实现年月日三级联动的日期选择效果

    × 目录 [1]演示 [2]规划 [3]结构生成[4]算法处理 前面的话 关于select控件,可能年月日三级联动的日期选择效果是最常见的应用了.本文是选择框脚本的实践,下面将对日期选择效果进行详细介 ...

  3. JS 实现的年月日三级联动

    js文件 SYT="-请选择年份-"; SMT="-请选择月份-"; SDT="-请选择日期-"; BYN=50;//年份范围往前50年 A ...

  4. JS年月日三级联动下拉框日期选择代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. LaTeX去掉默认显示日期时间

    LaTeX去掉默认显示日期时间: \date{}

  6. Qt 实时显示系统时间

    前言 我们用一个label控件来实时显示系统时间,用到 QTimer 和 QDateTime 这个两个类. 正题 头文件: #ifndef MAINWINDOW_H #define MAINWINDO ...

  7. js实现年月日三级联动

    当我们注册一个qq的时候,会看到一个三级年月日的联动菜单,下面简单介绍. <!doctype html> <html lang="en"> <head ...

  8. 原生javascript制作省市区三级联动详细教程

    多级联动下拉菜单是前端常见的效果,省市区三级联动又属于其中最典型的案例.多级联动一般都是与数据相关联的,根据数据来生成和修改联动的下拉菜单.完成一个多级联动效果,有助于增强对数据处理的能力. 本实例以 ...

  9. 原生javascript实现省市区三级联动

    腾讯IP分享计划(http://ip.qq.com/)有个现成的三级联动功能,查看源码后发现可以直接使用其单独的JS文件(http://ip.qq.com/js/geo.js). 分析后发现自己需要写 ...

随机推荐

  1. How to create own operator with python in mxnet?

    继承CustomOp 定义操作符,重写前向后向方法,此时可以通过_init__ 方法传递需要用到的参数 class LossLayer(mxnet.operator.CustomOp): def __ ...

  2. Oracle 11g 物理Dataguard日常操作维护（二）

    Oracle 11g 物理Dataguard日常操作维护(二) 2017年8月25日 14:34 3.3 3.3.1 查看备库进程状态 SYS(125_7)@fpyj123> select pr ...

  3. K8S镜像删除及环境清理

    环境清理: #删除所有容器sudo docker rm -f $(sudo docker ps -qa) #删除/var/etcd目录sudo rm -rf /var/etcd #删除/var/lib ...

  4. PHP:第一章——PHP中的关键字

    <?php //PHP关键词 /* and //php中的逻辑与运算符.(和) or //php中的逻辑或运算符.(或) xor //php中的逻辑异或.(异或) __FILE__ //php中 ...

  5. 框架：Lucene.net

    Lucene.net 性能<第八篇> 摘要: 一.IndexReader性能分析 IndexReader完成了打开所有索引文件和提供底层reader API等繁重的工作,而IndexSea ...

  6. Vue 框架中遇到的诀窍

    问题一. 我需要渲染数组A,并根据 B数组中是否存在A中,给A添加 选中状态sel. 经过很焦虑的研究后,寻求帮助得到答案. 1.初始化数据时 A添加属性flag(bool)标识,如果B中存在A中某个 ...

  7. 编译EXE文件的时候pcap编译不进去。 pyinstaller pcap pypcap 报错

    如果生成的exe源码中有import pcap 那么你目标机上就要先装npcap 并勾选winpcap API. 然后就不出这个问题了. 暂时的办法是第一个exe不包含import pcap.自检np ...

  8. JS底层知识理解之执行上下文篇

    JS底层知识理解之执行上下文篇 一.什么是执行上下文(Execution Context) 执行上下文可以理解为当前代码的执行环境,它会形成一个作用域. 二.JavaScript引擎会以什么方式去处理 ...

  9. DevExpress v17.2新版亮点—Windows 10篇

    用户界面套包DevExpress v17.2日前终于正式发布,本站将以连载的形式为大家介绍各版本新增内容.本文将介绍了Windows 10 Controls v17.2 的新功能,快来下载试用新版本! ...

  10. 201621123010《Java程序设计》第13周学习总结

    1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 2. 为你的系统增加网络功能(购物车.图书馆管理.斗地主等)-分组完成 为了让你的系统可以被多个用户通过网 ...