简单日历的实现（订票）

废话少说，直接上代码

一、HTML代码

<body>
        <input class="text" type="text" placeholder="出发时间" id="txt" value=""/>
        <br /><br /><br />
        <input class="text2" type="text" placeholder="返回时间" id="txt1" value=""/>
        <div id="calendar" style="display: none;">
            
            <h4>2020年10月</h4>
            <a href="##" class="a1">上月</a>
            <a href="##" class="a2">下月</a>
            <ul class="week">
                <li>日</li>
                <li>一</li>
                <li>二</li>
                <li>三</li>
                <li>四</li>
                <li>五</li>
                <li>六</li>

            </ul>
            <ul class="dateList"></ul>
        </div>
    </body>

二、CSS代码

  * {
      margin: 0;
      padding: 0
  }
  
  .text,.text2{
      position: relative;
      left: 500px;
      top:100px;
  }
  
  #calendar {
      width: 210px;
      margin: 100px auto;
      overflow: hidden;
      border: 1px solid #000;
      padding: 20px;
      position: absolute;
      cursor: pointer;
      left:475px;
      background-color: green;
  }
  
  #calendar h4 {
      text-align: center;
      margin-bottom: 10px
  }
  
  #calendar .a1 {
      position: absolute;
      top: 20px;
      left: 20px;
  }
  
  #calendar .a2 {
      position: absolute;
      top: 20px;
      right: 20px;
  }
  
  #calendar .week {
      height: 30px;
      line-height: 20px;
      border-bottom: 1px solid #000;
      margin-bottom: 10px
  }
  
  #calendar .week li {
      float: left;
      width: 30px;
      height: 30px;
      text-align: center;
      list-style: none;
  }
  
  #calendar .dateList {
      overflow: hidden;
      clear: both
  }
  
  #calendar .dateList li {
      float: left;
      width: 30px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      list-style: none;
      
  }
  
  #calendar .dateList .ccc {
      color: #ccc;
  }
  
  #calendar .dateList .red {
      background: #F90;
      color: #fff;
  }
  
  #calendar .dateList .sun {
      color: #f00;
  }

三、JS代码

<script type="text/javascript">
        $(function() {
            var flag="";//设置参数，确定是出发时间还是返回时间
                $("#txt").click(function(){
                     $("#calendar").css("top","35px");
                $("#calendar").show();
                flag="txt";
                });
                 $("#txt1").click(function(){
                      $("#calendar").css("top","100px");
                $("#calendar").show();
                flag="txt1";
                });

                //今天的年 月 日 ；本月的总天数；本月第一天是周几？？？
                var iNow=0;
                var oDate = new Date(); //定义时间
                var Nummonth=oDate.getMonth();
                function run(n) {
                    oDate.setMonth(Nummonth+n);//设置月份
                    var year = oDate.getFullYear(); //年
                    var month = oDate.getMonth(); //月
                    var today = oDate.getDate(); //日
                     
                    //计算本月有多少天
                    var allDay = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month];

                    //判断闰年
                    if(month == 1) {
                        if(year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
                            allDay = 29;
                        }
                    }

                    //判断本月第一天是星期几
                    oDate.setDate(1); //时间调整到本月第一天
                    var week = oDate.getDay(); //读取本月第一天是星期几

                  $(".dateList").empty();//每次清空
                    //插入空白
                    for(var i = 0; i < week; i++) {
                        $(".dateList").append("<li></li>");
                    }

                    //日期插入到dateList
                    for(var i = 1; i <= allDay; i++) {
                        $(".dateList").append("<li class='check'>" + i + "</li>")
                       
                    } 
                    $(".check").click(function(){
                        if(flag=="txt")
                   var t=document.getElementById("txt");
                   else 
                       var t=document.getElementById("txt1");
                   t.value=year+"-"+month+"-"+this.innerHTML;
                   $("#calendar").css("display","none");
                    });
                    //标记颜色=====================
                    $(".dateList li").each(function(i, elm){
                        var val = $(this).text();
                        if (n==0) {
                            if(val<today){
                            $(this).addClass('ccc')
                        }else if(val==today){
                            $(this).addClass('red')
                        }else if(i%7==0  ||  i%7==6   ){
                            $(this).addClass('sun')
                        }
                        }else if(n<0){
                            $(this).addClass('ccc')
                        }if(i%7==0  ||  i%7==6   ){
                            $(this).addClass('sun')
                        }
                    });

                    //定义标题日期
                    $("#calendar h4").text(year + "年" + (month + 1) + "月");
                };
                run(0);
                
                $(".a1").click(function(){
                    iNow--;
                    run(iNow);
                });
                
                $(".a2").click(function(){
                    iNow++;
                    run(iNow);
                })
            });
            </script>

希望能对您有所帮助！

posted @ 2020-04-03 17:08 草木皆斌阅读(234) 评论(0) 编辑收藏举报

刷新页面返回顶部

简单日历的实现（订票）

公告