|
這篇文章的主旨是弄清楚如何根據(jù)實際需求實現(xiàn)一個聯(lián)動菜單以及聯(lián)動菜單的原理，實例是實現(xiàn)一個日期選擇下拉菜單。本文調(diào)試環(huán)境為IE6/firefox1.5。
首先來分析一下日期下拉菜單的需求。建議大家在寫任何程序的時候都應該在動手編程之前想清楚自己需要些什么，這樣編程才有效率。
年份： 一般來說有一個有效年份，比如說1900年至當前年份才是為效的，這個要根據(jù)實際需求來確定，如果是該下拉菜單是用來選擇出生年月日還得把最大的年份減到一定的數(shù)目，如果有人的生日選擇了2005年（即當前的年份），那是不正常的。
月份：沒有什么特殊需求，不管是哪一年都是有十二個月。
天數(shù)：每個月的天數(shù)都可能是不定的，當然這可以根據(jù)一定的算法求出來，而它的根據(jù)就是當前選擇的年份和月份。月份都有一個固定的天數(shù)，即一、三、五、七、八、十、十二月是三十一天，而四、六、九、十一月是三十天，二月份要根據(jù)當年是否為閏年判斷是二十八天還是二十九天。求當月的天數(shù)我提出一個比較簡單的算法，可以只根據(jù)當前的年份和月份就可以求出當月的天數(shù)，這會在后邊講一講思路并將其實現(xiàn)。
好了，現(xiàn)在我們來具體實現(xiàn)這個日期聯(lián)動下拉菜單。
聯(lián)動下拉菜單是以兩個或多個select元素為單位的，為了讓這些菜單更多緊密的工作，我們可以實現(xiàn)一個類用來管理它們的初始化、事件，在這里就使用DateSelector為類名，它有三個屬性，分別為年、月、日的下拉菜單，而這三個select元素是由構(gòu)造函數(shù)的參數(shù)傳進來的，另外為了更靈活地使用它，我們還可以再給DateSelector類的構(gòu)造函數(shù)增加一個（Date對象）或三個參數(shù)(int數(shù)值)，表示初始化的年月日。由于參數(shù)個數(shù)不定，我們可以不將另外增加的參數(shù)寫入?yún)?shù)表里，而是在運行時判斷arguments對象的length屬性來執(zhí)行不同的操作。arguments對象存儲了當前函數(shù)的參數(shù)信息，可以查閱一下相關(guān)的資料比如說《Windows腳本技術(shù)》。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>如何實現(xiàn)一個日期下拉菜單</title>
<script type="text/javascript">
function DateSelector(selYear, selMonth, selDay)
{
this.selYear = selYear;
this.selMonth = selMonth;
this.selDay = selDay;
}
</script>
</head>
<body>
</body>
</html>
接下來開始對聯(lián)動菜單進行初始化，首先是年份，我們可以給類增加一個MinYear屬性表示最小的年份，再增加一個MaxYear表示最大的年份，實現(xiàn)一個InitYearSelect方法初始化年份，實現(xiàn)一個InitMonthSelect方法初始化月份。由于這幾個屬性和方法的思路都是很簡單，就不一一講解，看看代碼是怎么寫的應該就能夠明白，如果對類方面有不清楚有地方可以參考我發(fā)表在無憂腳本另一篇文章《由淺到深了解JavaScript類》。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>如何實現(xiàn)一個日期下拉菜單</title>
<script type="text/javascript">
function 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()
{
// 循環(huán)添加OPION元素到年份select對象中
for(var i = this.MaxYear; i >= this.MinYear; i--)
{
// 新建一個OPTION對象
var op = window.document.createElement("OPTION");
// 設(shè)置OPTION對象的值
op.value = i;
// 設(shè)置OPTION對象的內(nèi)容
op.innerHTML = i;
// 添加到年份select對象
this.selYear.appendChild(op);
}
}
// 初始化月份
DateSelector.prototype.InitMonthSelect = function()
{
// 循環(huán)添加OPION元素到月份select對象中
for(var i = 1; i < 13; i++)
{
// 新建一個OPTION對象
var op = window.document.createElement("OPTION");
// 設(shè)置OPTION對象的值
op.value = i;
// 設(shè)置OPTION對象的內(nèi)容
op.innerHTML = i;
// 添加到月份select對象
this.selMonth.appendChild(op);
}
}
</script>
</head>
<body>
<select id="selYear"></select>
<select id="selMonth"></select>
<select id="selDay"></select>
<script type="text/javascript">
var selYear = window.document.getElementById("selYear");
var selMonth = window.document.getElementById("selMonth");
var selDay = window.document.getElementById("selDay");
// 新建一個DateSelector類的實例，將三個select對象傳進去
new DateSelector(selYear, selMonth ,selDay);
</script>
</body>
</html>
接下來要對天數(shù)進行初始化了，前邊有說過天數(shù)是不定的，那要如何準確求出它的天數(shù)呢？我們稍加分析就知道每個月的最后一天就是該月的天數(shù)，相當于下一個月的第一天的前一天，比如說我們要求2005年11月的天數(shù)，那我們只需要得到2005年12月一日的前一天即可得到2005年11月最后一天�？梢越oDateSelector添加一個方法DaysInMonth來實現(xiàn)該功能。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>如何實現(xiàn)一個日期下拉菜單</title>
<script type="text/javascript">
function 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()
{
// 循環(huán)添加OPION元素到年份select對象中
for(var i = this.MaxYear; i >= this.MinYear; i--)
{
// 新建一個OPTION對象
var op = window.document.createElement("OPTION");
// 設(shè)置OPTION對象的值
op.value = i;
// 設(shè)置OPTION對象的內(nèi)容
op.innerHTML = i;
// 添加到年份select對象
this.selYear.appendChild(op);
}
}
// 初始化月份
DateSelector.prototype.InitMonthSelect = function()
{
// 循環(huán)添加OPION元素到月份select對象中
for(var i = 1; i < 13; i++)
{
// 新建一個OPTION對象
var op = window.document.createElement("OPTION");
// 設(shè)置OPTION對象的值
op.value = i;
// 設(shè)置OPTION對象的內(nèi)容
op.innerHTML = i;
// 添加到月份select對象
this.selMonth.appendChild(op);
}
}
// 根據(jù)年份與月份獲取當月的天數(shù)
DateSelector.DaysInMonth = function(year, month)
{
var date = new Date(year, month, 0);
return date.getDate();
}
</script>
</head>
<body>
<select id="selYear"></select>
<select id="selMonth"></select>
<select id="selDay"></select>
<script type="text/javascript">
var selYear = window.document.getElementById("selYear");
var selMonth = window.document.getElementById("selMonth");
var selDay = window.document.getElementById("selDay");
// 新建一個DateSelector類的實例，將三個select對象傳進去
new DateSelector(selYear, selMonth ,selDay);
alert("2004年2月的天數(shù)為" + DateSelector.DaysInMonth(2004, 2));
alert("2005年2月的天數(shù)為" + DateSelector.DaysInMonth(2005, 2));
</script>
</body>
</html>
很明顯，這種方法根本不需要考慮到該年份是否為閏年就可以輕松求出指定月的天數(shù)。另外，有些網(wǎng)友可能會對“var date = new Date(year, month, 0);”這句代碼覺得奇怪，傳入的是2005,2,0，這看起來似乎是求二月份第一天的前一天即一月份的最后一天，為什么還會得到二月份的天數(shù)？這里必須說明一天，JavaScript的Date對象里的月份是由0開始到11結(jié)束，也就是說0表示一月，2表示三月，所以就有這種錯覺，在使用JavaScript的Date對象時要特別注意這一點。
出處：藍色理想
責任編輯：moby
上一頁 下一頁 實現(xiàn)一個日期下拉菜單 [2]
◎進入論壇網(wǎng)頁制作、網(wǎng)站綜合版塊參加討論
|
第 1 頁 實現(xiàn)一個日期下拉菜單 [1]
第 2 頁 
