前端开发工程师

期末考试客观题

�返回

期末考试主观题

http://www.jianshu.com/p/cb0c7dafd2cc

（5分）

请写出以下DOM树对应的HTML

<div>
    <h3><a href="">乔丹</a></h3>
    <p>NBA<em>最伟大</em>的球员</p>
</div>

（20分）

下图是网易博客“关于我”页面编辑生日时的日期级联下拉选择框的效果图：

初始的html代码如下：

</select>年

</select>月

</select>日

现需求如下：

“年”或“月”发生变化且为有效值时，“日”下拉选择框显示相应的项。
“年”下拉选择框为初始状态（即值为0）时， “月”、“日”下拉选择框一定为初始状态（即值为0）。
“月”下拉选择框为初始状态（即值为0）时， “日”下拉选择框一定为初始状态（即值为0）。

请写出以上需求的实现代码，要求浏览器兼容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>期末主观题2--页面编辑生日时的日期级联下拉选择框</title>
    <script type="text/javascript">
        
    function addEvent (elem, type, listener, useCapture) {
        if (document.addEventListener) {
            elem.addEventListener(type, listener, useCapture);
        } else {
            elem.attachEvent('on' + type, listener);
        }
    }

    function process() {
        var elementYear = document.getElementById('year');
        var elementMonth = document.getElementById('month');
        var elementDate = document.getElementById('date');
        var year, month, date;
        getCurrentInput();

        function getDays (year, month) {
            var days = 0;
            if(year!=0 && month!=0) {
                // year and month are set
                days = new Date(year, month, 0).getDate();
            }
            return days;
        }

        function addDayOptions(numdays) {
            // reset days and append new number of days
            elementDate.innerHTML = '<option value="0">--</option>';
            for(var i = 1; i <= numdays; i++) {
                var option = document.createElement('option');  
                 option.appendChild(document.createTextNode(''+i));  
                 option.setAttribute('value',''+i);  
                 elementDate.appendChild(option);  
            }
        }

        function getCurrentInput () {
            year = elementYear.options[elementYear.selectedIndex].value;
            month = elementMonth.options[elementMonth.selectedIndex].value;
            date = elementDate.options[elementDate.selectedIndex].value;
        }

        function check () {
            getCurrentInput();
            if (year == 0) {
                // if year has not been set yet
                elementMonth.options[0].selected = true;
            }
            addDayOptions(getDays(year, month));
        }


        addEvent(elementYear, 'change', check);

        addEvent(elementMonth, 'change', check);
    }

    addEvent(window,'load', process);

    </script>
</head>
<body>
    <select name="year" id="year">
        <option value="0">--</option>
        <option value="1999">1999</option>
        <option value="2000">2000</option>
        <option value="2001">2001</option>
    </select>年
    <select name="month" id="month">
        <option value="0">--</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
    </select>月
    <select name="date" id="date">
        <option value="0">--</option>
    </select>日
</body>
</html>