年月日級聯效果詳解

admin發表於2018-11-30

分享一段程式碼例項，它實現了年月日級聯選單效果，在大量網站都有應用。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript"> 
function DateSelector(selYear, selMonth, selDay){ 
  this.selYear=selYear; 
  this.selMonth=selMonth; 
  this.selDay=selDay; 
  this.selYear.Group=this; 
  this.selMonth.Group=this; 
  if (window.document.all!=null){ 
    this.selYear.attachEvent("onchange",DateSelector.Onchange); 
    this.selMonth.attachEvent("onchange",DateSelector.Onchange); 
  } 
  else{ 
    this.selYear.addEventListener("change",DateSelector.Onchange,false); 
    this.selMonth.addEventListener("change",DateSelector.Onchange,false); 
  } 
  if(arguments.length==4){
   this.InitSelector(arguments[3].getFullYear(),arguments[3].getMonth()+1,arguments[3].getDate()) 
  } 
  else if(arguments.length == 6){
     this.InitSelector(arguments[3],arguments[4],arguments[5]); 
  } 
  else{ 
    var dt = new Date(); 
    this.InitSelector(dt.getFullYear(),dt.getMonth()+1,dt.getDate()); 
  } 
} 
DateSelector.prototype.MinYear=1900; 
DateSelector.prototype.MaxYear=(new Date()).getFullYear(); 
DateSelector.prototype.InitYearSelect=function (){ 
  for(var i=this.MaxYear;i>=this.MinYear;i--) { 
    var op=window.document.createElement("option"); 
    op.value=i; 
    op.innerHTML=i; 
    this.selYear.appendChild(op); 
  } 
} 
DateSelector.prototype.InitMonthSelect=function(){ 
  for (var i=1;i<13;i++){ 
    var op = window.document.createElement("OPTION"); 
    op.value = i; 
    op.innerHTML = i; 
    this.selMonth.appendChild(op); 
  } 
} 
DateSelector.DaysInMonth = function (year, month){ 
  var date=new Date(year,month,0); 
  return date.getDate(); 
}
DateSelector.prototype.InitDaySelect=function(){ 
  var year = parseInt(this.selYear.value); 
  var month = parseInt(this.selMonth.value); 
  var daysInMonth=DateSelector.DaysInMonth(year,month); 
  this.selDay.options.length=0; 
  for (var i=1;i<=daysInMonth;i++){ 
    var op = window.document.createElement("option"); 
    op.value = i; 
    op.innerHTML = i; 
    this.selDay.appendChild(op); 
  } 
} 
DateSelector.Onchange=function(e){ 
  var selector=window.document.all!=null?e.srcElement:e.target; 
  selector.Group.InitDaySelect(); 
} 
DateSelector.prototype.InitSelector=function (year,month,day){ 
  this.selYear.options.length = 0; 
  this.selMonth.options.length = 0; 
  this.InitYearSelect(); 
  this.InitMonthSelect(); 
  this.selYear.selectedIndex = this.MaxYear - year; 
  this.selMonth.selectedIndex = month - 1; 
  this.InitDaySelect(); 
  this.selDay.selectedIndex = day - 1; 
} 
window.onload=function(){
  var selYear = window.document.getElementById("selYear"); 
  var selMonth = window.document.getElementById("selMonth"); 
  var selDay = window.document.getElementById("selDay"); 
  new DateSelector(selYear,selMonth,selDay,2004,2,29);
}
</script> 
</head> 
<body> 
<select id="selYear"></select> 
<select id="selMonth"></select> 
<select id="selDay"></select>  
</body> 
</html>

一.實現原理:

看著程式碼很長，其實原理非常的簡單，初始化年份下拉選單的時候，規定一個最小年份和最大年份（這裡是當前的年費），然後通過for迴圈進行初始化，月份的也是如此，只有天的select下拉選單稍稍有點麻煩，因為每月的天數都不一樣，或者每年的同一個月天數也不一樣，需要通過當前選中的年費和月份來確定天的select下拉選單的內容，其實也很簡單，這裡不介紹了，結合註釋應該是可以理解的，也可以跟帖留言。

二.程式碼註釋:

（1）.function DateSelector(selYear,selMonth,selDay){}，宣告一個函式用來完成年月日級聯操作。更準確的說這裡用作建構函式來建立一個物件例項，因為這裡使用了物件導向的方式。此函式具有三個引數，分別用來傳遞三個select下拉框物件。特別說明:函式規定的引數個數和實際傳遞的引數無需一致。

（2）.this.selYear=selYear，將年份select下拉選單物件的引用賦值給this.selYear。

（3）.this.selMonth=selMonth，將月份select下拉選單物件的引用賦值給this.selMonth。

（4）.this.selDay=selDay，將天的select下拉選單物件的引用賦值給this.selDay。

（5）.this.selYear.Group=this，當建立物件例項時，this會指向此例項，這裡是將此例項的引用賦值給this.selYear.Group。

（6）.this.selMonth.Group=this，將例項的引用賦值給this.selMonth.Group。

（7）.if(document.all!=null),用來判斷是否是IE8或者IE8以下瀏覽器。

（8）.this.selYear.attachEvent("onchange",DateSelector.Onchange)，為年份select下拉選單註冊onchange事件處理函式。

（9）.this.selMonth.attachEvent("onchange",DateSelector.Onchange)，為月份select下拉選單註冊onchange事件處理函式。

（10）.else{},else語句中的程式碼是標準瀏覽器註冊事件處理函式的方式，和8、9兩句的功能是一樣的。

（11）.if(arguments.length==4)，判斷函式實際傳遞的引數是否為4個，如果是四個的話，最後一個必須是一個Date物件。

（12）.this.InitSelector(arguments[3].getFullYear(),arguments[3].getMonth()+1,arguments[3].getDate())，執行InitSelector()函式。為此傳遞三個引數，是為DateSelector()函式傳遞的Date物件的年、月、日。

（13）.else if(arguments.length==6)，判斷為DateSelector()函式傳遞的引數個數是否為6個。

（14）.this.InitSelector(arguments[3],arguments[4],arguments[5])，執行InitSelector()函式。為此函式傳遞三個引數，分別是為DateSelector()函式傳遞的最後三個引數。

（15）.else{}，如果是其他情況則以當前時間點作為時間物件，然後執行InitSelector()函式並傳遞相關引數。

（16）.DateSelector.prototype.MinYear=1900，規定年份下拉選單的最小值為1900年。

（17）.DateSelector.prototype.MaxYear=(new Date()).getFullYear()，規定年份下拉選單的最小值為當前年份。

（18）.DateSelector.prototype.InitYearSelect=function(){}，宣告一個函式用於初始化年份下拉選單。

（19）.for(var i=this.MaxYear;i>=this.MinYear;i--)，通過for迴圈初始化年份select下拉選單。

（20）.var op=document.createElement("option")，動態建立一個option下拉項物件。

（21）.op.value=i，將option項的value屬性值設定為i。

（22）.op.innerHTML=i，將option想的文字內容設定為i。

（23）.this.selYear.appendChild(op)，將option物件新增到年費select下拉選單。

（24）.DateSelector.prototype.InitMonthSelect=function(){}，宣告一個函式用於初始化月份select下拉選單。

（25）.DateSelector.prototype.DaysInMonth=function(year,month){}，宣告一個函式用於獲取指定年份下指定月份的天數。

（26）.DateSelector.prototype.InitDaySelect=function(){}，宣告一個函式用於初始化天select下拉選單。

（27）.var year=parseInt(this.selYear.value)，獲取年份選單中選中的年份值。

（28）.var month=parseInt(this.selMonth.value)，獲取月份選單中選中的月份值。

（29）.var daysInMonth=this.DaysInMonth(year,month)，獲指定年份和月份的天數。

（30）.this.selDay.options.length=0，將天select下拉選單下拉項清空。

（31）.for (var i=1;i<=daysInMonth;i++)，使用for迴圈初始化天select下拉選單。

（32）.DateSelector.Onchange=function(e){}，onchange事件處理函式，引數是事件物件。

（33）.var e=window.event||e，為了相容各個瀏覽器。

（34）.var selector=document.all!=null?e.srcElement:e.target，獲取時間目標物件。這裡採用了三元運算子，為了相容各瀏覽器，如果是IE8和IE8以下瀏覽器，則使用e.srcElement，如果是標準瀏覽器則使用e.target。

（35）.selector.Group.InitDaySelect()，呼叫InitDaySelect()函式。

（36）.DateSelector.prototype.InitSelector=function(year,month,day){}，宣告一個函式，用來初始化三個select下拉選單。

（37）.this.selYear.options.length=0，將年份下拉選單項清空。

（38）.this.selMonth.options.length=0，將月份的下拉選單項清空。

（39）.this.InitYearSelect()，執行InitYearSelect()函式。

（40）.this.InitMonthSelect()，執行InitMonthSelect()函式。

（41）.this.selYear.selectedIndex=this.MaxYear-year，將索引值為this.MaxYear-year的項選中。

（42）.this.selMonth.selectedIndex=month-1，將索引值為month-1的項選中。

（43）.this.InitDaySelect()，執行InitDaySelect()函式。

（44）.this.selDay.selectedIndex=day-1，將索引值為day-1項選中。

（45）.window.onload=function(){}，當文件內容完全載入完畢之後，再去執行函式中的內容。

（46）.var selYear=document.getElementById("selYear")，獲取年份select下拉選單物件。

（47）.var selMonth=document.getElementById("selMonth")，獲取月份select下拉選單物件。

（48）.var selDay=document.getElementById("selDay")，獲取日select下拉選單物件。

（49）.new DateSelector(selYear,selMonth,selDay,2004,2,29)，建立一個物件例項。

三.相關閱讀:

（1）.註冊事件處理函式參閱JavaScript如何註冊事件處理函式一章節。

（2）.arguments可以參閱JavaScript targuments物件一章節。 

（3）.關於三元運算子參閱三元運算子一章節。

（4）.關於parseInt函式可以參閱JavaScript parseInt()一章節。

（5）.關於時間物件可以參閱JavaScript Date物件一章節。

相關文章