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


Posted in Javascript onApril 17, 2020

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

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

Javascript 相关文章推荐
疯掉了,尽然有js写的操作系统
Apr 23 Javascript
javascript 获取url参数和script标签中获取url参数函数代码
Jan 22 Javascript
微博@符号的用户名提示效果。(想@到谁?)
Nov 05 Javascript
javascript设计简单的秒表计时器
Sep 05 Javascript
基于JavaScript实现移除(删除)数组中指定元素
Jan 04 Javascript
必备的JS调试技巧汇总
Jul 20 Javascript
BootStrap使用file-input插件上传图片的方法
Sep 05 Javascript
JavaScript“尽快失败”的原则实例详解
Oct 08 Javascript
jQuery验证表单格式的使用方法
Jan 10 Javascript
详解JQuery基础动画操作
Apr 12 jQuery
vue实现侧边栏导航效果
Oct 21 Javascript
vue 在methods中调用mounted的实现操作
Aug 07 Javascript
js实现3D图片展示效果
Mar 09 #Javascript
JavaScript实现左右下拉框动态增删示例
Mar 09 #Javascript
less简单入门(CSS 预处理语言)
Mar 08 #Javascript
完美实现js选项卡切换效果(二)
Mar 08 #Javascript
微信小程序中用WebStorm使用LESS
Mar 08 #Javascript
Vue常用指令V-model用法
Mar 08 #Javascript
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
Mar 08 #Javascript
You might like
PHP实现的memcache环形队列类实例
2015/07/28 PHP
微信支付开发订单查询实例
2016/07/12 PHP
yii2中LinkPager增加总页数和总记录数的实例
2017/08/28 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
PHP7 foreach() 函数修改
2021/03/09 PHP
jquery1.4后 jqDrag 拖动 不可用
2010/02/06 Javascript
js与jQuery 获取父窗、子窗的iframe
2013/12/20 Javascript
Nodejs异步回调之异常处理实例分析
2018/06/22 NodeJs
微信小程序实现手指触摸画板
2018/07/09 Javascript
图解javascript作用域链
2019/05/27 Javascript
layui 实现table翻页滚动条位置保持不变的例子
2019/09/05 Javascript
javascript实现异形滚动轮播
2019/11/28 Javascript
vue中使用WX-JSSDK的两种方法(推荐)
2020/01/18 Javascript
Vue基本指令实例图文讲解
2021/02/25 Vue.js
一篇文章入门Python生态系统(Python新手入门指导)
2015/12/11 Python
python Django模板的使用方法
2016/01/14 Python
浅谈Python的异常处理
2016/06/19 Python
Python爬虫包 BeautifulSoup  递归抓取实例详解
2017/01/28 Python
对Python信号处理模块signal详解
2019/01/09 Python
python实现月食效果实例代码
2019/06/18 Python
Django框架安装方法图文详解
2019/11/04 Python
Python 2种方法求某个范围内的所有素数(质数)
2020/01/31 Python
python用pip install时安装失败的一系列问题及解决方法
2020/02/24 Python
keras K.function获取某层的输出操作
2020/06/29 Python
css3动画过渡实现鼠标跟随导航效果
2018/02/08 HTML / CSS
Html5 页面适配iPhoneX(就是那么简单)
2019/09/05 HTML / CSS
Expedia英国:全球最大的在线旅游公司
2017/09/07 全球购物
大学生职业生涯规划书模版
2013/12/30 职场文书
周年庆典邀请函范文
2014/01/23 职场文书
陈欧的广告词
2014/03/18 职场文书
小学教师暑期培训方案
2014/08/28 职场文书
村主任“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
2014年行风建设工作总结
2014/12/01 职场文书
使用react-virtualized实现图片动态高度长列表的问题
2021/05/28 Javascript
Elasticsearch 配置详解
2022/04/19 Java/Android
SpringBoot详解整合Redis缓存方法
2022/07/15 Java/Android