|
好了，天數(shù)的算法也解決了，那么我們可以輕松寫出一個InitDaySelect方法來初始化天數(shù)了，在這個方法里要根據(jù)當(dāng)前年份下拉菜單和月份下拉菜單的值算出該月的天數(shù)，由于天數(shù)是變動的，因此我們在該方法里也可事先清空天數(shù)下拉菜單的內(nèi)容。
<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();
this.InitDaySelect();
}
// 增加一個最大年份的屬性
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ù)年份與月份獲取當(dāng)月的天數(shù)
DateSelector.DaysInMonth = function(year, month)
{
var date = new Date(year, month, 0);
return date.getDate();
}
// 初始化天數(shù)
DateSelector.prototype.InitDaySelect = function()
{
// 使用parseInt函數(shù)獲取當(dāng)前的年份和月份
var year = parseInt(this.selYear.value);
var month = parseInt(this.selMonth.value);
// 獲取當(dāng)月的天數(shù)
var daysInMonth = DateSelector.DaysInMonth(year, month);
// 清空原有的選項
this.selDay.options.length = 0;
// 循環(huán)添加OPION元素到天數(shù)select對象中
for(var i = 1; i <= daysInMonth ; i++)
{
// 新建一個OPTION對象
var op = window.document.createElement("OPTION");
// 設(shè)置OPTION對象的值
op.value = i;
// 設(shè)置OPTION對象的內(nèi)容
op.innerHTML = i;
// 添加到天數(shù)select對象
this.selDay.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>
現(xiàn)在已經(jīng)寫好幾個方法用來初始化三個下拉菜單的選項了，我們需要做的是讓它們結(jié)合并動起來。如果年份或月份有變動，那么應(yīng)該重新計算天數(shù)并且重新初始化天數(shù)，這可以通過selYear和selMonth的onchange來實現(xiàn)。由于這三個下拉菜單是要緊密聯(lián)動的，因此特地給它們增加一個屬性Selector，值為當(dāng)前的DateSelector實例。同時實現(xiàn)selYear和selMonth的onchange，如果發(fā)生onchange則調(diào)用InitDaySelect重新初始化selDay下拉菜單。
<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();
this.InitDaySelect();
this.selYear.Group = this;
this.selMonth.Group = this;
// 給年份、月份下拉菜單添加處理onchange事件的函數(shù)
if(window.document.all != null) // IE
{
this.selYear.attachEvent("onchange", DateSelector.Onchange);
this.selMonth.attachEvent("onchange", DateSelector.Onchange);
}
else // Firefox
{
this.selYear.addEventListener("change", DateSelector.Onchange, false);
this.selMonth.addEventListener("change", DateSelector.Onchange, false);
}
}
// 增加一個最大年份的屬性
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ù)年份與月份獲取當(dāng)月的天數(shù)
DateSelector.DaysInMonth = function(year, month)
{
var date = new Date(year, month, 0);
return date.getDate();
}
// 初始化天數(shù)
DateSelector.prototype.InitDaySelect = function()
{
// 使用parseInt函數(shù)獲取當(dāng)前的年份和月份
var year = parseInt(this.selYear.value);
var month = parseInt(this.selMonth.value);
// 獲取當(dāng)月的天數(shù)
var daysInMonth = DateSelector.DaysInMonth(year, month);
// 清空原有的選項
this.selDay.options.length = 0;
// 循環(huán)添加OPION元素到天數(shù)select對象中
for(var i = 1; i <= daysInMonth ; i++)
{
// 新建一個OPTION對象
var op = window.document.createElement("OPTION");
// 設(shè)置OPTION對象的值
op.value = i;
// 設(shè)置OPTION對象的內(nèi)容
op.innerHTML = i;
// 添加到天數(shù)select對象
this.selDay.appendChild(op);
}
}
// 處理年份和月份onchange事件的方法，它獲取事件來源對象（即selYear或selMonth）
// 并調(diào)用它的Group對象（即DateSelector實例，請見構(gòu)造函數(shù)）提供的InitDaySelect方法重新初始化天數(shù)
// 參數(shù)e為event對象
DateSelector.Onchange = function(e)
{
var selector = window.document.all != null ? e.srcElement : e.target;
selector.Group.InitDaySelect();
}
</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>
出處：藍色理想
責(zé)任編輯：moby
上一頁 實現(xiàn)一個日期下拉菜單 [1] 下一頁 實現(xiàn)一個日期下拉菜單 [3]
◎進入論壇網(wǎng)頁制作、網(wǎng)站綜合版塊參加討論
|
第 1 頁 
第 2 頁 實現(xiàn)一個日期下拉菜單 [2]
