基于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 学习笔记 选择器之四
Jul 23 Javascript
不要在cookie中使用特殊字符的原因分析
Jul 13 Javascript
jQuery处理xml格式的返回数据(实例解析)
Nov 28 Javascript
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
Jan 14 Javascript
js判断请求的url是否可访问,支持跨域判断的实现方法
Sep 17 Javascript
JavaScript输入框字数实时统计更新
Jun 17 Javascript
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
Jan 22 Javascript
利用Vconsole和Fillder进行移动端抓包调试方法
Mar 05 Javascript
django js 实现表格动态标序号的实例代码
Jul 12 Javascript
详解Vue中组件传值的多重实现方式
Aug 16 Javascript
vue中v-for循环选中点击的元素并对该元素添加样式操作
Jul 17 Javascript
javascript实现计算器功能详解流程
Nov 01 Javascript
Vue vee-validate插件的简单使用
Jun 22 #Vue.js
基于JavaScript实现省市联动效果
JavaScript实现简单计时器
React实现动效弹窗组件
关于React Native 无法链接模拟器的问题
React-vscode使用jsx语法的问题及解决方法
vue3使用vue-router的完整步骤记录
You might like
php执行sql语句的写法
2009/03/10 PHP
php数组函数序列之array_intersect() 返回两个或多个数组的交集数组
2011/11/10 PHP
php学习笔记之基础知识
2014/11/08 PHP
PHP判断IP并转跳到相应城市分站的方法
2015/03/25 PHP
日常整理PHP中简单的图形处理(经典)
2015/10/26 PHP
Laravel5.7 数据库操作迁移的实现方法
2019/04/12 PHP
JAVASCRIPT keycode总结
2009/02/04 Javascript
慎用 somefunction.prototype 分析
2009/06/02 Javascript
JQuery EasyUI 数字格式化处理示例
2014/05/05 Javascript
jQuery跨域问题解决方案
2015/08/03 Javascript
Nodejs爬虫进阶教程之异步并发控制
2016/02/15 NodeJs
jQuery异步提交表单的两种方式
2016/09/13 Javascript
AngularJS中transclude用法详解
2016/11/03 Javascript
jQuery扩展实现text提示还能输入多少字节的方法
2016/11/28 Javascript
vue实现某元素吸顶或固定位置显示(监听滚动事件)
2017/12/13 Javascript
详解VUE-地区选择器(V-Distpicker)组件使用心得
2018/05/07 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
2018/08/02 Javascript
微信小程序实现手势滑动效果
2019/08/26 Javascript
微信小程序页面间传递数组对象方法解析
2019/11/06 Javascript
antd 表格列宽自适应方法以及错误处理操作
2020/10/27 Javascript
[14:03]2017DOTA2亚洲邀请赛开幕式:12神兵演绎水墨中华
2017/04/01 DOTA
Django中对通过测试的用户进行限制访问的方法
2015/07/23 Python
jenkins+python自动化测试持续集成教程
2020/05/12 Python
PIL.Image.open和cv2.imread的比较与相互转换的方法
2020/06/03 Python
python 对象真假值的实例(哪些视为False)
2020/12/11 Python
python中实现栈的三种方法
2020/12/19 Python
Python 实现集合Set的示例
2020/12/21 Python
Kipling凯浦林美国官网:世界著名时尚休闲包袋品牌
2016/08/24 全球购物
英国家居用品和床上用品零售商:P&B Home
2020/01/16 全球购物
全民健身日活动方案
2014/01/29 职场文书
小学教师节活动方案
2014/01/31 职场文书
党员干部反四风对照检查材料思想汇报
2014/09/14 职场文书
领导班子三严三实心得体会
2014/10/13 职场文书
刑事案件上诉状
2015/05/23 职场文书
学习计划是什么
2019/04/30 职场文书
Spring中的@Transactional的工作原理
2022/06/05 Java/Android