Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>人人网</title>
    <script>
        //年份，月份，日期select标签对应的元素
        var elementYear;
        var elementMonth;
        var elementDay;
        //年份，月份里的所有的元素（选项）
        var optionsForMonth;
        var optionsForYear;
        function setDate() {//增加日期的选项
            //拿到年份标签里所有的选项元素
            optionsForYear=elementYear.options;
            //拿到月份标签里所有的选项元素
            optionsForMonth=elementMonth.options;
            //因为要与年份与月份进行联动，所以要先拿到当前年份和月份的数值
            var selectedYear=optionsForYear[elementYear.selectedIndex].value;
            //console.log(selectedYear)
            var selectedMonth=optionsForMonth[elementMonth.selectedIndex].value;
            //console.log(selectedMonth)
            //根据当前选择的年份与月份进行判断构建新的日期选项
            //先将日期删除到初始状态28天
            while(elementDay.length>28){
                console.log(elementDay.length);
                elementDay.removeChild(elementDay.lastChild);
            }
            //再根据年份来判断是否是闰年
            var specialMonth;//存放2月实际天数
            if(selectedYear % 4 == 0 && selectedYear % 100 != 0 || selectedYear % 400 == 0){
                specialMonth=29;
            }else{
                specialMonth=28;
            }
            //根据月份来给day标签增加选项
            var number;//存放当月天数
            if(selectedMonth==2){
                number=specialMonth;
            }else if(selectedMonth==4||selectedMonth==6||selectedMonth==9||selectedMonth==11){
                number=30;
            }else{
                number=31;
            }
            //根据具体月份增加到对应的天数
            for(var i=29;i<=number;i++){
                //创建日期的元素节点
                var element=document.createElement("option");
                //为该节点增加属性节点
                element.setAttribute("value",i);
                //为对应元素节点增加文本节点
                element.appendChild(document.createTextNode(i));
                //将日期元素节点加入到日期的select标签中作为孩子节点
                elementDay.appendChild(element)
            }

        }
        function setDay() {//增加日期选项
            elementDay=document.getElementById("day");
            for(var i=2;i<=31;i++){
                //创建对应日期的元素节点
                var element=document.createElement("option");
                //为该节点增加属性节点
                element.setAttribute("value",i);
                //为对应元素节点增加文本节点
                element.appendChild(document.createTextNode(i));
                //将日期元素节点加入到日期的select标签中
                elementDay.appendChild(element)
            }
        }

        function setMonth() {//增加月份选项
            elementMonth=document.getElementById("month");
            for(var i=2;i<=12;i++){
                //创建对应月份的元素节点
                var element=document.createElement("option");
                //为该节点增加属性节点
                element.setAttribute("value",i);
                //为对应元素节点增加文本节点
                element.appendChild(document.createTextNode(i));
                //将月份元素节点加入到月份的select标签中
                elementMonth.appendChild(element)
            }
        }

        function setYear() {//功能，增加年份的选项
            elementYear = document.getElementById("year");
            for(var i=2017;i>=1980;i--){
                //创建对应年份的元素节点
                var element = document.createElement("option");
                //为该节点增加属性节点
                element.setAttribute("value",i);
                //为对应元素节点增加文本节点
                element.appendChild(document.createTextNode(i));
                //将年份元素节点加入到年份的select标签中
                elementYear.appendChild(element)
            }
            setMonth();
            setDay();
        }

    </script>
</head>
<body onload="setYear()">
<h3>免费开通人人网账号</h3>
<form action="/re/ren" method="post">
    <table cellspacing="25">
        <tr><td>注册邮箱：</td><td><input type="text" name="emile"></td></tr>
        <tr><td> </td><td>你还可以使用 <a href="">账号</a> 注册或者 <a href="">手机号</a> 注册</td></tr>
        <tr><td>创建密码：</td><td><input type="password" name="password"></td></tr>
        <tr><td>真实姓名：</td><td><input type="text" name="name"></td></tr>
        <tr><td align="right">性别：</td><td><input type="radio" name="sex" value="male">男
                                             <input type="radio" name="sex" value="female">女</td></tr>
        <tr><td align="right" name="birthday">生日：</td><td>

            <select name="year" id="year" onchange="setDate()"><option>2018</option></select> 年
            <select name="month" id="month" onchange="setDate()"><option>1</option></select> 月
            <select name="day" id="day"><option>1</option></select> 日 </td></tr>

        <tr><td align="right">我现在：</td><td><select name="status"><option>正在上学</option></select></td></tr>
        <tr><td> </td><td><table><tr><td><img src="verycode.gif" height="55" width="132"/></td>
            <td align="right"><a href="">看不清换一张？</a></td></tr></table></td></tr>
        <tr><td>验证码：</td><td><input type="text" name="check"></td></tr>
        <tr><td></td><td><input type="image" src="btn_reg.gif" height="40" width="186"/></td></tr>
    </table>
</form>
</body>
</html>