搭建商城小程序_使用select完成年月日三级联动的日期选择效果【引荐】

  • 栏目:公司新闻 时间:2021-01-12 16:25 分享新闻到:
<返回列表

利用select实现年月日三级联动的日期选择效果【推荐】       关于select控件,可能年月日三级联动的日期选择效果是最常见的应用了。本文将对日期选择效果进行详细介绍。需要的朋友一起来看下吧

前面的话

关于select控件,可能年月日三级联动的日期选择效果是最常见的应用了。本文是的实践,下面将对日期选择效果进行详细介绍

规划

  默认情况下,年、月、日分别由3个select控件组成,id分别为sel1,sel2,sel3。它们且所包含的option[0]的值,分别为'年'、'月'、'日'

年份范围为1900-2100,月份范围为1-12,天的范围为1-31

年份范围、月份范围是不变的。而天的范围根据实际日期的计算来改变其范围值

id为result的span元素储存最终选择的日期值及对应的星期值

 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 

结构生成

由于数据太过庞大,所以使用javascript生成的方式生成结构

//生成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 i++){
 var option = document.createElement('option');
 option.setAttribute('value',i);
 option.innerHTML = i;
 sel2.appendChild(option); 
//生成1日—31日
for(var i = 1; i 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 = '';
}

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持凡科!

分享新闻到:

更多阅读

搭建商城小程序_使用select完成年月日三级

公司新闻 2021-01-12
运用select完成年月日三联级动的时间挑选实际效果【强烈推荐】 有关select控制,将会年...
查看全文

网站建设做不太好-微信三级代销商业模式

公司新闻 2021-01-12
连锁加盟店面微信小程序 对于连锁加盟店> 微商代理城 基本版 方式版 悦享版 多商家版 各大...
查看全文

东莞网站建设案例-建站之星网店系统

公司新闻 2021-01-12
不需一切建网站专业知识,网站域名、室内空间、技术性适用一站式服务。一键启用,简易实...
查看全文
返回全部新闻


区域站点: 南丰县免费抠图换背景软件   南宫市网页效果图制作   囊谦县在线抠图软件   南和县手机抠图   南华县免费抠图换背景软件   南江县网页效果图制作   南京市在线抠图软件   南靖县手机抠图   南康市免费抠图换背景软件   南乐县网页效果图制作   南陵县在线抠图软件   南宁市手机抠图   南平市免费抠图换背景软件   南皮县网页效果图制作   南市区在线抠图软件   南通市手机抠图   南投县免费抠图换背景软件   南雄市网页效果图制作   南溪县在线抠图软件   南阳市手机抠图   南漳县免费抠图换背景软件   南召县网页效果图制作   南郑县在线抠图软件   那坡县手机抠图   那曲县免费抠图换背景软件   纳雍县网页效果图制作   讷河市在线抠图软件   内黄县手机抠图   内江市免费抠图换背景软件   内丘县网页效果图制作   内乡县在线抠图软件   嫩江市手机抠图   聂荣县免费抠图换背景软件   尼玛县网页效果图制作   尼木县在线抠图软件   宁安市手机抠图   宁波市免费抠图换背景软件   宁城县网页效果图制作   宁德市在线抠图软件   宁都县手机抠图   宁国市免费抠图换背景软件   宁海县网页效果图制作   宁化县在线抠图软件   宁晋县手机抠图   宁陵县免费抠图换背景软件   宁明县网页效果图制作   宁南县在线抠图软件   宁强县手机抠图   宁陕县免费抠图换背景软件   宁武县网页效果图制作   宁乡市在线抠图软件   宁阳县手机抠图   宁远县免费抠图换背景软件   农安县网页效果图制作   磐安县在线抠图软件   盘锦市手机抠图   盘山县免费抠图换背景软件   磐石市网页效果图制作   盘州市在线抠图软件   蓬安县手机抠图   澎湖县免费抠图换背景软件   蓬莱市网页效果图制作   彭山县在线抠图软件   蓬溪县手机抠图   彭阳县免费抠图换背景软件   彭泽县网页效果图制作   彭州市在线抠图软件   偏关县手机抠图   平安县免费抠图换背景软件   平昌县网页效果图制作   平定县在线抠图软件   屏东县手机抠图   平度市免费抠图换背景软件   平果县网页效果图制作   平和县在线抠图软件   平湖市手机抠图   平江县免费抠图换背景软件   平乐县网页效果图制作   平凉市在线抠图软件   平利县手机抠图   平罗县免费抠图换背景软件   平陆县网页效果图制作   屏南县在线抠图软件   平泉市手机抠图   屏山县免费抠图换背景软件   平顺县网页效果图制作   平塘县在线抠图软件   平潭县手机抠图   平武县免费抠图换背景软件   萍乡市网页效果图制作   平乡县在线抠图软件   平阳县手机抠图   平遥县免费抠图换背景软件   平阴县网页效果图制作   平邑县在线抠图软件   平远县手机抠图   平舆县免费抠图换背景软件   皮山县网页效果图制作   普安县在线抠图软件   浦北县手机抠图   浦城县免费抠图换背景软件   普洱市网页效果图制作   普格县在线抠图软件   浦江县手机抠图   普兰县免费抠图换背景软件   普宁市网页效果图制作   莆田市在线抠图软件   迁安市手机抠图   乾安县免费抠图换背景软件   潜江市网页效果图制作   潜山市在线抠图软件  

友情链接: 淘宝做图片用什么 类似图怪兽的软件 招牌设计图片 抠图在线 手机版

Copyright © 2002-2020 在线抠图软件_手机抠图_免费抠图换背景软件_网页效果图制作_通道怎么抠图 版权所有 (网站地图) 备案号:粤ICP备10235580号