星空网 > 软件开发 > Java

【仿携程JQuery日期价格表】

今天比较闲所以就花点时间又写了点东西。

相信这种价格表大家不会陌生

【仿携程JQuery日期价格表】

现在我就模仿它做一个简单版本的。效果如下

【仿携程JQuery日期价格表】

首先需要两个时间控件,我这里用的是HTML5里面的时间控件,这个没限制喜欢用什么就用什么

直接上代码吧!我都写了注释。

<!DOCTYPE html><html><head>  <meta charset="utf-8" />  <title></title>  <script src='/images/loading.gif' data-original="../js/jquery-1.9.1.min.js"></script>  <style>    .div {      width: 357px;      min-height: 30px;      border: 1px gray solid;      border-right: 0px;    }      .div div {        width: 50px;        height: 30px;        border-right: 1px gray solid;        border-bottom: 1px gray solid;        float: left;        line-height: 30px;        text-align: center;      }    .sdct_dateday {      border-bottom: 1px #CCCCCC dashed;      height: 30px;      width: 358px;      line-height: 30px;    }      .sdct_dateday div {        width: 50px;        height: 30px;        float: left;        text-align: center;      }        .sdct_dateday div span {          color: #00A9EE;        }    .sdct_datedayborder {      border-right: 1px #CCCCCC solid;      border-left: 1px #CCCCCC solid;    }    #pricecontent {      width:100%;    }  </style></head><body>  <span>开始时间:</span>  <input type="date" value="2016-05-31" id="startdate" />  <span>结束时间:</span>  <input type="date" value="2016-06-10" id="enddate" />  <a href="javascript:void(0)">查看价格表</a>  <div></div></body></html><script>  $(function () {    var Pcd = new Object;  //申明对象    $("a").mouseover(function () {      var html = '<div><div ><div>周日</div><div>周一</div><div>周二</div><div>周三</div><div>周四</div><div>周五</div><div>周六</div></div><div id="pricecontent"></div></div>';      $(this).next().append(html);      //开始日期      var starttime = $("#startdate").val();      //结束日期      var endtime = $("#enddate").val();      //为了兼容火狐浏览器所以将日期拆分成年月日      var starttimeyear = starttime.substring(0, 4);      var starttimemonth = starttime.substring(5, 7);      var starttimeday = starttime.substring(8, 10);      var endtimeyear = endtime.substring(0, 4);      var endtimemonth = endtime.substring(5, 7);      var endtimeday = endtime.substring(8, 10);      //获取时间段跨越几个星期      var d1 = new Date(starttimeyear, starttimemonth - 1, starttimeday);      var d2 = new Date(endtimeyear, endtimemonth - 1, endtimeday);      var dn = (d2 - d1) / 24 / 60 / 60 / 1000;      var day = Math.ceil((dn + d1.getDay()) / 7);      var html = "";      var strBzdatetime = new Date(starttimeyear, starttimemonth - 1, starttimeday).getDay();      $("#pricecontent").children().remove();      //列表第一个日期      var fristdate = Pcd.dateOperator(starttime, strBzdatetime, "-");      //列表第一个日期的日      var fristday = fristdate.substring(fristdate.length - 2, fristdate.length);      //列表最后一个日期      var lastdate = Pcd.dateOperator(endtime, new Date(endtimeyear, endtimemonth - 1, endtimeday).getDay(), "+");      //列表最后一个日期的日      var lastday = lastdate.substring(lastdate.length - 2, lastdate.length);      //根据星期数循环列表      for (var i = 0; i < day; i++) {        html += "<div class='sdct_dateday'>";        html += " </div>";      }      $("#pricecontent").append(html);      //循环添加表格      for (var i = 1; i < 8; i++) {        if (i % 2 == 0) {          $(".sdct_dateday").append("<div></div>");        } else {          $(".sdct_dateday").append("<div class='sdct_datedayborder'></div>");        }      }      //如果列表第一天日期是开始日期的上一个月就选这个月的天数为上个月的天数否则就是开始日期的月天数      var NowMonthDay = "";      if (starttime.substring(5, 7) - fristdate.substring(5, 7) == 1) {        NowMonthDay = Pcd.getDays(fristdate);      } else {        NowMonthDay = Pcd.getDays(starttime);      }      //循环添加日期      var j = 0;      $.each($(".sdct_dateday").children("div"), function (i) {        if (i <= NowMonthDay - fristday) {          $(this).text(fristday + i);        } else {          j++;          $(this).text(j);        }      });      //取得价格数组,循环显示对应日期的价格(在这里我就用红色背景替代了)      var diffdays = Pcd.DateDiff(starttime, endtime);//开始日期、结束日期相差天数      //var pricearry = ""; //价格数组      for (var i = 0; i < diffdays + 1; i++) {        for (var j = strBzdatetime - 1 ; j <= diffdays + 1 + strBzdatetime ; j++) {          if (j - i == strBzdatetime) {            $(".sdct_dateday").children("div").eq(j).css({ "background": "red" })            //这里可以添加价格到日期表中,价格的数量就相当于开始日期、结束日期相差天数            //$(".sdct_dateday").children("div").eq(j).text("价格");          }        }      }    }).mouseout(function () {      $(this).next().children().remove();    });    //日期加减运算    Pcd.dateOperator = function (date, days, operator) {      date = date.replace(/-/g, "/"); //更改日期格式       var nd = new Date(date);      nd = nd.valueOf();      if (operator == "+") {        nd = nd + days * 24 * 60 * 60 * 1000;      } else if (operator == "-") {        nd = nd - days * 24 * 60 * 60 * 1000;      } else {        return false;      }      nd = new Date(nd);      var y = nd.getFullYear();      var m = nd.getMonth() + 1;      var d = nd.getDate();      if (m <= 9) m = "0" + m;      if (d <= 9) d = "0" + d;      var cdate = y + "-" + m + "-" + d;      return cdate;    }    //获取当前月有多少天    Pcd.getDays = function (date) {      var year = date.substring(0, 4);      //获取当前月份      var mouth = date.substring(5, 7);      //定义当月的天数;      var days;      //当月份为二月时,根据闰年还是非闰年判断天数      if (mouth == 2) {        days = year % 4 == 0 ? 29 : 28;      }      else if (mouth == 1 || mouth == 3 || mouth == 5 || mouth == 7 || mouth == 8 || mouth == 10 || mouth == 12) {        //月份为:1,3,5,7,8,10,12 时,为大月.则天数为31;        days = 31;      }      else {        //其他月份,天数为:30.        days = 30;      }      //输出天数      return days;    }    //比较两日期相差多少天    Pcd.DateDiff = function (sDate1, sDate2) {  //sDate1和sDate2是2006-12-18格式       var aDate, oDate1, oDate2, iDays      aDate = sDate1.split("-")      oDate1 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0])  //转换为12-18-2006格式       aDate = sDate2.split("-")      oDate2 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0])      iDays = parseInt(Math.abs(oDate1 - oDate2) / 1000 / 60 / 60 / 24)  //把相差的毫秒数转换为天数       return iDays    }  })</script>

 




原标题:【仿携程JQuery日期价格表】

关键词:jquery

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

10公斤国际快递多少钱:https://www.goluckyvip.com/tag/99414.html
发国际快递多少钱一公斤:https://www.goluckyvip.com/tag/99415.html
国际快递每公斤多少钱:https://www.goluckyvip.com/tag/99416.html
邮政国际快递多少钱一公斤:https://www.goluckyvip.com/tag/99417.html
国际快递10公斤多少钱:https://www.goluckyvip.com/tag/99418.html
国际快递费一公斤多少钱:https://www.goluckyvip.com/tag/99419.html
小米SU7的不甘心全写进了 “周边”的商品链接里 :https://www.kjdsnews.com/a/1836549.html
10天涨粉300+万 “王婆说媒”凭什么一夜爆红? :https://www.kjdsnews.com/a/1836550.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流