码迷,mamicode.com
首页 > 其他好文 > 详细

三级联动日历例题

时间:2017-09-30 00:23:29      阅读:209      评论:0      收藏:0      [点我收藏+]

标签:bsp   selected   size   amp   ack   根据   rip   +=   闰年   

<body>
        <select id="year"></select>年
        <select id="month"></select>月
        <select id="day"></select>日                                                                           //设置年月日下拉框
    </body>

</html>
<script>
    var year = document.getElementById("year");                                                   定义年月日
    var month = document.getElementById("month");
    var day = document.getElementById("day");

    var time = new Date();                                                                                 定义时间获取时间
    year_now = time.getFullYear();

    for(var i = year_now - 100; i < year_now + 100; i++) {                                   添加年份
        year.innerHTML += "<option>" + i + "</option>"
    }
    for(var i = 1; i < 13; i++) {                                                                                添加月份
        month.innerHTML += "<option>" + i + "</option>";
    }

    function days(max) {                                                                                      根据月份定义天数
        day.innerHTML = "";
        for(var i = 1; i <= max; i++) {
            day.innerHTML += "<option value=‘"+i+"‘>" + i + "</option>";
        }
    }
    
    year.onchange = function(){                                                                      给1、3、5、7、8、10、12月添加日期
        if( month.selectedOptions[0].innerHTML==1   ||
            month.selectedOptions[0].innerHTML==3   ||
            month.selectedOptions[0].innerHTML==5   ||
            month.selectedOptions[0].innerHTML==7   ||
            month.selectedOptions[0].innerHTML==8   ||
            month.selectedOptions[0].innerHTML==10  ||
            month.selectedOptions[0].innerHTML==12
        ){
            days(31);
        }else if(                                                                                                                如果不是31天月份则添加30天
            month.selectedOptions[0].innerHTML==4   ||
            month.selectedOptions[0].innerHTML==6   ||
            month.selectedOptions[0].innerHTML==9   ||
            month.selectedOptions[0].innerHTML==11  
        ){
            days(30);
        }else{                                                                                                                                   给二月添加天数区分闰年平年
            var year_selected = year.selectedOptions[0].innerHTML;
            if((year_selected%4==0&&year_selected%100!=0)||year_selected%400==0){
                days(29);
            }else{
                days(28);
            }
        }
    }
    month.onchange = function(){                                                                                                         同上
        if( month.selectedOptions[0].innerHTML==1   ||
            month.selectedOptions[0].innerHTML==3   ||
            month.selectedOptions[0].innerHTML==5   ||
            month.selectedOptions[0].innerHTML==7   ||
            month.selectedOptions[0].innerHTML==8   ||
            month.selectedOptions[0].innerHTML==10  ||
            month.selectedOptions[0].innerHTML==12
        ){
            days(31);
        }else if(
            month.selectedOptions[0].innerHTML==4   ||
            month.selectedOptions[0].innerHTML==6   ||
            month.selectedOptions[0].innerHTML==9   ||
            month.selectedOptions[0].innerHTML==11  
        ){
            days(30);
        }else{
            var year_selected = year.selectedOptions[0].innerHTML;
            if((year_selected%4==0&&year_selected%100!=0)||year_selected%400==0){
                days(29);
            }else{
                days(28);                                                                                     
            }
        }
    }
</script>

三级联动日历例题

标签:bsp   selected   size   amp   ack   根据   rip   +=   闰年   

原文地址:http://www.cnblogs.com/gbbwzz/p/7613172.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!