在制作网页时,可能需要给用户提供注册帐号页面,用户注册设计很多信息,其中就有关于出生日期的,出于用户体验,不想让用户手动输入,而HTML5的日期,目前很多浏览器支持的并不是很好,所以就可以用JS实现的年,月,日三个下拉框的日期选择。具体代码如下:
函数DateSelector (selYear selMonth selDay){//定义函数
这一点。selYear=selYear;
这一点。selMonth=selMonth;
这一点。selDay=selDay;
this.selYear。组=;
this.selMonth。组=;//给年份,月份下拉菜单添加处理onchange事件的函数
如果(window.document。!=null)//IE
{
this.selYear。attachEvent (“onchange”, DateSelector.Onchange);
this.selMonth。attachEvent (“onchange”, DateSelector.Onchange);
}//其他Firefox
{
this.selYear。addEventListener (DateSelector“改变”。Onchange、假);
this.selMonth。addEventListener (DateSelector“改变”。Onchange、假);
}
如果参数。长度==4)//如果传入参数个数为4,最后一个参数必须为日期对象
this.InitSelector(参数[3].getFullYear(),参数[3].getMonth() + 1,参数[3].getDate ());
else if(参数。长度==6)//如果传入参数个数为6,最后三个参数必须为初始的年月日数的值
这一点。InitSelector(参数[3],[4]论点,论点[5]);//其他默认使用当前日期
{
var dt=新的日期();
this.InitSelector (dt.getFullYear (), dt.getMonth () + 1, dt.getDate ());
}
}//增加一个最小年份的属性——最老年份
DateSelector.prototype。MinYear=1960;//增加一个最大年份的属性——最新年份,即当前时期getFullYear ()
DateSelector.prototype。MaxYear=(新日期()).getFullYear ();//初始化年份
DateSelector.prototype。InitYearSelect=function () {//循环添加见解元素到年份选择对象中
我对(var=this.MaxYear;我在=this.MinYear;我(){//新建一个选项对象
var op=window.document.createElement(“选项”);//设置选项对象的值
op.value=https://www.yisu.com/zixun/i;//设置选项对象的内容
op.innerHTML=我;//添加到年份选择对象
this.selYear.appendChild (op);
}
}//初始化月份
DateSelector.prototype。InitMonthSelect=function () {//循环添加见解元素到月份选择对象中
(var i=1;我<13;我+ +){//新建一个选项对象
var op=window.document.createElement(“选项”);//设置选项对象的值
op.value=https://www.yisu.com/zixun/i;//设置选项对象的内容
op.innerHTML=我;//添加到月份选择对象
this.selMonth.appendChild (op);
}
}//根据年份与月份获取当月的天数
DateSelector。DaysInMonth=函数(年、月){
var=new日期(年、月,0);
返回date.getDate ();
}//初始化天数
DateSelector.prototype。InitDaySelect=function () {//使用方法函数获取当前的年份和月份
var年=方法(this.selYear.value);
var月=方法(this.selMonth.value);//获取当月的天数
var daysInMonth=DateSelector。DaysInMonth(年、月);//清空原有的选项
this.selDay.options。长度=0;//循环添加见解元素到天数选择对象中
(var i=1;我<=daysInMonth;我+ +){//新建一个选项对象
var op=window.document.createElement(“选项”);//设置选项对象的值
op.value=https://www.yisu.com/zixun/i;//设置选项对象的内容
op.innerHTML=我;//添加到天数选择对象
this.selDay.appendChild (op);
}
}//处理年份和月份onchange事件的方法,它获取事件来源对象(即selYear或selMonth)//并调用它的组对象(即DateSelector实例,请见构造函数)提供的InitDaySelect方法重新初始化天数//参数e为事件对象
DateSelector。Onchange=function (e) {
var选择器=window.document。!=零?e。srcElement: e。target;
selector.Group.InitDaySelect ();
}//根据参数初始化下拉菜单选项
DateSelector.prototype。InitSelector=函数(年、月、日){//由于外部是可以调用这个方法,因此我们在这里也要将selYear和selMonth的选项清空掉//另外因为InitDaySelect方法已经有清空天数下拉菜单,因此这里就不用重复工作了
this.selYear.options。长度=0;
this.selMonth.options。长度=0;//初始化年,月
this.InitYearSelect ();
this.InitMonthSelect ();//设置年、月初始值
this.selYear。selectedIndex=axYear年;
this.selMonth。selectedIndex=月- 1;//初始化天数
this.InitDaySelect ();//设置天数初始值
this.selDay。selectedIndex=- 1天;
}
2,在注册表单中的页面,引用刚才写的js
