基于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 相关文章推荐
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
Oct 06 Javascript
document.write的几点使用心得
May 14 Javascript
JS实现动态移动层及拖动浮层关闭的方法
Apr 30 Javascript
浅谈angularJS 作用域
Jul 05 Javascript
Bootstrap每天必学之折叠(Collapse)插件
Apr 25 Javascript
jQuery 生成svg矢量二维码
Aug 09 Javascript
Node.js学习入门
Jan 03 Javascript
详解Vue学习笔记入门篇之组件的内容分发(slot)
Jul 17 Javascript
AngularJS中下拉框的高级用法示例
Oct 11 Javascript
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
Aug 10 Javascript
vue移动端实现手机左右滑动入场动画
Jun 17 Javascript
JavaScript实现捕获鼠标坐标
Apr 12 Javascript
Vue vee-validate插件的简单使用
Jun 22 #Vue.js
基于JavaScript实现省市联动效果
JavaScript实现简单计时器
React实现动效弹窗组件
关于React Native 无法链接模拟器的问题
React-vscode使用jsx语法的问题及解决方法
vue3使用vue-router的完整步骤记录
You might like
destoon实现商铺管理主页设置增加新菜单的方法
2014/06/26 PHP
php无限极分类递归排序实现方法
2014/11/11 PHP
Windows7下的php环境配置教程
2015/02/28 PHP
设置下载不需要倒计时cookie(倒计时代码)
2008/11/19 Javascript
javascript Xml增删改查(IE下)操作实现代码
2009/01/30 Javascript
js 自定义的联动下拉框
2010/02/07 Javascript
JavaScript 格式字符串的应用
2010/03/29 Javascript
Javascript和HTML5利用canvas构建Web五子棋游戏实现算法
2013/07/17 Javascript
Jquery中children与find之间的区别详细解析
2013/11/29 Javascript
理解JS绑定事件
2016/01/19 Javascript
JavaScript html5 canvas绘制时钟效果
2016/03/01 Javascript
js css实现垂直方向自适应的三角提示菜单
2016/06/26 Javascript
js数组操作方法总结(必看篇)
2016/11/22 Javascript
JS给按钮添加跳转功能类似a标签
2017/05/30 Javascript
js移动端事件基础及常用事件库详解
2017/08/15 Javascript
Vue2.0系列之过滤器的使用
2018/03/01 Javascript
vue项目中添加单元测试的方法
2018/07/21 Javascript
elementUI 设置input的只读或禁用的方法
2018/10/30 Javascript
微信小程序实现的点击按钮 弹出底部上拉菜单功能示例
2018/12/20 Javascript
微信小程序基于picker实现级联菜单
2019/02/15 Javascript
vue实践---vue不依赖外部资源实现简单多语操作
2020/09/21 Javascript
Javascript数组及类数组相关原理详解
2020/10/29 Javascript
[03:24]DOTA2超级联赛专访hao 大翻盘就是逆袭
2013/05/24 DOTA
[53:10]Secret vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
[06:07]DOTA2-DPC中国联赛 正赛 Ehome vs VG 选手采访
2021/03/11 DOTA
Django上使用数据可视化利器Bokeh解析
2019/07/31 Python
iframe与window.onload如何使用详解
2020/05/07 HTML / CSS
Pretty Little Thing美国:时尚女性服饰
2018/08/27 全球购物
美国打印机墨水和碳粉购物网站:QuikShip Toner
2018/08/29 全球购物
ShellScript面试题一则-ShellScript编程
2014/06/24 面试题
木工主管岗位职责
2013/12/08 职场文书
2014年林业工作总结
2014/12/05 职场文书
学前班语言教学计划
2015/01/20 职场文书
贴吧吧主申请感言
2015/08/03 职场文书
小数乘法教学反思
2016/02/22 职场文书
Springboot集成阿里云OSS上传文件系统教程
2021/06/28 Java/Android