基于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 相关文章推荐
类似框架的js代码
Nov 09 Javascript
jQuery获取iframe的document对象的方法
Oct 10 Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
Oct 26 Javascript
JavaScript中的alert()函数使用技巧详解
Dec 29 Javascript
javascript 闭包详解
Jul 02 Javascript
JavaScript实现复制内容到粘贴板代码
Mar 31 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
Mar 09 Javascript
jQuery动态生成的元素绑定事件操作实例分析
May 04 jQuery
深入浅出vue图片路径的实现
Sep 04 Javascript
webgl实现物体描边效果的方法介绍
Nov 27 Javascript
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 jQuery
Vue解决echart在element的tab切换时显示不正确问题
Aug 03 Javascript
Vue vee-validate插件的简单使用
Jun 22 #Vue.js
基于JavaScript实现省市联动效果
JavaScript实现简单计时器
React实现动效弹窗组件
关于React Native 无法链接模拟器的问题
React-vscode使用jsx语法的问题及解决方法
vue3使用vue-router的完整步骤记录
You might like
一个程序下载的管理程序(一)
2006/10/09 PHP
php多用户读写文件冲突的解决办法
2013/11/06 PHP
windows 2008r2+php5.6.28环境搭建详细过程
2019/06/18 PHP
javascript 字符串连接的性能问题(多浏览器)
2008/11/18 Javascript
利用WebBrowser彻底解决Web打印问题(包括后台打印)
2009/06/22 Javascript
javascript针对DOM的应用分析(二)
2012/04/15 Javascript
Javascript模块化编程(一)模块的写法最佳实践
2013/01/17 Javascript
JQuery页面的表格数据的增加与分页的实现
2013/12/10 Javascript
JSONP跨域的原理解析及其实现介绍
2014/03/22 Javascript
JavaScript动态修改背景颜色的方法
2015/04/16 Javascript
jquery实现的仿天猫侧导航tab切换效果
2015/08/24 Javascript
跟我学习javascript的隐式强制转换
2015/11/16 Javascript
AngularJS优雅的自定义指令
2016/07/01 Javascript
Node.js websocket使用socket.io库实现实时聊天室
2017/02/20 Javascript
jQuery实现页面倒计时并刷新效果
2017/03/13 Javascript
用纯Node.JS弹出Windows系统消息提示框实例(MessageBox)
2017/05/17 Javascript
详解Angular中通过$location获取地址栏的参数
2018/08/02 Javascript
[00:21]DOTA2亚洲邀请赛 Logo演绎
2015/02/07 DOTA
Python中的赋值、浅拷贝、深拷贝介绍
2015/03/09 Python
Python操作MongoDB数据库的方法示例
2018/01/04 Python
Python之inspect模块实现获取加载模块路径的方法
2018/10/16 Python
Python实现八皇后问题示例代码
2018/12/09 Python
PyQt5固定窗口大小的方法
2019/06/18 Python
python求质数列表的例子
2019/11/24 Python
浅谈keras.callbacks设置模型保存策略
2020/06/18 Python
Python DataFrame使用drop_duplicates()函数去重(保留重复值,取重复值)
2020/07/20 Python
对CSS3选择器的研究(详解)
2016/09/16 HTML / CSS
8款精美的CSS3表单设计(登录表单/下拉选择/按钮附演示及源码)
2013/02/04 HTML / CSS
学院书画协会部门职责
2013/11/28 职场文书
大学毕业典礼演讲稿
2014/09/09 职场文书
首都博物馆观后感
2015/06/05 职场文书
学校体育节班级口号
2015/12/25 职场文书
nginx优化的六点方法
2021/03/31 Servers
Mysql服务添加 iptables防火墙策略的方案
2021/04/29 MySQL
Django Paginator分页器的使用示例
2021/06/23 Python
Python中time与datetime模块使用方法详解
2022/03/31 Python