<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <!--复选框  按钮可点击-->
        <!--<input type="checkbox" id="ckb" onclick="check()" />
        <input type="button" disabled="disabled" value="下一步" id="btn" />-->
        <!--单选框选项切换-->
        <!--<select size="7" style="width: 150px;" id="slt1">
            <option value="A">A</option>
            <option value="BBBBB">BBBBB</option>
            <option value="CC">CC</option>
            <option value="DDDDDDDDD">DDDDDDDDD</option>
            <option value="EEEE">EEEE</option>
        </select>
        <input type="button" value=">>>>>" id="to_right" />
        <input type="button" value="<<<<<" id="to_left" />
        <select size="7" style="width: 150px;" id="slt2"></select>-->
        <!--日期时间选择-->
        <select id='year' onchange="addDay()"></select>
        <select id="month" onchange="addDay()"></select>
        <select id="date"></select>
    </body>

</html>
<script>
    //    <!--复选框  按钮可点击-->
    //    function check() {
    //        var ckb = document.getElementById('ckb');
    //        if(ckb.checked) {
    //            document.getElementById('btn').removeAttribute('disabled');
    //        } else {
    //            document.getElementById('btn').setAttribute('disabled','disabled');
    //        }
    //    }
    //        单选框切换选项
    //    document.getElementById('to_right').onclick = function() {
    //        var slt1 = document.getElementById('slt1');
    //        var slt2 = document.getElementById('slt2');
    //        拼接字符串方法
    //        var temp = '<option value="' + slt1.value + '">' +
    //            slt1.value +
    //            '</option>';
    //        slt1.innerHTML = slt1.innerHTML.replace(temp, '')
    //        slt2.innerHTML += temp;
    //        取对象方法
    //        var obj_temp = slt1.options[slt1.selectedIndex];
    //        slt2.appendChild(obj_temp);
    //    }
    //    日期时间选择

    var year_slt = document.getElementById('year');
    var month_slt = document.getElementById('month');
    var day_slt = document.getElementById('date');
    var now = new Date();
    now_year = now.getFullYear();

    for(var i = now_year; i >= now_year - 70; i--) {
        var opt_year = document.createElement('option');
        opt_year.value = i;
        opt_year.innerText = i;
        year_slt.appendChild(opt_year);
    }

    for(var i = 1; i <= 12; i++) {
        var opt_month = document.createElement('option');
        opt_month.value = i;
        opt_month.innerText = i;
        month_slt.appendChild(opt_month);
    }

    function isRun(year) {
        if((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) {
            return 29;
        } else {
            return 28
        }
    }

    function addDay() {
        day_slt.innerHTML = '';
        if(month_slt.value == 1 || month_slt.value == 3 || month_slt.value == 5 || month_slt.value == 7 || month_slt.value == 8 || month_slt.value == 10 || month_slt.value == 12) {
            for(var i = 1; i <= 31; i++) {
                var day = document.createElement('option');
                day.value = i;
                day.innerText = i;
                day_slt.appendChild(day);
            }
        } else if(month_slt.value == 4 || month_slt.value == 6 || month_slt.value == 9 || month_slt.value == 11) {
            for(var i = 1; i <= 30; i++) {
                var day = document.createElement('option');
                day.value = i;
                day.innerText = i;
                day_slt.appendChild(day);
            }
        } else {
            for(var i = 1; i <= isRun(year_slt.value); i++) {
                var day = document.createElement('option');
                day.value = i;
                day.innerText = i;
                day_slt.appendChild(day);
            }
        }

    }
</script>