zoukankan      html  css  js  c++  java
  • 一个简单的年月日时的联动

    jQuery写一个年月日时的联动

    代码如下

    <!DOCTYPE HTML>
    <html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="http://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
    </head>
    <select name="year" id="year">
        <option value="1990">1990</option>
        <option value="1991">1991</option>
        <option value="1992">1992</option>
        <option value="1993">1993</option>
        <option value="1994">1994</option>
        <option value="1995">1995</option>
        <option value="1996">1996</option>
        <option value="1997">1997</option>
        <option value="1998">1998</option>
        <option value="1999">1999</option>
        <option value="2000">2000</option>
        <option value="2001">2001</option>
        <option value="2002">2002</option>
        <option value="2003">2003</option>
        <option value="2004">2004</option>
        <option value="2005">2005</option>
        <option value="2006">2006</option>
        <option value="2007">2007</option>
        <option value="2008">2008</option>
        <option value="2009">2009</option>
        <option value="2010">2010</option>
        <option value="2011">2011</option>
        <option value="2012">2012</option>
        <option value="2013">2013</option>
        <option value="2014">2014</option>
        <option value="2015">2015</option>
        <option value="2016">2016</option>
        <option value="2017">2017</option>
        <option value="2018">2018</option>
    </select>
    <select name="month" id="month">
        <option value="01">01</option>
        <option value="02">02</option>
        <option value="03">03</option>
        <option value="04">04</option>
        <option value="05">05</option>
        <option value="06">06</option>
        <option value="07">07</option>
        <option value="08">08</option>
        <option value="09">09</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
    </select>
    <select name="day" id="day">
        <option value="01">01</option>
        <option value="02">02</option>
        <option value="03">03</option>
        <option value="04">04</option>
        <option value="05">05</option>
        <option value="06">06</option>
        <option value="07">07</option>
        <option value="08">08</option>
        <option value="09">09</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
        <option value="13">13</option>
        <option value="14">14</option>
        <option value="15">15</option>
        <option value="16">16</option>
        <option value="17">17</option>
        <option value="18">18</option>
        <option value="19">19</option>
        <option value="20">20</option>
        <option value="21">21</option>
        <option value="22">22</option>
        <option value="23">23</option>
        <option value="24">24</option>
        <option value="25">25</option>
        <option value="26">26</option>
        <option value="27">27</option>
        <option value="28">28</option>
        <option value="29">29</option>
        <option value="30">30</option>
        <option value="31">31</option>
    </select>
    <select name="hour" id="hour">
        <option value="01">01</option>
        <option value="02">02</option>
        <option value="03">03</option>
        <option value="04">04</option>
        <option value="05">05</option>
        <option value="06">06</option>
        <option value="07">07</option>
        <option value="08">08</option>
        <option value="09">09</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
        <option value="13">13</option>
        <option value="14">14</option>
        <option value="15">15</option>
        <option value="16">16</option>
        <option value="17">17</option>
        <option value="18">18</option>
        <option value="19">19</option>
        <option value="20">20</option>
        <option value="21">21</option>
        <option value="22">22</option>
        <option value="23">23</option>
        <option value="24">24</option>
    </select>
    <body>
        <script type="text/javascript">
            $(function(){
                check_date();
                // 触发联动
                $("#year,#month").change(function(){
                    check_date();
                });
            });
            function check_date()
            {
                $("#day>option").show();
                var year =parseInt($("#year").val());
                var month=parseInt($("#month").val());
                var arr=[2,4,6,9,11];//30天的
                if(arr.indexOf(month)>=0)
                {
                    $("#day>option[value=31]").hide();//第31天进行隐藏
                }
                if(month==2)
                {
                    $("#day>option[value=30]").hide();//2月份肯定没有30号
                    //得到2月份 开始判断这个年份是不是闰年 闰年29天 平年28天
                    if (((year % 4)==0) && ((year % 100)!=0) || ((year % 400)==0))
                    {
                        //是闰年 开始处理
                        $("#day>option[value=29]").show();//闰年 将29号显示
                    }else
                    {
                        $("#day>option[value=29]").hide();//平年 将29号隐藏
                    }
                }
            }
        </script>
    </body>
    </html>

    效果如图

  • 相关阅读:
    浅谈自动化测试
    Linux cron定时介绍
    Python上下文管理器
    Robot Framework robot命令
    Web自动化测试之playwright:设置浏览器语言
    Python文件及目录处理方法
    2021google开发者大会
    linux环境变量设置小结
    Eclipse快捷键
    java计时 小计
  • 原文地址:https://www.cnblogs.com/lizhaoyao/p/9679887.html
Copyright © 2011-2022 走看看