前面的話
關(guān)于select控件，可能年月日三級(jí)聯(lián)動(dòng)的日期選擇效果是最常見的應(yīng)用了。本文是選擇框腳本的實(shí)踐，下面將對(duì)日期選擇效果進(jìn)行詳細(xì)介紹
規(guī)劃
默認(rèn)情況下，年、月、日分別由3個(gè)select控件組成，id分別為sel1，sel2，sel3。它們且所包含的option[0]的值，分別為'年'、'月'、'日'
年份范圍為1900-2100，月份范圍為1-12，天的范圍為1-31
年份范圍、月份范圍是不變的。而天的范圍根據(jù)實(shí)際日期的計(jì)算來改變其范圍值
id為result的span元素儲(chǔ)存最終選擇的日期值及對(duì)應(yīng)的星期值
<div id="box"> <select name="sel1" id="sel1"> <option value="year">年</option> </select> <select name="sel2" id="sel2"> <option value="month">月</option> </select> <select name="sel3" id="sel3"> <option value="day">日</option> </select> <span id="result"></span></div>
結(jié)構(gòu)生成
由于數(shù)據(jù)太過龐大，所以使用javascript生成的方式生成結(jié)構(gòu)
//生成1900年-2100年for(var i = 1900; i<=2100;i++){ var option = document.createElement('option'); option.setAttribute('value',i); option.innerHTML = i; sel1.appendChild(option);}//生成1月-12月for(var i = 1; i <=12; i++){ var option = document.createElement('option'); option.setAttribute('value',i); option.innerHTML = i; sel2.appendChild(option); }//生成1日―31日for(var i = 1; i <=31; i++){ var option = document.createElement('option'); option.setAttribute('value',i); option.innerHTML = i; sel3.appendChild(option); }算法處理
算法的實(shí)質(zhì)就是確定某年某月到底有多少天，然后對(duì)多余的天數(shù)進(jìn)行刪除或者對(duì)少的天數(shù)進(jìn)行添加
【1】閏年
年分為閏年和平年，平年有365天，閏年有366天。閏年的2月比平年多一天
閏年的定義是(可被4整除)且((不可被100整除)或(可被400整除))的年份
口訣是：四年一閏，百年不閏，四百年再閏
if((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0){ return 'leap year'}else{ return 'common year'}【2】大小月
一年有12個(gè)月，其中4、6、9、11月每月有30天；如果是閏年，2月有29天，否則 ，2月有28天。1、3、5、7、8、10、12月每月有31天
if(month == 2){ //如果是閏年 if((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0){ days = 29; //如果是平年 }else{ days = 28; }//如果是第4、6、9、11月}else if(month == 4 || month == 6 ||month == 9 ||month == 11){ days = 30;}else{ days = 31;}【3】增減情況
考慮特殊情況，如果先選擇31日，再選擇2月，則發(fā)生錯(cuò)誤。所以，選擇年份時(shí)，月份和天數(shù)自動(dòng)置為默認(rèn)值'月'和'日'，天數(shù)的范圍重置為'31'
//年份點(diǎn)擊sel1.onclick = function(){ //月份顯示默認(rèn)值 sel2.options[0].selected = true; //天數(shù)顯示默認(rèn)值 sel3.options[0].selected = true;}選擇月份時(shí)，天數(shù)自動(dòng)置為默認(rèn)值'日'，天數(shù)的范圍根據(jù)計(jì)算顯示相應(yīng)天數(shù)
此時(shí)，天數(shù)可能為28、29、30、31四種情況
//增加或刪除天數(shù) //如果是28天，則刪除29、30、31天(即使他們不存在也不報(bào)錯(cuò)) if(days == 28){ sel3.remove(31); sel3.remove(30); sel3.remove(29); } //如果是29天 if(days == 29){ sel3.remove(31); sel3.remove(30); //如果第29天不存在，則添加第29天 if(!sel3.options[29]){ sel3.add(new Option('29','29'),undefined) } } //如果是30天 if(days == 30){ sel3.remove(31); //如果第29天不存在，則添加第29天 if(!sel3.options[29]){ sel3.add(new Option('29','29'),undefined) } //如果第30天不存在，則添加第30天 if(!sel3.options[30]){ sel3.add(new Option('30','30'),undefined) } } //如果是31天 if(days == 31){ //如果第29天不存在，則添加第29天 if(!sel3.options[29]){ sel3.add(new Option('29','29'),undefined) } //如果第30天不存在，則添加第30天 if(!sel3.options[30]){ sel3.add(new Option('30','30'),undefined) } //如果第31天不存在，則添加第31天 if(!sel3.options[31]){ sel3.add(new Option('31','31'),undefined) } }【4】結(jié)果顯示
每次年、月、日的點(diǎn)擊事件，都判斷年份、月份和天數(shù)是否都已經(jīng)設(shè)置為非默認(rèn)值。如果是的，則顯示最終結(jié)果，并計(jì)算星期值；如果不是，則什么都不執(zhí)行
//星期格式切換function changDay(num){ switch(num){ case 0: return '日'; case 1: return '一'; case 2: return '二'; case 3: return '三'; case 4: return '四'; case 5: return '五'; case 6: return '六'; }}//結(jié)果顯示box.onclick = function(){ //當(dāng)年、月、日都已經(jīng)為設(shè)置值時(shí) if(sel1.value !='year' && sel2.value != 'month' && sel3.value !='day'){ var day = new Date(sel1.value,sel2.value-1,sel3.value).getDay(); result.innerHTML = sel1.value + '年' + sel2.value + '月' + sel3.value + '日' + '星期' + changDay(day); }else{ result.innerHTML = ''; }}以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持武林網(wǎng)！
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
