实现年月日表单三级联动

最新推荐文章于 2022-12-06 09:35:33 发布
最新推荐文章于 2022-12-06 09:35:33 发布
阅读量3.8k 收藏 9
点赞数 5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_21923867/article/details/60881689
版权

用Html实现人人人人网注册界面 ，Js实现生日栏表单三级联动

1. 效果

动态效果.gif

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>
Charelesa
关注
  • 5
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
html表单 当前年月日_HTML5表单
weixin_39644614的博客
12-22 4203
表单是与用户交互的页面，HTML5将用于处理用户计算机中表单的代码库标准化，提供了新的属性、元素和完整的API。1.表单元素：表单没有太大的改动，其结构仍然保持不变，但HTML5增加了新的元素、输入类型和属性，可以根据需要进行扩展。1)元素：创建一个基本的表单模板：Forms 元素除一些常见属性，也有一些扩展属性。·autocomplete：可以添加on和off两个值，默认是on。如果设为off，...
html表单 当前年月日_js实现年月日表单三级联动
weixin_39843093的博客
12-22 658
用Html实现人人网注册界面 ，Js实现生日栏表单三级联动1. 效果2.Html代码部分人人网日期表单联动select{font:20px/40px '宋体';}option {width: 100px;}免费开通人人网账号注册邮箱: 你还可以使用 账号注册或者 手机号 注册创建密码: 真实姓名: 性别： 男女生日: 年月日我现在: 正在上学工作赋闲经商![](verycode.gif) 看不...
Excel中INDIRECT函数实现多级联表
u010542987的博客
12-06 1042
以上为待处理数据，我们拿到三个省和下级地市的信息，现在我们如何建立下拉表单实现多级筛选？我们将数据放到Excel表中：我们发现最左列是三个省市：上海、陕西、北京。可以看出这就是我们的一级菜单了。我们可以先制作一级下拉菜单（这个相对简单）：选中需要添加下拉菜单的单元格区域，在菜单栏中选择【数据】——【数据工具】——【数据验证】，弹出数据验证对话框中【允许】选择【序列】，然后最下面一栏选择来源，来源就是我们准备好的数据。（当然不嫌麻烦自己输入也可以） 咦？来源怎么是省市？不是应该是A1:A3么？这是因为我们对A
表单中日期选择、年月日时分秒的选择
hello，是翠花呀
08-04 1万+
直接提供方法 JS代码：（选择年月日）(function(){ var d=document, w=window, isIE=w.navigator.appVersion.indexOf("MSIE")>-1, now=new Date(), nowM=now.getMonth(); nowY=now.getF
uniapp实现村组数据多级联动
weixin_46319117的博客
11-30 1394
下面是最主要的数据处理事件,由于村组的数据是在一个接口中，只是根据pid展示村组的数据,传0返村的数据，传1返组的数据，我把事件单独抽取了出来，因为在后面的弹出组件回调事件中能用到。选择了村的数据才会有组的数据，下面为接口的返回格式。
JS 实现的年月日三级联动
故事我忘了°的博客
01-09 1612
JS 实现的年月日三级联动 js文件 SYT="-请选择年份-"; SMT="-请选择月份-"; SDT="-请选择日期-"; BYN=50;//年份范围往前50年 AYN=5;//年份范围往后0年 function YMDselect(){ this.SelY=document.getElementsByName(arguments[0])[0]; this.SelM=document.ge...
js实现年月日表单三级联动
10-20
主要为大家详细介绍了js实现年月日表单三级联动，生日栏表单三级联动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Android日期选择器实现年月日三级联动
08-28
本示例将介绍如何实现一个年月日三级联动的日期选择器，即当用户在滑动选择年份时，月份和日期会自动更新范围，确保选择的有效性。下面我们将详细探讨实现这一功能的关键步骤。 首先，我们需要创建一个自定义的弹出...
PHP 年月日的三级联动实例代码
10-19
主要介绍了PHP 年月日的三级联动实例代码的相关资料,需要的朋友可以参考下
前端代码下拉选择框显示年月日
热门推荐
abcnull 的博客
01-31 2万+
&lt;body&gt; &lt;form name="date"&gt; &lt;select name="year" onchange="selectYear(this.value)"&gt; &lt;option value=""&gt;选择 年&lt;/option&gt; &lt;/select&gt;
APR：Improving Person Re-identifification by Attribute and Identity Learning阅读笔记
qq_35226955的博客
08-20 742
Improving Person Re-identifification by Attribute and Identity Learning 作者：Yutian Lin, ZL，ZZD, 等人 2017 CVPR 1.摘要： attribute recognition和reid在行人描述上是common的，仅在粒度上不一样（属性识别主要依靠local aspect而reid主要依靠global...
Jquery--年月日级联选择
Ben的专栏
05-20 4057
年月日级联选择在项目开发中是经常需要到的，用jquery简单写了一个脚本，以便后续使用。  date.js: $(document).ready(function () { var year = $("#year"); var month = $(
html表格显示年月日,html的列表，表格，表单等常用标签的使用—2019年8月30日
weixin_42393576的博客
06-19 1748
标签，元素，属性的理解标签：1、HTML代码由许许多多不同的标签(tag )构成2、标签放在一对尖括号里面 (比如) ,大多数标签都是成对出现的，分成开始标签和结束标签,结束标签在标签名之前加斜杠(比如 )。但是，也有一些标签不是成对使用 ,而是只有开始标签,没有结束标签,比标签3、标签可以嵌套4、不区分大小写：,元素：浏览器渲染网页的时候。会把HTML源码解析成一个标签树 。每个标签都是一个节点...
Android 日期选择器，实现年月日三级联动
hubeiqiyuan的博客
08-08 9770
最近项目里面用到了一个日期选择器，实现现在主流的WheelView滑动选择，整理了下，做了个Demo.废话不多说，直接上代码： 主布局：activity_main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.androi
JavaScript实现年月日三级联动
happyPaste的博客
12-30 2185
初学Javascript,，写了一个实现年月日三级联动的小程序，记录一下： 年月日 请选择年份 1900 年 请选择月份 1 月 请选择日期 1 日 //onclick获得改变前的值。onchange获取改变后的值。 var yearNode = docu
JQuery年月日三级联动(生日)
netuser1937的博客
02-10 3326
JQuery年月日三级联动(生日)
android三级联动时间选择器
最新发布
04-27
Android三级联动时间选择器是一款方便用户选择时间的工具，可以通过滑动进行年、月、日的选择，并且可以设置起始时间和结束时间的范围，使得用户能够更加快捷方便地选择时间。 该时间选择器的设计理念是以简洁、...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值