从https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Objects 学习到的建立一个选择日期，比如工作年份，毕业年份，生日等

最新推荐文章于 2024-05-21 19:09:41 发布

taojunhust2

最新推荐文章于 2024-05-21 19:09:41 发布

阅读量241

点赞数 1

文章标签： javascript https html

本文链接：https://blog.csdn.net/weixin_47024922/article/details/120384754

版权

首先声明如下：这个是从：
https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Objects
中学习object时，同时还有input标签时学习到的。
第一步：先放html代码。

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title>JS-Object02</title>
     </head>
     <body>
          <form>
            <p class="datepicker">Select a date</p>
            <div class="datefallback">
               <label for="day">Day:</label>
               <select id="day" name="day">
                    
               </select>
               <label for="month">Month:</label>
               <select id="month" name="month">
                    <option selected>January</option>
                    <option>Feburary</option>
                    <option>March</option>
                    <option>April</option>
                    <option>May</option>
                    <option>June</option>
                    <option>July</option>
                    <option>August</option>
                    <option>September</option>
                    <option>October</option>
                    <option>November</option>
                    <option>December</option>
               </select>
               <label for="year">Year:</label>
               <select id="year" name="year">
                    
               </select>
            </div>
          </form>

     </body>
     <script>
          var yearSelect=document.querySelector('#year');
          var monthSelect=document.querySelector('#month');
          var daySelect=document.querySelector('#day');
          console.log('type of daySelect is ',typeof(daySelect));
          if(monthSelect.value!='Null'){
               //monthSelect.value是选择框中选择的值；
               //populate the days and years dynamically;
               // the months are always the same， therefore hardcoded;
               populateDays(monthSelect.value);
               populateYears();
          }
          function populateDays(month){
               //delete the current set of day;
               /*while(daySelect.firstChild){
                    console.log('daySelect.firstChild =   ',daySelect.firstChild);
                    console.log(typeof(daySelect.firstChild));
                    console.log(daySelect.firstChild.value);
                    daySelect.removeChild(daySelect.firstChild);
               }
               */
               //create day <option> element
               var dayNum;
               if(month==='January'||month==='March'||month==='May'||month==='July'||month==='August'||month==='October'||month==='December'){
                    dayNum=31;
               }else if(month==='April'||month==='June'||month==='September'||month==='November'){
                    dayNum=30;
               }else{
                    (yearSelect.value-2016)%4===0?dayNum=29:dayNum=28;
               }
               for(i=1;i<=dayNum;i++){
                    var option=document.createElement('option');
                    option.textContent=i;
                    daySelect.appendChild(option);
               }
          }
          function populateYears(){
               //得到现在的日期年份;
               var date=new Date();
               console.log('date is =',date);
               var year=date.getFullYear();
               for(i=0;i<=100;i++){
                    var option=document.createElement('option');
                    option.textContent=year-i;
                    yearSelect.appendChild(option);
               }
          }
          yearSelect.onchange=function(){
               populateDays(monthSelect.value);
          }
          monthSelect.onchange=function(){
               populateDays(monthSelect.value);
          }
     </script>
     </html>

 第二部分：显示结果
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/5d893bb89c2049c3a86f689214703c8f.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAdGFvanVuaHVzdDI=,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)

在这里插入图片描述

taojunhust2

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
从https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Objects 学习到的建立一个选择日期，比如工作年份，毕业年份，生日等

首先声明如下：这个是从：https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Objects中学习object时，同时还有input标签时学习到的。第一步：先放html代码。 JS-Object02 Select a date Day:
复制链接

扫一扫