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

2024-11-26 22:05:31

用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>

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

实现一个年、月、季度联动SELECT的javascript代码

请选择报告类型月度报告季度报告半年报告年度报告 function GetValue(){ var objlist = document.getElementsByTagName("SELECT"); var tmp = new Array(); var tap = objlist[0].options[objlist[0].selectedIndex].text; strTmp=""; var j = 1; for(var i=1;i0){ select.o
javascript 表单日期选择效果

Agenda BODY { FONT-SIZE: 9pt; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; } A { FONT-SIZE: 9pt; TEXT-DECORATION: none; color: #000000 } A:hover { TEXT-DECORATION: none; color: #000000 } A:link { TEXT-DEC
javascript英文日期（有时间）选择器

var languageCode = 'en'; // Possible values: en,ge,no,nl,es,pt-br,fr // en = english, ge = german, no = norwegian,nl = dutch, es = spanish, pt-br = portuguese, fr = french, da = danish, hu = hungarian(Use UTF-8
javascript 年月日联动实现核心代码

复制代码代码如下: var StartYear = 1980; var EndYear = 2500; function MonthAndDay() { this.initDDL = function(objYear,objMonth,objDay,hidYear,hidMonth,hidDay) { this.init(objYear,objMonth,objDay,hidYear,hidMonth,hidDay); this.SelectChange(objYear,objMonth,ob
js选择日期

var DS_x,DS_y; function dateSelector() //构造dateSelector对象,用来实现一个日历形式的日期输入框. { var myDate=new Date(); this.year=myDate.getYear(); //定义year属性,年份,默认值为当前系统年份. this.month=myDate.getMonth()+1; //定义month属性,月份,默认值为当前系统月份. this.date=myDate.getDate(); //定义date
JS日期和时间选择控件升级版(自写)

鉴于网上找到的几个日期选择程序有些问题,遂着手重写一个程序,大部分还是借鉴前人的代码,添加了时间选择功能,隐藏会遮挡控件的标签select,object. 开始本想使用window.createPopup()来弹出日历的选择,这样就可以跨过任何标签. 不过做到中途发现用createPopup窗口实现理论上是行不通的: 一是因为不在窗体里单击任何地方都会关闭窗口,而当用下拉框选择年份时,很有可能会单击到窗体外的地方,当然这个可以自己写select来避免,但是比较麻烦: 二是窗体的宽度和高度只能在弹
input 日期选择功能的javascript代码

document.writeln(' '); document.writeln(' '); document.writeln(' '); document.writeln(' '); document.writeln(' '); document.writeln(' '); document.writeln(' '); document.writeln(' '); document.writeln(' <'); document.writeln(' '); document.writeln('
javascript 09年最新版的省市联动

请选择请选择请选择 var areaData = "110000|北京市,110100|市辖区,110101|东城区,110102|西城区,110103|崇文区,110104|宣武区,110105|朝阳区,110106|丰台区,110107|石景山区,110108|海淀区,110109|门头沟区,110111|房山区,110112|通州区,110113|顺义区,110114|昌平区,110115|大兴区,110116|怀柔区,110117|平谷区,110200|县,110228|密云县,11
javascript实现日期三级联动下拉框选择菜单

由于工作中涉及到生日编辑资料编辑,年月日用上面网址案例:bug提示: 编辑生日栏的[年]或者[月],之前保存的具体的[日]就不显示啦,产品说不管编辑哪个数据,其他数据不变: 然后自己改了一下代码: <html> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width,initial-scale=1,minimu
js简单的年月联动实现代码

HTML 复制代码代码如下: <SELECT NAME="SelTjYear"> </SELECT> <SELECT NAME="SelTjMonth"> </SELECT> 源码: 复制代码代码如下: function vYearMonth(yearObjId, monthObjId) { var selYear = document.getElementById(yearObjId); var selMonth

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

相关推荐

随机推荐