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

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

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

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <html>
  3. 	<head>
  4. 		<title>年月日三级联动（默认显示系统时间）</title>
  5. 		<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
  6. 		<script type="text/javascript">
  7. 			function removeChilds(id){
  8. 				var childs = document.getElementById(id).childNodes;//这一行代码和紧跟的以下的for循环用于清除原来日的下拉列表的select中的对节点
  9. 				for(var i=childs.length-1;i>=0;i--) {
  10. 					document.getElementById(id).removeChild(childs[i]);
  11. 				}
  12. 			}
  13. 			function setDay(){
  14. 				var yearToDate=document.getElementById("year").value;
  15. 				var monthToDate=document.getElementById("month").value;
  16. 				//alert(yearToDate+":"+monthToDate);
  17. 				var days=new Array(28,29,30,31);
  18. 				var nowDate=new Date();
  19. 				if(monthToDate==1||monthToDate==3||monthToDate==5||monthToDate==7||monthToDate==8||monthToDate==10||monthToDate==12){
  20. 					removeChilds("day");
  21. 					for( i=1; i<=days[3]; i++ ){
  22. 						if(yearToDate==nowDate.getFullYear()&&monthToDate==(nowDate.getMonth()+1)&&i==nowDate.getDate()){//假设是当前系统时间则设置默认的日
  23. 							var newOption = document.createElement("option");newOption.setAttribute("value",i);newOption.setAttribute("selected","selected");
  24. 							var textToNewOption=document.createTextNode(i);newOption.appendChild(textToNewOption);
  25. 							document.getElementById("day").appendChild(newOption);
  26. 						}else{
  27. 							var newOption = document.createElement("option");newOption.setAttribute("value",i);
  28. 							var textToNewOption=document.createTextNode(i);newOption.appendChild(textToNewOption);
  29. 							document.getElementById("day").appendChild(newOption);
  30. 						}
  31. 					}
  32. 				}
  33. 				if(monthToDate==4||monthToDate==6||monthToDate==9||monthToDate==11){
  34. 					removeChilds("day");
  35. 					for( i=1; i<=days[2]; i++ ){
  36. 						if(yearToDate==nowDate.getFullYear()&&monthToDate==(nowDate.getMonth()+1)&&i==nowDate.getDate()){//假设是当前系统时间则设置默认的日
  37. 							var newOption = document.createElement("option");newOption.setAttribute("value",i);newOption.setAttribute("selected","selected");
  38. 							var textToNewOption=document.createTextNode(i);newOption.appendChild(textToNewOption);
  39. 							document.getElementById("day").appendChild(newOption);
  40. 						}else{
  41. 							var newOption = document.createElement("option");newOption.setAttribute("value",i);
  42. 							var textToNewOption=document.createTextNode(i);newOption.appendChild(textToNewOption);
  43. 							document.getElementById("day").appendChild(newOption);
  44. 						}
  45. 					}
  46. 				}
  47. 				if(monthToDate==2){
  48. 					removeChilds("day");
  49. 					if(yearToDate%400==0||yearToDate%100!=0&&yearToDate%4==0){//闰年
  50. 						for( i=1; i<=days[1]; i++ ){
  51. 							if(yearToDate==nowDate.getFullYear()&&monthToDate==(nowDate.getMonth()+1)&&i==nowDate.getDate()){//假设是当前系统时间则设置默认的日
  52. 								var newOption = document.createElement("option");newOption.setAttribute("value",i);newOption.setAttribute("selected","selected");
  53. 								var textToNewOption=document.createTextNode(i);newOption.appendChild(textToNewOption);
  54. 								document.getElementById("day").appendChild(newOption);
  55. 							}else{
  56. 								var newOption = document.createElement("option");newOption.setAttribute("value",i);
  57. 								var textToNewOption=document.createTextNode(i);newOption.appendChild(textToNewOption);
  58. 								document.getElementById("day").appendChild(newOption);
  59. 							}
  60. 						}
  61. 					}
  62. 					else{
  63. 						for( i=1; i<=days[0]; i++ ){
  64. 							if(yearToDate==nowDate.getFullYear()&&monthToDate==(nowDate.getMonth()+1)&&i==nowDate.getDate()){//假设是当前系统时间则设置默认的日
  65. 								var newOption = document.createElement("option");newOption.setAttribute("value",i);newOption.setAttribute("selected","selected");
  66. 								var textToNewOption=document.createTextNode(i);newOption.appendChild(textToNewOption);
  67. 								document.getElementById("day").appendChild(newOption);
  68. 							}else{
  69. 								var newOption = document.createElement("option");newOption.setAttribute("value",i);
  70. 								var textToNewOption=document.createTextNode(i);newOption.appendChild(textToNewOption);
  71. 								document.getElementById("day").appendChild(newOption);
  72. 							}
  73. 						}
  74. 					}
  75. 				}
  76. 			}
  77. 			function getMonth(){
  78. 				var m;
  79. 				for(m=1;m<=12;m++) {
  80. 					if((new Date().getMonth()+1)==m){
  81. 						document.write("<option value="+m+" selected=\"selected\">"+m+"</option>");
  82. 					}else{
  83. 						document.write("<option value="+m+">"+m+"</option>");
  84. 					}
  85. 				}
  86. 			}
  87. 			function getYear(){
  88. 				var y;
  89. 				var date=new Date();
  90. 				var fullYear=date.getFullYear();
  91. 				for(y=fullYear-60;y<=fullYear;y++){
  92. 					if(y==fullYear){
  93. 						document.write("<option value="+y+" selected=\"selected\">"+y+"</option>");
  94. 					}else{
  95. 						document.write("<option value="+y+" >"+y+"</option>");
  96. 					}
  97. 				}
  98. 			}
  99. 		</script>
  100. 	</head>
  101. 	<body>
  102. 		<select name="year" id="year" onChange="setDay();"><script type="text/javascript">getYear();</script></select>年
  103. 		<select name="month" id="month" onChange="setDay()"><script type="text/javascript">getMonth();</script></select>月
  104. 		<select name="day" id="day"><script type="text/javascript">setDay();<!--起到初始化日的作用。
  106. --></script></select>日
  107. 	</body>
  108. </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. Confluence 6 使用 LDAP 授权连接一个内部目录 - 高级设置

    ted Groups 为嵌套组启用或禁用支持. 一些目录服务器能够允许你在一个组中定义另外一个组.在这种结构下的用户组称为用户组嵌套.嵌套组的配置能够让子用户组继承上级用户组的权限,是系统的权限配置变 ...

  2. AC自动机技巧

    AC自动机技巧 可以用树上的一些算法来进行优化 对于要求支持插入和删除字符串的题目,可以通过建两个AC自动机,查询的时候作差来实现. 当给出的查询串是一个含有空格的文本时,可以用特殊字符(比如'z'+ ...

  3. hdu-2227-dp+bit

    Find the nondecreasing subsequences Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 32768/3 ...

  4. oaf 动态创建table vo (转)

    原文地址:如何动态创建table 需求: 因为系统中有几千个QA plan 但是不能手动创建几千个 质量收集页面所有需要根据 不同的plan 动态创建对应的 质量收集页面. 但是创建tabel 都要绑 ...

  5. zookeeper server处理客户端命令的流程

    zk server处理命令涉及到3个类,2个线程:一个命令请求先后经过PrepRequestProcessor,SyncRequestProcessor,FinalRequestProcessor. ...

  6. xrat CC特征

    ["6", 11818669.0, 8326.0, 599.75, 19705.992496873696, 13.882451021258857, 0.07203338938265 ...

  7. Vysor安装图解

    Vysor安装图解   11 准备东西       路径 C:\Users\Administrator\AppData\Local\Google\Chrome\User Data\Default   ...

  8. snagit12个人爱好

  9. 各种格式的压缩包解压，7zip 命令行

    由于7z.exe所在路径,以及解压目录中可能包含中文特殊字符,导致解压失败,所以最好将各部分路径使用双引号包含起来. 如:CString str; str.Format(L"\"% ...

  10. UVALIve 5987 素数

    题目链接:Distinct Primes 如果一个数.至少有三个因子是素数..那么这个数就是prime num.30和42是前两个prime num.问你第n个这种数是谁.(1<=n<=1 ...