zoukankan      html  css  js  c++  java
  • 关于时间的操作(JavaScript版)——年月日三级级联(默认依次显示请选择年、请选择月和请选择日)

            这篇博客和前一篇博客基本同样,仅仅是显示的默认值不同:

    <!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);
    				if(yearToDate==0||monthToDate==0){//假设是当前系统时间则设置默认的日
    					var newOption = document.createElement("option");newOption.setAttribute("value",0);newOption.setAttribute("selected","selected");
    					var textToNewOption=document.createTextNode("请选择日");newOption.appendChild(textToNewOption);
    					document.getElementById("day").appendChild(newOption);
    				}else{
    					if(monthToDate==1||monthToDate==3||monthToDate==5||monthToDate==7||monthToDate==8||monthToDate==10||monthToDate==12){
    						removeChilds("day");
    						for( i=1; i<=days[3]; i++ ){
    							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++ ){
    							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++ ){
    								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++ ){
    								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;
    				document.write("<option value=0 selected="selected">请选择月</option>");
    				for(m=1;m<=12;m++) {
    					document.write("<option value="+m+">"+m+"</option>");
    				}
    			}
    
    			function getYear(){
    				var y;
    				var date=new Date(); 
    				var fullYear=date.getFullYear();
    				document.write("<option value=0 selected="selected">请选择年</option>");
    				for(y=fullYear-60;y<=fullYear;y++){
    					document.write("<option value="+y+" >"+y+"</option>");
    				} 
    			}
    			function checkDay(){
    				var yearToDate=document.getElementById("year").value;
    				var monthToDate=document.getElementById("month").value;
    				if(yearToDate==0||monthToDate==0){
    					alert("请先选择年和日");
    				}
    			}
    		</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" onclick="checkDay()"></select>日<script type="text/javascript">setDay();<!--起到初始化日的作用。--></script>
    	</body>
    </html>

  • 相关阅读:
    Chrome浏览器扩展开发系列之三:Google Chrome浏览器扩展的架构
    Chrome浏览器扩展开发系列之一:初识Google Chrome扩展
    Chrome浏览器扩展开发系列之五:Page Action类型的Chrome浏览器扩展
    Chrome浏览器扩展开发系列之四:Browser Action类型的Chrome浏览器扩展
    鼠标定位问题总结
    Chrome浏览器扩展开发系列之八:Chrome扩展的数据存储
    Chrome浏览器扩展开发系列之七:override页面
    Chrome浏览器扩展开发系列之六:options 页面
    Chrome浏览器扩展开发系列之二:Google Chrome浏览器扩展的调试
    Chrome浏览器扩展开发系列之九:Chrome浏览器的chrome.alarms.* API
  • 原文地址:https://www.cnblogs.com/hrhguanli/p/3852904.html
Copyright © 2011-2022 走看看