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

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. 【VUE】@click加上v-bind绑定切换类名及动画事件

    好长的名字... 效果是 点击元素,通过改变类名的方式让其改变颜色+移动动画效果,这里用的是v-bind和@click 废话不说 show me the code! <div id=" ...

  2. openSUSE 12.3 默认启动项

    修改默认opensuse12.3的默认启动项目(grub2). vim /boot/grub2/grubenv 里面有一条: saved_entry=openSUSE 12.3 修改为saved_en ...

  3. 如何最大限度提高.NET的性能

    优化 .NET的性能 1)避免使用ArrayList.     因为任何对象添加到ArrayList都要封箱为System.Object类型,从ArrayList取出数据时,要拆箱回实际的类型.建议使 ...

  4. 51nod1563

    题解: 其实只要排个序贪心一下就好了...代码600B不到... 代码: #include<bits/stdc++.h> using namespace std; ,INF=1e9; in ...

  5. DELPHI 5种运行程序的方法具体应用实例(带参数)

    http://www.02t.cn/article/code/102.html https://msdn.microsoft.com/en-us/library/windows/desktop/ms6 ...

  6. OPENWRT常用设置

    常用设置: 计划任务,定时重启 系统--计划任务,每行一个计划任务. 然后是计划任务列表的格式: [minute] [hour] [day of month] [month] [day of week ...

  7. OPENVZ低版本centos6.5安装BBR加速手记

    玩 VPS,开机第一件事就是安装 BBR,至于效果怎么样还真不好说,依据不同的线路质量而定,但有总比没有好. 因为这次用的是 openvz 平台,所以找了一个网上的 ovz 专用的 BBR 一键安装代 ...

  8. L1-008 求整数段和

    给定两个整数A和B,输出从A到B的所有整数以及这些数的和. 输入格式: 输入在一行中给出2个整数A和B,其中−,其间以空格分隔. 输出格式: 首先顺序输出从A到B的所有整数,每5个数字占一行,每个数字 ...

  9. L1-005 考试座位号

    每个 PAT 考生在参加考试时都会被分配两个座位号,一个是试机座位,一个是考试座位.正常情况下,考生在入场时先得到试机座位号码,入座进入试机状态后,系统会显示该考生的考试座位号码,考试时考生需要换到考 ...

  10. 玩转X-CTR100 l STM32F4 l W25Q64 SPI串行FLASH存储

    我造轮子,你造车,创客一起造起来!塔克创新资讯[塔克社区 www.xtark.cn ][塔克博客 www.cnblogs.com/xtark/ ]      本文介绍X-CTR100控制器 板载FLA ...