欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2024-02-01 13:03:04
用html实现人人网注册界面 ,js实现生日栏表单三级联动 1. 效果 2.html代码部分

用html实现人人网注册界面 ,js实现生日栏表单三级联动

1. 效果

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

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>

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