基于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 相关文章推荐
document.all还是document.getElementsByName?
Jul 21 Javascript
jquery选择器(常用选择器说明)
Sep 28 Javascript
javascript列表框操作函数集合汇总
Nov 28 Javascript
Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)
Dec 12 Javascript
Javascript基础知识(一)核心基础语法与事件模型
Sep 29 Javascript
jQuery中scrollTop()方法用法实例
Jan 16 Javascript
JavaScript实现的微信二维码图片生成器的示例
Oct 26 Javascript
Node.js测试中的Mock文件系统详解
Nov 21 Javascript
详解js前端代码异常监控
Jan 11 Javascript
jQuery实现遍历复选框的方法示例
Mar 06 Javascript
使用JavaScript实现alert的实例代码
Jul 06 Javascript
layui实现动态和静态分页
Apr 28 Javascript
Vue vee-validate插件的简单使用
Jun 22 #Vue.js
基于JavaScript实现省市联动效果
JavaScript实现简单计时器
React实现动效弹窗组件
关于React Native 无法链接模拟器的问题
React-vscode使用jsx语法的问题及解决方法
vue3使用vue-router的完整步骤记录
You might like
php中将汉字转换成拼音的函数代码
2012/09/08 PHP
PHP文件大小格式化函数合集
2014/03/10 PHP
PHP 实现代码复用的一个方法 traits新特性
2015/02/22 PHP
PHP图像处理类库及演示分享
2015/05/17 PHP
php比较相似字符串的方法
2015/06/05 PHP
变量在 PHP7 内部的实现(一)
2015/12/21 PHP
PHP设计模式概论【概念、分类、原则等】
2020/05/01 PHP
JScript中的&quot;this&quot;关键字使用方式补充材料
2007/03/08 Javascript
初学js 新节点的创建 删除 的步骤
2011/07/04 Javascript
javascript中的注释使用与注意事项小结
2011/09/20 Javascript
利用JS自动打开页面上链接的实现代码
2011/09/25 Javascript
推荐40个非常优秀的jQuery插件和教程【系列三】
2011/11/09 Javascript
仿中关村在线首页弹出式广告插件(jQuery版)
2012/05/03 Javascript
Jvascript学习实践案例(开发常用)
2012/06/25 Javascript
深入理解JavaScript 闭包究竟是什么
2013/04/12 Javascript
使用typeof判断function是否存在于上下文
2014/08/14 Javascript
javascript显式类型转换实例分析
2015/04/25 Javascript
JavaScript数组操作函数汇总
2016/08/05 Javascript
Node.js Sequelize如何实现数据库的读写分离
2016/10/23 Javascript
浅谈箭头函数写法在ReactJs中的使用
2017/08/22 Javascript
Nodejs中crypto模块的安全知识讲解
2018/01/03 NodeJs
fullpage.js最后一屏滚动方式
2018/02/06 Javascript
Vue实现点击显示不同图片的效果
2019/08/10 Javascript
JavaScript实现图片上传并预览并提交ajax
2019/09/30 Javascript
如何利用node.js开发一个生成逐帧动画的小工具
2019/12/01 Javascript
原生js实现无缝轮播图效果
2021/01/28 Javascript
详解Python使用simplejson模块解析JSON的方法
2016/03/24 Python
解决Python requests库编码 socks5代理的问题
2018/05/07 Python
详解如何管理多个Python版本和虚拟环境
2019/05/10 Python
详解Python中的测试工具
2019/06/09 Python
canvas像素画板的实现代码
2018/11/21 HTML / CSS
印度和世界各地的精美产品:Ikka Dukka
2018/02/12 全球购物
速卖通欧盟:Aliexpress EU
2020/08/19 全球购物
Linux面试经常问的文件系统操作命令
2015/11/05 面试题
出纳的岗位职责
2013/11/09 职场文书
暑期政治学习心得体会
2014/09/02 职场文书