怎样用JavaScript做一个年月日三级联动的效果？
发布时间：2022-02-22 13:10:53 所属栏目：语言 来源：互联网
导读：今天给大家分享的是怎样用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; } //将得到的天数，循环输出 for (let i = 1; i <= days; i++) { let option = new Option(i, i); dateObj.options.add(option); } } </script> </body> </html> 以上就是JavaScript实现年月日三级联动效果的实例，有需要的朋友可以借鉴参考，希望对大家学习JavaScript有帮助，想要了解更多三级联动效果的实现，大家可以继续浏览群英网络其他相关的文章。 （编辑：张家口站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
