基于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 相关文章推荐
打开超链需要“确认”对话框的方法
Mar 08 Javascript
JavaScript中将一个值转换为字符串的方法分析[译]
Sep 21 Javascript
使用js正则控制input标签只允许输入的值
Jul 29 Javascript
js获取时间(本周、本季度、本月..)
Nov 22 Javascript
JavaScript函数作用域链分析
Feb 13 Javascript
JavaScript检测弹出窗口是否已经关闭的方法
Mar 24 Javascript
Bootstrap插件全集
Jul 18 Javascript
解决wx.onMenuShareTimeline出现的问题
Aug 16 Javascript
微信小程序之MaterialDesign--input组件详解
Feb 15 Javascript
vue-cli webpack2项目打包优化分享
Feb 07 Javascript
解决Layui当中的导航条动态添加后渲染失败的问题
Sep 25 Javascript
小程序中手机号识别的示例
Dec 14 Javascript
Vue vee-validate插件的简单使用
Jun 22 #Vue.js
基于JavaScript实现省市联动效果
JavaScript实现简单计时器
React实现动效弹窗组件
关于React Native 无法链接模拟器的问题
React-vscode使用jsx语法的问题及解决方法
vue3使用vue-router的完整步骤记录
You might like
mysql中存储过程、函数的一些问题
2007/02/14 PHP
php的array数组和使用实例简明教程(容易理解)
2014/03/20 PHP
PHP检测移动设备类mobile detection使用实例
2014/04/14 PHP
php+mysql实现的二级联动菜单效果详解
2016/05/10 PHP
php实现的pdo公共类定义与用法示例
2017/07/19 PHP
PHP时间相关常用函数用法示例
2020/06/03 PHP
jquery ajax 同步异步的执行 return值不能取得的解决方案
2012/01/08 Javascript
jquery.Jwin.js 基于jquery的弹出层插件代码
2012/05/23 Javascript
在JavaScript中typeof的用途介绍
2013/04/11 Javascript
js实现目录定位正文示例
2013/11/14 Javascript
JS画线(实例代码)
2013/11/20 Javascript
jQuery+HTML5实现手机摇一摇换衣特效
2015/06/05 Javascript
浅谈javascript函数式编程
2015/09/06 Javascript
解决jquery中动态新增的元素节点无法触发事件问题的两种方法
2015/10/30 Javascript
理解Javascript图片预加载
2016/02/23 Javascript
JavaScript如何实现组合列表框中元素移动效果
2016/03/01 Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
2016/07/09 Javascript
用js动态添加html元素,以及属性的简单实例
2016/07/19 Javascript
AngularJS中的包含详细介绍及实现示例
2016/07/28 Javascript
JavaScript实现点击按钮复制指定区域文本(推荐)
2016/11/25 Javascript
JavaScript阻止表单提交方法(附代码)
2017/08/15 Javascript
React全家桶环境搭建过程详解
2018/05/18 Javascript
一文读懂vue动态属性数据绑定(v-bind指令)
2020/07/20 Javascript
JavaScript手写数组的常用函数总结
2020/11/22 Javascript
绘制微信小程序验证码功能的实例代码
2021/01/05 Javascript
python中getattr函数使用方法 getattr实现工厂模式
2014/01/20 Python
Python中用post、get方式提交数据的方法示例
2017/09/22 Python
python实现输入数字的连续加减方法
2018/06/22 Python
python opencv 图像边框(填充)添加及图像混合的实现方法(末尾实现类似幻灯片渐变的效果)
2020/03/09 Python
Python restful框架接口开发实现
2020/04/13 Python
python rolling regression. 使用 Python 实现滚动回归操作
2020/06/08 Python
keras实现VGG16方式(预测一张图片)
2020/07/07 Python
同事打架检讨书
2014/02/04 职场文书
入党介绍人评语
2014/05/06 职场文书
求职信的正确写法
2014/07/10 职场文书
单位租车协议书
2015/01/29 职场文书