基于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 相关文章推荐
jqPlot Option配置对象详解
Jul 25 Javascript
取选中的radio的值
Jan 11 Javascript
Js 随机数产生6位数字
May 13 Javascript
js判断选择的时间是否大于今天的代码
Aug 20 Javascript
js实现同一个页面多个渐变效果的方法
Apr 10 Javascript
网页前端登录js按Enter回车键实现登陆的两种方法
May 10 Javascript
vue2的todolist入门小项目的详细解析
May 11 Javascript
ReactNative实现图片上传功能的示例代码
Jul 11 Javascript
JS运动特效之同时运动实现方法分析
Jan 24 Javascript
详解vue 单页应用(spa)前端路由实现原理
Apr 04 Javascript
使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
Jun 10 Javascript
jQuery实现简单QQ聊天框
Aug 27 jQuery
Vue vee-validate插件的简单使用
Jun 22 #Vue.js
基于JavaScript实现省市联动效果
JavaScript实现简单计时器
React实现动效弹窗组件
关于React Native 无法链接模拟器的问题
React-vscode使用jsx语法的问题及解决方法
vue3使用vue-router的完整步骤记录
You might like
基于php权限分配的实现代码
2013/04/28 PHP
PHP中ob_start函数的使用说明
2013/11/11 PHP
编辑浪子版表单验证类
2007/05/12 Javascript
JavaScript 入门·JavaScript 具有全范围的运算符
2007/10/01 Javascript
JavaScript入门教程(10) 认识其他对象
2009/01/31 Javascript
js下将字符串当函数执行的方法
2011/07/13 Javascript
JavaScript Array Flatten 与递归使用介绍
2011/10/30 Javascript
jquery无缝向上滚动实现代码
2013/03/29 Javascript
关闭ie窗口清除Session的解决方法
2014/01/10 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
2014/12/08 Javascript
jquery显示隐藏元素的实现代码
2016/05/19 Javascript
JS 实现导航菜单中的二级下拉菜单的几种方式
2016/10/31 Javascript
Form表单按回车自动提交表单的实现方法
2016/11/18 Javascript
Angular.js中angular-ui-router的简单实践
2017/07/18 Javascript
nodejs 图解express+supervisor+ejs的用法(推荐)
2017/09/08 NodeJs
vue.js移动数组位置,同时更新视图的方法
2018/03/08 Javascript
JQuery扩展对象方法操作示例
2018/08/21 jQuery
js实现多图和单图上传显示
2019/12/18 Javascript
一文读懂vue动态属性数据绑定(v-bind指令)
2020/07/20 Javascript
Python  连接字符串(join %)
2008/09/06 Python
进一步探究Python中的正则表达式
2015/04/28 Python
Python中enumerate()函数编写更Pythonic的循环
2018/03/06 Python
解决Python正则表达式匹配反斜杠''\''问题
2019/07/17 Python
基于python实现ROC曲线绘制广场解析
2020/06/28 Python
Pycharm的Available Packages为空的解决方法
2020/09/18 Python
关于HTML5+ API plusready的兼容问题
2020/11/20 HTML / CSS
美国卡车、吉普车和SUV零件网站:4 Wheel Parts
2016/11/24 全球购物
德购商城:德国进口直邮商城
2017/06/13 全球购物
英国休闲奢华的缩影:Crew Clothing
2019/05/05 全球购物
NOTINO英国:在线购买美容和香水
2020/02/25 全球购物
智能室内花园:Click & Grow
2021/01/29 全球购物
光盘行动倡议书
2014/02/02 职场文书
詹天佑教学反思
2014/04/30 职场文书
慈善晚会策划方案
2014/05/14 职场文书
网站出售协议书范文
2014/10/10 职场文书
步步惊心观后感
2015/06/12 职场文书