本文的主要目的是弄清楚如何實現鏈接菜單以及根據實際需要鏈接菜單的原理. 一個示例是實現日期選擇下拉菜單. 本文的調試環境是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