基于JavaScript实现年月日三级联动


Posted in Javascript onJune 22, 2021

本文实例为大家分享了JavaScript实现年月日三级联动的具体代码,供大家参考,具体内容如下

基于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 相关文章推荐
7个让JavaScript变得更好的注意事项
Jan 28 Javascript
js检测iframe是否加载完成的方法
Nov 26 Javascript
JQuery.validate在ie8下不支持的快速解决方法
May 18 Javascript
深入浅出ES6新特性之函数默认参数和箭头函数
Aug 01 Javascript
JQuery validate 验证一个单独的表单元素实例
Feb 17 Javascript
大白话讲解JavaScript的Promise
Apr 06 Javascript
详谈表单格式化插件jquery.serializeJSON
Jun 23 jQuery
详解React-Native全球化多语言切换工具库react-native-i18n
Nov 03 Javascript
OkHttp踩坑随笔为何 response.body().string() 只能调用一次
Jan 08 Javascript
使用Node搭建reactSSR服务端渲染架构
Aug 30 Javascript
layui点击弹框页面 表单请求的方法
Sep 21 Javascript
微信小程序订阅消息(java后端实现)开发
Jun 01 Javascript
Vue vee-validate插件的简单使用
Jun 22 #Vue.js
基于JavaScript实现省市联动效果
JavaScript实现简单计时器
React实现动效弹窗组件
关于React Native 无法链接模拟器的问题
React-vscode使用jsx语法的问题及解决方法
vue3使用vue-router的完整步骤记录
You might like
php5.2时间相差8小时
2007/01/15 PHP
PHP register_shutdown_function函数的深入解析
2013/06/03 PHP
php读取图片内容并输出到浏览器的实现代码
2013/08/08 PHP
php中使用PHPExcel读写excel(xls)文件的方法
2014/09/15 PHP
php获取QQ头像并显示的方法
2014/12/23 PHP
php实现获取文件mime类型的方法
2015/02/11 PHP
PHP中把对象转换为关联数组代码分享
2015/04/09 PHP
WordPress特定文章对搜索引擎隐藏或只允许搜索引擎查看
2015/12/31 PHP
yii2实现根据时间搜索的方法
2016/05/25 PHP
jQuery Autocomplete自动完成插件
2010/07/17 Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
2015/08/05 Javascript
javascript伸缩菜单栏实现代码分享
2015/11/12 Javascript
实例详解jQuery表单验证插件validate
2016/01/18 Javascript
使用vue.js开发时一些注意事项
2016/04/27 Javascript
在线引用最新jquery文件的实现方法
2016/08/26 Javascript
通过JS和PHP两种方法判断用户请求时使用的浏览器类型
2016/09/01 Javascript
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法
2016/12/07 Javascript
把vue-router和express项目部署到服务器的方法
2018/02/21 Javascript
node.js使用express框架进行文件上传详解
2019/03/03 Javascript
ES6基础之数组和对象的拓展实例详解
2019/08/22 Javascript
vue+AI智能机器人回复功能实现
2020/07/16 Javascript
一起来了解一下JavaScript的预编译(小结)
2021/03/01 Javascript
[01:39]2014DOTA2国际邀请赛 Newbee经理CU专访队伍火力全开
2014/07/15 DOTA
[01:14:12]2018DOTA2亚洲邀请赛4.7 总决赛 LGD vs Mineski 第二场
2018/04/09 DOTA
[51:36]EG vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
[02:08]什么藏在DOTA2 TI9“小紫本”里?斧王历险记告诉你!
2019/05/17 DOTA
Phantomjs抓取渲染JS后的网页(Python代码)
2016/05/13 Python
Python读写Json涉及到中文的处理方法
2016/09/12 Python
关于Python的一些学习总结
2018/05/25 Python
python使用yaml 管理selenium元素的示例
2020/12/01 Python
比利时的在线灯具店:Lampen24.be
2019/07/01 全球购物
大学本科毕业生求职简历的自我评价
2013/10/09 职场文书
高中生活自我鉴定
2014/01/18 职场文书
学校安全教育制度
2014/01/31 职场文书
python自动计算图像数据集的RGB均值
2021/06/18 Python
Lakehouse数据湖并发控制陷阱分析
2022/03/31 Oracle