年月日級聯效果詳解

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物件一章節。

相關文章