js实现年月日表单三级联动

用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 align="center">
    免费开通人人网账号     

  </h3></b>

  <table align="center" 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 align="right">性别：  </td><td>男<input type = "radio" value = "male" name = "gender"/>
       女<input type = "radio" value = "female" name = "gender"/></td></tr>

    <tr><td align="right">生日:   </td><td>

    <div id="box">
      <select name="sel1" id="sel1">
        <option value="year">年</option>
      </select>
      <select name="sel2" id="sel2">
        <option value="month">月</option>
      </select>
      <select name="sel3" id="sel3">
        <option value="day">日</option>
      </select>
      <span id="result"></span>
    </div></td></tr>

    <tr><td align="right">我现在:   </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>![](verycode.gif)  <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"> ![](btn_reg.gif)</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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。