zoukankan      html  css  js  c++  java
  • 三级联动日历例题

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

  • 相关阅读:
    云计算设计模式(十九)——运行重构模式
    云计算设计模式(十八)——重试模式
    云计算设计模式(十七)——基于队列的负载均衡模式
    云计算设计模式(十六)——优先级队列模式
    云计算设计模式(十五)——管道和过滤器模式
    云计算设计模式(十四)——实体化视图模式
    云计算设计模式(十三)——领导人选举模式
    云计算设计模式(十二)——索引表模式
    使用WebClient上传文件时的一些问题
    .NET研发人员面试题(一)
  • 原文地址:https://www.cnblogs.com/gbbwzz/p/7613172.html
Copyright © 2011-2022 走看看