码迷,mamicode.com
首页 > Web开发 > 详细

学习日记之JS时间联动框

时间:2015-06-02 21:35:01      阅读:135      评论:0      收藏:0      [点我收藏+]

标签:

今天学习了JS的时间联动框。

HTML代码:

<body onload="initYear(document.employeetable.year)">
<fieldset >
<legend>员工表</legend>
<form name="employeetable">

<select name="year"     onchange="initMonth(document.employeetable.month,document.employeetable.day)"/>
	<option value="">&nbsp;&nbsp;&nbsp;年</option>
</select>
<select name="month" onchange="initDay(document.employeetable.year,document.employeetable.month,document.employeetable.day)">
	<option value="">&nbsp;月</option>
</select>
<select name="day">
    <option value="">&nbsp;日</option>
</select>
    
</form>
</fieldset>	                        

JS代码

<SCRIPT type="text/javascript">
		<!-- 对年进行初始化//-->	
		function initYear(year){
			var newYear=new Date().getFullYear();
			for(var i=newYear+3;i>=newYear-10;i--){
				year.options.add(new Option(i,i));
			}
		}
		<!-- 对月进行初始化//-->
		function initMonth(month,day){
			month.options.length=1;<!--清空月//-->
			day.options.length=1;<!--清空日//-->
			for(var j=1;j<=12;j++){
				month.options.add(new Option(j,j));
			} 
		}
		<!-- 对日进行初始化//--> 
		function initDay(year,month,day){
			var yearValue=year.value;
			var monthValue=month.value;
			var dayValue;
			day.options.length=1;<!--清空日//-->
			<!-- 判断出该月份下有多少天//-->
			if(monthValue==4||monthValue==6||monthValue==9||monthValue==11){
				dayValue=30;
			}else if(monthValue==2){
				if(yearValue%4==0&&(yearValue%100!=0||yearValue%400==0)){
					dayValue=29;
				}else{
					dayValue=28;
				}
			}else{
				dayValue=31;	
			}
			for(var i=1;i<=dayValue;i++){
				day.options.add(new Option(i,i));
			}
		}
	
</SCRIPT>

  至此,整个时间联动框完成了!

学习日记之JS时间联动框

标签:

原文地址:http://www.cnblogs.com/xiaoweihaha/p/4547634.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!