JavaScript 年月日級聯
分享一段程式碼例項,它實現了年月日級聯選單效果,在大量網站都有應用。
程式碼例項如下:
[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物件一章節。
相關文章
- javascript帶有星期的年月日級聯選單效果JavaScript
- 年月日級聯效果詳解
- JavaScript 省市級聯效果JavaScript
- JavaScript 年月日倒數計時JavaScript
- JavaScript 省市級聯選單原理JavaScript
- JavaScript省市級聯效果詳解JavaScript
- JavaScript年月日日期顯示程式碼JavaScript
- JavaScript 時間戳轉換為年月日JavaScript時間戳
- JavaScript省市級聯選單原理詳解JavaScript
- JavaScript年月日精確到秒倒數計時JavaScript
- JavaScript將時間戳轉換為年月日格式JavaScript時間戳
- JavaScript怎麼獲取當前時間的年月日?JavaScript
- 原生javascript製作省市區三級聯動詳細教程JavaScript
- javascript讀取以json形式儲存的省市級聯效果JavaScriptJSON
- Oracle 級聯表更新和SQLServer 級聯表更新OracleSQLServer
- js 年月日時分秒JS
- 級聯刪除
- elemenet 級聯
- js二級聯動JS
- 2.12 級聯mockMock
- Laravel-admin 三級聯動 or 多級聯動 編輯 and 新建Laravel
- 時間年月日格式轉化
- JavaScript 塊級作用域JavaScript
- javascript級的validaotrJavaScript
- CSS塊級/內聯元素CSS
- 總結DetachedCriteria級聯查…
- js例子-二級聯動JS
- Java版通用JS級聯JavaJS
- WPF TreeView級聯複選View
- MVC的二級聯動MVC
- jquery實現四級級聯下拉選單jQuery
- php中用ajax實現二級省市級聯PHP
- 【DG】Oracle之級聯DG--(cascade dg) --(一主一備一級聯)Oracle
- JS轉換成年月日時分秒JS
- Hibernate 一對多配置 級聯操作(級聯失敗問題分析解決)
- javaScript高階級函式JavaScript函式
- JavaScript獲取同級元素JavaScript
- JavaScript 獲取同級元素JavaScript