网站培训方案,海口网站建设公司哪家好,移动端网站构成要素,手机网站栏目结构图前面的话 关于select控件#xff0c;可能年月日三级联动的日期选择效果是最常见的应用了。本文是选择框脚本的实践#xff0c;下面将对日期选择效果进行详细介绍 演示 stylewidth: 100%; height: 80px; srchttps://demo.xiaohuochai.site/js/date/d2.html可能年月日三级联动的日期选择效果是最常见的应用了。本文是选择框脚本的实践下面将对日期选择效果进行详细介绍 演示 stylewidth: 100%; height: 80px; srchttps://demo.xiaohuochai.site/js/date/d2.html frameborder0 width320 height240
规划 默认情况下年、月、日分别由3个select控件组成id分别为sel1sel2sel3。它们且所包含的option[0]的值分别为年、月、日 年份范围为1900-2100月份范围为1-12天的范围为1-31 年份范围、月份范围是不变的。而天的范围根据实际日期的计算来改变其范围值 id为result的span元素储存最终选择的日期值及对应的星期值 div idbox
select namesel1 idsel1
option valueyear年/option
/select
select namesel2 idsel2
option valuemonth月/option
/select
select namesel3 idsel3
option valueday日/option
/select
span idresult/span
/div 结构生成 由于数据太过庞大所以使用javascript生成的方式生成结构 //生成1900年-2100年
for(var i 1900; i2100;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);
} 算法处理 算法的实质就是确定某年某月到底有多少天然后对多余的天数进行删除或者对少的天数进行添加
【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个月其中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月则发生错误。所以选择年份时月份和天数自动置为默认值月和日天数的范围重置为31 //年份点击
sel1.onclick function(){
//月份显示默认值
sel2.options[0].selected true;
//天数显示默认值
sel3.options[0].selected true;
} 选择月份时天数自动置为默认值日天数的范围根据计算显示相应天数 此时天数可能为28、29、30、31四种情况 //增加或删除天数
//如果是28天则删除29、30、31天(即使他们不存在也不报错)
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】结果显示 每次年、月、日的点击事件都判断年份、月份和天数是否都已经设置为非默认值。如果是的则显示最终结果并计算星期值如果不是则什么都不执行 //星期格式切换
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 六;
}
} //结果显示
box.onclick function(){
//当年、月、日都已经为设置值时
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 ;
}
} 更多专业前端知识请上
【猿2048】www.mk2048.com
