首页 > 其他 > 详细

三级联动日历例题

时间:2017-09-29 23:38:35      阅读:271      评论:0      收藏:0      [点我收藏+]

<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>

三级联动日历例题

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!