实施日期下拉菜单

本文的主要目的是弄清楚如何实现链接菜单以及根据实际需要链接菜单的原理. 一个示例是实现日期选择下拉菜单. 本文的调试环境是IE6 / firefox1.5.

首先，让我们分析一下日期下拉菜单的需求. 建议在编写任何程序时，在开始编程之前应清楚考虑所需的内容，以使编程高效.

年份: 通常来说，有一个有效的年份. 例如，到当前年份的1900年有效. 这应根据实际需要确定. 如果使用下拉菜单选择出生年份，月份和日期，则最大年份将减少到一定数目. 如果有人选择2005年（当前年）作为生日，这是不正常的.

月: 哪一年有十二个月，都没有特殊需要.

天数: 每个月中的天数可能不确定. 当然，这可以根据某种算法来计算，并且基于当前选择的年份和月份. 月有固定的天数，即1月，3月，5、7、8、10、12月是31天，4月，6月，9月和11月是30天. 2月基于当前年份. 无论是a年，都要判断是28天还是29天. 找到当月的天数，我提出了一个相对简单的算法. 您只能根据当年和月份来查找当月的天数. 稍后将说明并实施.

好吧，现在让我们实现日期链接下拉菜单.

链接下拉菜单基于两个或多个选择元素. 为了使这些菜单更紧密地工作，我们可以实现一个类来管理它们的初始化和事件. 这里我们使用DateSelector作为类Name，它具有三个属性，即年，月和日下拉菜单，并且这三个选择元素由构造函数的参数传递，以便更灵活地使用它，我们还可以给DateSelector类构造函数添加一个（Date对象）或三个参数（int值）以指示初始化的年，月和日. 由于参数的数量不确定，因此我们无法在参数表中写入其他参数，而是在运行时判断arguments对象的length属性以执行不同的操作. arguments对象存储当前函数的参数信息. 您可以检查相关信息，例如“ Windows脚本技术”.

如何实现日期下拉菜单

函数DateSelector（selYear，selMonth，selDay）

{

this.selYear = selYear;

this.selMonth = selMonth;

this.selDay = selDay;

}

接下来，开始初始化链接菜单. 第一是年份. 我们可以在类中添加MinYear属性以指示最小的年份，然后添加MaxYear以指示最大的年份，实现InitYearSelect方法以初始化年份，并实现InitMonthSelect方法以初始化月份. 由于这些属性和方法的思想非常简单，因此我不会一一解释. 通过查看代码的编写方式，您应该能够理解. 如果您不清楚该类，则可以使用无忧脚本来查阅我的出版物. 文章“从浅到深理解JavaScript类”.

如何实现日期下拉菜单

函数DateSelector（selYear，selMonthjs日期下拉菜单，selDay）

{

this.selYear = selYear;

this.selMonth = selMonth;

this.selDay = selDay;

this.InitYearSelect（）;

this.InitMonthSelect（）;

}

//添加最大年份属性

DateSelector.prototype.MinYear = 1900;

//添加最大年份属性

DateSelector.prototype.MaxYear =（new Date（））. getFullYear（）;

//初始化年份

DateSelector.prototype.InitYearSelect = function（）

{

//周期性地将OPION元素添加到年份选择对象中

for（var i = this.MaxYear; i> = this.MinYear; i-）

{

//创建一个新的OPTION对象

var op = window.document.createElement（“ OPTION”）;

//设置OPTION对象的值

op.value = i;

//设置OPTION对象的内容

op.innerHTML = i;

//添加到年份选择对象

this.selYear.appendChild（op）;

}

}

//初始化月份

DateSelector.prototype.InitMonthSelect = function（）

{

//周期性地将OPION元素添加到月份选择对象

for（var i = 1; i

{

//创建一个新的OPTION对象

var op = window.document.createElement（“ OPTION”）;

//设置OPTION对象的值

op.value = i;

//设置OPTION对象的内容

op.innerHTML = i;

//添加到月份选择对象

this.selMonth.appendChild（op）;

}

}

var selYear = window.document.getElementById（“ selYear”）;

var selMonth = window.document.getElementById（“ selMonth”）;

var selDay = window.document.getElementById（“ selDay”）;

//创建DateSelector类的新实例并传入三个选择对象

新的DateSelector（selYear，selMonth，selDay）;

接下来，我们需要初始化天数. 我说天数是不确定的，那么我们如何准确地找到天数呢？经过一点分析，我们知道每个月的最后一天就是该月中的天数，它等于下个月第一天的前一天. 例如，如果我们需要2005年11月的天数，那么我们只需要获取2005年的天数. 该月第一天的前一天将是2005年11月的最后一天. 您可以添加一个方法DaysInMonth到DateSelector来实现此功能.

如何实现日期下拉菜单

函数DateSelector（selYear，selMonth，selDay）

{

this.selYear = selYear;

this.selMonth = selMonth;

this.selDay = selDay;

this.InitYearSelect（）;

this.InitMonthSelect（）;

}

//添加最大年份属性

DateSelector.prototype.MinYear = 1900;

//添加最大年份属性

DateSelector.prototype.MaxYear =（new Date（））. getFullYear（）;

//初始化年份

DateSelector.prototype.InitYearSelect = function（）

{

//周期性地将OPION元素添加到年份选择对象中

for（var i = this.MaxYear; i> = this.MinYear; i-）

{

//创建一个新的OPTION对象

var op = window.document.createElement（“ OPTION”）;

//设置OPTION对象的值

op.value = i;

//设置OPTION对象的内容

op.innerHTML = i;

//添加到年份选择对象

this.selYear.appendChild（op）;

}

}

//初始化月份

DateSelector.prototype.InitMonthSelect = function（）

{

//周期性地将OPION元素添加到月份选择对象

for（var i = 1; i

{

//创建一个新的OPTION对象

var op = window.document.createElement（“ OPTION”）;

//设置OPTION对象的值

op.value = i;

//设置OPTION对象的内容

op.innerHTML = i;

//添加到月份选择对象

this.selMonth.appendChild（op）;

}

}

//根据年份和月份获取月份中的天数

DateSelector.DaysInMonth =函数（年，月）

{

var date = new Date（year，month，0）;

返回date.getDate（）;

}

var selYear = window.document.getElementById（“ selYear”）;

var selMonth = window.document.getElementById（“ selMonth”）;

var selDay = window.document.getElementById（“ selDay”）;

//创建DateSelector类的新实例并传入三个选择对象

新的DateSelector（selYear，selMonth，selDay）;

alert（“ 2004年2月的天数为” + DateSelector.DaysInMonth（2004，2））;

alert（“ 2005年2月的天数为” + DateSelector.DaysInMonth（2005js日期下拉菜单，2））;

显然，此方法可以轻松地找到指定月份中的天数，而无需考虑年份是否是is年. 另外，一些网民可能对代码“ var date = new Date（year，month，0）;”感到陌生. 传入的代码是2005、2、0，这似乎是2月1日. 前一天是一月的最后一天. 为什么您仍然获得2月的天数？这里必须指出，JavaScript Date对象中的月份从0到11开始，这意味着0表示一月，2表示三月，所以有这种错觉. 使用JavaScript Date对象时要特别注意. 此时.

来源: Blue Ideal

本文来自本站，转载请注明本文网址：
http://www.pc-fly.com/a/jisuanjixue/article-288281-1.html