zoukankan      html  css  js  c++  java
  • 年月日 日期选择问题

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                div
                {
                    height: 300px;
                     300px;
                    margin: 0px auto;
                }
            </style>
        </head>
        <body>
            <div>
             <select id="year" onChange="a()">
                   <option value="0" selected></option>
                  <!--<option value="1986">1986</option>
                  <option value="1987">1987</option> 
                  <option value="1988">1988</option>
                  <option value="1989">1989</option>
                  <option value="1990">1990</option>
                  <option value="1991">1991</option>
                  <option value="1992">1992</option>
                  <option value="1993">1993</option>
                  <option value="1994">1994</option>
                  <option value="1995">1995</option>
                  <option value="1996">1996</option>
                  <option value="1997">1997</option>
                  <option value="1998">1998</option>
                  <option value="1999">1999</option>
                  <option value="2000">2000</option>
                  <option value="2001">2001</option>
                  <option value="2002">2002</option>
                  <option value="2003">2003</option>
                  <option value="2004">2004</option>
                  <option value="2005">2005</option>
                  <option value="2006">2006</option>
                  <option value="2007">2007</option>
                  <option value="2008">2008</option>
                  <option value="2009">2009</option>
                  <option value="2010">2010</option>
                  <option value="2011">2011</option>
                  <option value="2012">2012</option>
                  <option value="2013">2013</option>
                  <option value="2014">2014</option>
                  <option value="2015">2015</option>
                  <option value="2016">2016</option>
                  <option value="2017">2017</option>-->
                </select><select id="month" onChange="b()">   
                  <option value="0"></option>
                  <!--<option value="1">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                  <option value="5">5</option>
                  <option value="6">6</option>
                  <option value="7">7</option>
                  <option value="8">8</option>
                  <option value="9">9</option>
                  <option value="10">10</option>
                  <option value="11">11</option>
                  <option value="12">12</option>-->
                </select><select id="day">                    
                  <!--<option value="1" selected>1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                  <option value="5">5</option>
                  <option value="6">6</option>
                  <option value="7">7</option>
                  <option value="8">8</option>
                  <option value="9">9</option>
                  <option value="10">10</option>
                  <option value="11">11</option>
                  <option value="12">12</option>
                  <option value="13">13</option>
                  <option value="14">14</option>
                  <option value="15">15</option>
                  <option value="16">16</option>
                  <option value="17">17</option>
                  <option value="18">18</option>
                  <option value="19">19</option>
                  <option value="20">20</option>
                  <option value="21">21</option>
                  <option value="22">22</option>
                  <option value="23">23</option>
                  <option value="24">24</option>
                  <option value="25">25</option>
                  <option value="26">26</option>
                  <option value="27">27</option>
                  <option value="28">28</option>-->
                </select></div>
        </body>
    </html>
    <script>
        
        var runnian;
        var opt1=Array();
        var opt2=Array();
        var year = document.getElementById("year");
        for(var k=1980;k<=2017;k++)
                {  
                    opt1[k] = document.createElement('option');
                    year.value = k;
                    opt1[k].innerText = k;
                    year.appendChild(opt1[k]);
                }
        function a()
        {
            
         var year = document.getElementById("year");
         var month = document.getElementById("month")
         month.options.length=1;    
         var day =document.getElementById('day');
         day.options.length=0;
          
         if((year.value%4==0&&year.value%100!=0)||year.value%400==0)
         {
             runnian=true;
         }
         else
         {
             runnian=false;
         }
         for(var j=1;j<=12;j++)
                {  
                    opt1[j] = document.createElement('option');
                    month.value = j;
                    opt1[j].innerText = j;
                    month.appendChild(opt1[j]);
                }
        }

    以上实现的是年月日 日期时间选择(自己的版本)

    <!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    
    	<body>
    	
    		<select id='year' onchange="addDay()"></select>
    		<select id="month" onchange="addDay()"></select>
    		<select id="date"></select>
    	</body>
    
    </html>
    <script>
    
    	var year_slt = document.getElementById('year');
    	var month_slt = document.getElementById('month');
    	var day_slt = document.getElementById('date');
    	var now = new Date();
    	now_year = now.getFullYear();
    
    	for(var i = now_year; i >= now_year - 70; i--) {
    		var opt_year = document.createElement('option');
    		opt_year.value = i;
    		opt_year.innerText = i;
    		year_slt.appendChild(opt_year);
    	}
    
    	for(var i = 1; i <= 12; i++) {
    		var opt_month = document.createElement('option');
    		opt_month.value = i;
    		opt_month.innerText = i;
    		month_slt.appendChild(opt_month);
    	}
    
    	function isRun(year) {
    		if((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) {
    			return 29;
    		} else {
    			return 28
    		}
    	}
    
    	function addDay() {
    		day_slt.innerHTML = '';
    		if(month_slt.value == 1 || month_slt.value == 3 || month_slt.value == 5 || month_slt.value == 7 || month_slt.value == 8 || month_slt.value == 10 || month_slt.value == 12) {
    			for(var i = 1; i <= 31; i++) {
    				var day = document.createElement('option');
    				day.value = i;
    				day.innerText = i;
    				day_slt.appendChild(day);
    			}
    		} else if(month_slt.value == 4 || month_slt.value == 6 || month_slt.value == 9 || month_slt.value == 11) {
    			for(var i = 1; i <= 30; i++) {
    				var day = document.createElement('option');
    				day.value = i;
    				day.innerText = i;
    				day_slt.appendChild(day);
    			}
    		} else {
    			for(var i = 1; i <= isRun(year_slt.value); i++) {
    				var day = document.createElement('option');
    				day.value = i;
    				day.innerText = i;
    				day_slt.appendChild(day);
    			}
    		}
    
    	}
    </script>
    

      以上是老师的版本,相较有多处更加简洁的写法,值得以后借鉴

  • 相关阅读:
    iptables允许FTP
    FTP服务添加用户及设置权限
    Python之异步IO&RabbitMQ&Redis
    Python之生产者&、消费者模型
    如何使用Git上传项目代码到github
    11-3 基于cookie和session的登录模块
    11-1 会话控制cookie
    11-2 会话控制session
    10-4 文件的下载
    10-3 文件的上传
  • 原文地址:https://www.cnblogs.com/angangxiaofa/p/6754633.html
Copyright © 2011-2022 走看看