如何用JavaScript做一个年月日三级联动的效果?
发布时间:2022-01-18 14:27 所属栏目:13 来源:互联网
导读:今天给大家分享的是怎样用JavaScript做年月日三级联动的效果,这一三级联动效果还是比较实用的,实现效果及代码如下,感兴趣的朋友可以参考,接下来跟随小编一起看看吧。 代码: !DOCTYPE html html lang=en head meta charset=UTF-8 title年月日三级联动/ti
今天给大家分享的是怎样用JavaScript做年月日三级联动的效果,这一三级联动效果还是比较实用的,实现效果及代码如下,感兴趣的朋友可以参考,接下来跟随小编一起看看吧。 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>年月日三级联动</title> </head> <body onload="initYear(),initMonth()"> <select id="year"></select>年 <select id="month" onchange="initDate()"></select>月 <select id="date"></select>日 <script> /** * 初始化年 */ function initYear() { //获得当前年份 let curYear = new Date().getFullYear(); //获得年列表对象 let yearObj = document.getElementById("year"); yearObj.options.add(new Option("---请选择年---", "")); for (let year = curYear; year > curYear - 100; year--) { let option = new Option(year, year); yearObj.options.add(option); } } /** * 初始化月份 */ function initMonth() { //获得年列表对象 let monthObj = document.getElementById("month"); monthObj.options.add(new Option("---请选择月份---", "")); for (let month = 1; month <= 12; month++) { let option = new Option(month, month); monthObj.options.add(option); } } /** * 初始化日 */ function initDate() { let dateObj = document.getElementById("date"); //获得当月选中月份 let month = document.getElementById("month").value; //当月份选择完毕,再弹出对应日期 dateObj.options.add(new Option("---请选择日期---", "")); //将month转化成数字 month = parseInt(month); //定义每月的天数 let days = 31; switch (month) { case 1: case 3: case 5: case 7: case 8: case 10: case 12: break; case 4: case 6: case 9: case 11: days = 30; break; case 2: //需要判断是否为闰年,获得当前选中的年 let year = document.getElementById("year").value; if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) { days = 29; } else { days = 28; } break; } (编辑:ASP站长网) |
相关内容
网友评论
推荐文章
热点阅读