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写的数字拼图小游戏代码[学习参考]
Oct 29 Javascript
jquery EasyUI的formatter格式化函数代码
Jan 12 Javascript
图片在浏览器中底部对齐 解决方法之一
Nov 30 Javascript
基于jquery的鼠标拖动效果代码
May 30 Javascript
11个用于提高排版水平的基于jquery的文字效果插件
Sep 14 Javascript
angularJS中router的使用指南
Feb 09 Javascript
js中跨域方法原理详解
Jul 19 Javascript
jQuery实现弹出带遮罩层的居中浮动窗口效果
Sep 12 Javascript
JavaScript中正则表达式判断匹配规则及常用方法
Aug 03 Javascript
vue-cli3项目展示本地Markdown文件的方法
Jun 07 Javascript
Vue 3.x+axios跨域方案的踩坑指南
Jul 04 Javascript
layui form表单提交之后重新加载数据表格的方法
Sep 11 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
《心理测量者3》剧场版动画预告
2020/03/02 日漫
山进SANGEAN ATS-909X电路分析
2021/03/02 无线电
ASP知识讲座四
2006/10/09 PHP
php5.2时间相差8小时
2007/01/15 PHP
基于PHP实现简单的随机抽奖小程序
2016/01/05 PHP
PHP连接MYSQL数据库实例代码
2016/01/20 PHP
php+js实现的拖动滑块验证码验证表单操作示例【附源码下载】
2020/05/27 PHP
JavaScript 学习小结(适合新手参考)
2009/07/30 Javascript
通过JS 获取Mouse Position(鼠标坐标)的代码
2009/09/21 Javascript
jqeury eval将字符串转换json的方法
2011/01/20 Javascript
jquery解析xml字符串简单示例
2014/04/11 Javascript
jquery实现鼠标滑过小图时显示大图的方法
2015/01/14 Javascript
Node.js中child_process实现多进程
2015/02/03 Javascript
jsonp跨域请求数据实现手机号码查询实例分析
2015/12/12 Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
2016/09/27 Javascript
JS常用函数和常用技巧小结
2016/10/15 Javascript
Angularjs之filter过滤器(推荐)
2016/11/27 Javascript
javascript中json对象json数组json字符串互转及取值方法
2017/04/19 Javascript
Node.js+ES6+dropload.js实现移动端下拉加载实例
2017/06/01 Javascript
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
2017/06/13 Javascript
编写Python脚本来实现最简单的FTP下载的教程
2015/05/04 Python
python深度优先搜索和广度优先搜索
2018/02/07 Python
PyQt5实现从主窗口打开子窗口的方法
2019/06/19 Python
使用python图形模块turtle库绘制樱花、玫瑰、圣诞树代码实例
2020/03/16 Python
Python docutils文档编译过程方法解析
2020/06/23 Python
python 30行代码实现蚂蚁森林自动偷能量
2021/02/08 Python
10分钟入门CSS3 Animation
2018/12/25 HTML / CSS
zooplus意大利:在线宠物商店
2019/08/07 全球购物
美国相机和电子产品零售商:Beach Camera
2020/11/26 全球购物
Does C# support multiple inheritance? (C#支持多重继承吗)
2012/01/04 面试题
我们没有写servlet的构造方法,那么容器是怎么创建servlet的实例呢
2013/04/24 面试题
3.15消费者权益日活动总结
2015/02/09 职场文书
2015年七一建党节活动方案
2015/05/05 职场文书
婚宴来宾致辞
2015/07/28 职场文书
用Python远程登陆服务器的步骤
2021/04/16 Python
vue ant design 封装弹窗表单的使用
2022/06/01 Vue.js