用Html实现人人网注册界面 ，Js实现生日栏表单三级联动
1. 效果
2.Html代码部分
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>人人网日期表单联动</title> <style> select { font:20px/40px '宋体'; } option {width: 100px;} </style> </head> <body> <form method = "get" onchange="changeMonth()"> <b><h3> 免费开通人人网账号 </h3></b> <table height = "500"> <tr ><td>注册邮箱: </td><td> <input type = "text" name = "name"/></td></tr> <tr><td> </td><td>你还可以使用 <a href="https://www.baidu.com">账号</a> 注册或者 <a href="https://www.baidu.com">手机号</a> 注册</td></tr> <tr><td>创建密码: </td><td><input type = "password" name = "password"/></td></tr> <tr><td>真实姓名: </td><td><input type = "password" name = "name"/></td> <tr><td>性别： </td><td>男<input type = "radio" value = "male" name = "gender"/> 女<input type = "radio" value = "female" name = "gender"/></td></tr> <tr><td>生日: </td><td> <div> <select> <option value="year">年</option> </select> <select> <option value="month">月</option> </select> <select> <option value="day">日</option> </select> <span></span> </div></td></tr> <tr><td>我现在: </td> <td><select name = "subject"> <option value = "xu">正在上学</option> <option value = "cz">工作</option> <option value = "gz">赋闲</option> <option value = "bk">经商</option> </select></td></tr> <tr><td></td><td> <a href="https://www.baidu.com">看不清换一张？</a> </td></tr> <tr><td>验证码:</td><td><input type = "password" name = "yanzheng"/></td></tr> <tr><td></td><td><a href="https://www.baidu.com"> </a></td></tr> </table> </form> </body> </html>
3.JavaScript代码
<script> //生成日期 function creatDate() { //生成1900年-2100年 for(var i = 2016; i >= 1950; i--) { //创建select项 var option = document.createElement('option'); option.setAttribute('value',i); option.innerHTML = i; sel1.appendChild(option); } //生成1月-12月 for(var i = 1; i <=12; i++){ var option1 = document.createElement('option'); option1.setAttribute('value',i); option1.innerHTML = i; sel2.appendChild(option1); } //生成1日—31日 for(var i = 1; i <=31; i++){ var option2 = document.createElement('option'); option2.setAttribute('value',i); option2.innerHTML = i; sel3.appendChild(option2); } } creatDate(); //保存某年某月的天数 var days; //年份点击 绑定函数 sel1.onclick = function() { //月份显示默认值 sel2.options[0].selected = true; //天数显示默认值 sel3.options[0].selected = true; } //月份点击 绑定函数 sel2.onclick = function() { //天数显示默认值 sel3.options[0].selected = true; //计算天数的显示范围 //如果是2月 if(sel2.value == 2) { //判断闰年 if((sel1.value % 4 === 0 && sel1.value % 100 !== 0) || sel1.value % 400 === 0) { days = 29; } else { days = 28; } //判断小月 }else if(sel2.value == 4 || sel2.value == 6 ||sel2.value == 9 ||sel2.value == 11){ days = 30; }else{ days = 31; } //增加或删除天数 //如果是28天，则删除29、30、31天(即使他们不存在也不报错) if(days == 28){ sel3.remove(31); sel3.remove(30); sel3.remove(29); } //如果是29天 if(days == 29){ sel3.remove(31); sel3.remove(30); //如果第29天不存在，则添加第29天 if(!sel3.options[29]){ sel3.add(new Option('29','29'),null) } } //如果是30天 if(days == 30){ sel3.remove(31); //如果第29天不存在，则添加第29天 if(!sel3.options[29]){ sel3.add(new Option('29','29'),null) } //如果第30天不存在，则添加第30天 if(!sel3.options[30]){ sel3.add(new Option('30','30'),null) } } //如果是31天 if(days == 31){ //如果第29天不存在，则添加第29天 if(!sel3.options[29]) { sel3.add(new Option('29','29'),null) } //如果第30天不存在，则添加第30天 if(!sel3.options[30]) { sel3.add(new Option('30','30'),null) } //如果第31天不存在，则添加第31天 if(!sel3.options[31]) { sel3.add(new Option('31','31'),null) } } } //结果显示 设置好日期时间后 弹窗通知 box.onclick = function() { //当年、月、日都已经为设置值时 if(sel1.value !='year' && sel2.value != 'month' && sel3.value !='day') { alert("日期时间已经设定好"); } } </script>